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)的定义。在更新坐标时,我们对机器人是否超出边界进行了判断,并只有在未超出边界的情况下才更新坐标。这样可以确保机器人不会走出画布范围。请根据实际情况调整画布大小和单元格大小的数值。

相关推荐
南囝coding11 分钟前
《独立开发者精选工具》第 018 期
前端·后端
小桥风满袖33 分钟前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花1 小时前
i18n国际语言化配置
前端
编程贝多芬1 小时前
Promise 的场景和最佳实践
前端·javascript
Asort1 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio1 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗1 小时前
JS的对象属性存储器
前端
Lotzinfly1 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果1 小时前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
开源之眼1 小时前
React中,useState和useReducer有什么区别
前端