javascript - 有什么方法可以在不完全重新处理/重新编码的情况下为我的迷宫添加边界？

Question

在一些合作伙伴的帮助下，我将这个迷宫游戏放在一起用于学校元素。我已经在图像上绘图了，但我的老师正在寻找某种形式的边界/边框，以防止用户跳过墙壁。我什至不确定这是否可能。

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

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

<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);
}