任何在没有完全重新编程/重新编程的情况下为我的迷宫添加边界的方法

Any way to add boundaries to my maze without a complete reaproach/recode?

本文关键字：新编程 编程 我的 迷宫 添加 方法 边界 情况下 任何      更新时间：2023-09-26

在几个合作伙伴的帮助下，我为一个学校项目制作了这个迷宫游戏。我已经开始在图像上画画了，但我的老师正在寻找某种形式的边界/边界，以防止用户跳过墙壁。我甚至不确定这是否可能。

这是单个图像的块，以及级别选择器按钮的一小段。

注意：这些只是代码的一部分，旨在向大家展示我所说的部分。它在实际文件中的格式不同。

<li align="center" style="color:yellow"><div style="color:yellow">(Medium)    </div><input type="button" id="l2" value="Level 2" onClick="test2()"/>

<script>
 var img2 = new Image();
 function test2() {
 can.width = img2.width;
 can.height = img2.height;
 ctx.drawImage(img2, 0, 0);
}
img2.src = 'http://www.hereandabove.com/cgi-bin/maze?30+30+20+5+5+0+0+0+255+255+255.jpg';
</script>

这是我用来允许在图像上绘制的代码。

<canvas id="can1">
<script>
var el = document.getElementById('can1');
var ctx = el.getContext('2d');
var isDrawing;
el.onmousedown = function(e) {
 isDrawing = true;
  ctx.strokeStyle = "green";
  ctx.lineWidth = 4;
  ctx.lineJoin = ctx.lineCap = 'round';
  ctx.moveTo(e.offsetX, e.offsetY);
};
el.onmousemove = function(e) {
  if (isDrawing) {
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
  }
};
el.onmouseup = function() {
  isDrawing = false;
};
</script>

如果不知道迷宫图像是什么样子，这有点困难，但一个非常基本的解决方案是在鼠标光标点检查图像的颜色，并根据颜色决定是否继续绘制。

我在下面有一些最准确的代码，在这种情况下，我们的想法是在鼠标光标的位置获得图像的颜色。在这种情况下，我假设一个黑白迷宫，墙壁是黑色的，可移动区域是白色的。我检查颜色数据以查看红色是否达到最大值（只有当你的行走区域是红色达到最大值的颜色时，如白色、红色或黄色，这才会起作用。对于不同的颜色，请相应地进行调整，但这里的rgbColorData是一个数组，其中0为红色，1为绿色，2为蓝色）。只要颜色决定了它是可移动的，那么你就可以移动。

同样，如果没有实际的代码，很难提供一个完美的答案，但我会朝着这个方向前进。

var rgbColorData = ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data; 
if (rgbColorData[0] == 255) {
    isDrawing = true;
    ctx.strokeStyle = "green";
    ctx.lineWidth = 4;
    ctx.lineJoin = ctx.lineCap = 'round';
    ctx.moveTo(e.offsetX, e.offsetY);
}
相关文章：