vue 机器人走过的地方画线且对边界进行处理

javascript 复制代码
<template>
  <div>
    <canvas ref="canvas" width="400" height="400"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');

    // 定义画布大小和单元格大小
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;
    const cellSize = 40;

    // 定义机器人的起点和路径
    const startX = cellSize / 2;
    const startY = cellSize / 2;
    const path = ['right', 'down', 'down', 'left', 'up', 'up', 'right', 'right', 'down'];

    // 设置起点
    let x = startX;
    let y = startY;

    // 绘制起点
    ctx.fillStyle = 'red';
    ctx.fillRect(x - 5, y - 5, 10, 10);

    // 遍历路径
    path.forEach(direction => {
      // 根据方向更新坐标
      if (direction === 'up') {
        if (y - cellSize >= 0) {
          y -= cellSize;
        }
      } else if (direction === 'down') {
        if (y + cellSize < canvasHeight) {
          y += cellSize;
        }
      } else if (direction === 'left') {
        if (x - cellSize >= 0) {
          x -= cellSize;
        }
      } else if (direction === 'right') {
        if (x + cellSize < canvasWidth) {
          x += cellSize;
        }
      }

      // 绘制路径
      ctx.strokeStyle = 'blue';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(x - 5, y - 5);
      ctx.lineTo(x + 5, y + 5);
      ctx.stroke();
    });
  }
};
</script>

在上述代码中,我们添加了画布的宽度(canvasWidth)和高度(canvasHeight)以及单元格大小(cellSize)的定义。在更新坐标时,我们对机器人是否超出边界进行了判断,并只有在未超出边界的情况下才更新坐标。这样可以确保机器人不会走出画布范围。请根据实际情况调整画布大小和单元格大小的数值。

相关推荐
BillKu5 分钟前
Vue3应用执行流程详解
前端·javascript·vue.js
欧阳天风16 分钟前
链表运用到响应式中
javascript·数据结构·链表
Codebee20 分钟前
OneCode 移动套件多平台适配详细报告
前端·人工智能
你知唔知咩系timing啊23 分钟前
🎙️ 站在巨人肩膀上:基于 SenseVoice.cpp 的前端语音识别实践
前端
一位搞嵌入式的 genius23 分钟前
前端开发核心技术与工具全解析:从构建工具到实时通信
前端·笔记
littleplayer25 分钟前
Redux 中›ABC三个页面是如何通信的?
前端
安卓开发者26 分钟前
鸿蒙NEXT的Web组件网络安全与隐私保护实践
前端·web安全·harmonyos
程序员NEO34 分钟前
3分钟搞定Vue组件库
前端
程序员NEO38 分钟前
WebStorm代码一键美化
前端
前端农民工ws1 小时前
Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景
前端·javascript·vue.js·ai