没有完整的投诉/重新编码可以在迷宫中添加边界吗？

Question

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

这是用于单个图像的块，以及一小段“水平”选择器按钮。

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

<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>

Answer 1

不知道迷宫图像的外观会有些困难，但是一个非常基本的解决方案是在鼠标光标处检查图像的颜色，然后根据颜色确定是否继续绘制。

我下面有一些最准确的代码，在这种情况下，其想法是在鼠标光标所在的位置获取图像的颜色。 在这种情况下，我假设墙壁为黑色，活动区域为白色的黑白迷宫。 我检查颜色数据以查看红色是否已用完（仅当您的步行区域是红色已用完的颜色时才有效，例如白色，红色或黄色。对于不同的颜色，请进行相应的调整，但是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);
}