Javascript 有没有什么方法可以在没有完全重新编程的情况下为我的迷宫添加边界？

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

这是单个图像的块以及级别选择器按钮的简短片段

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

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

（中等）
var img2=新图像（）；
函数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'；

下面是我用来在图像上绘图的代码

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

var el=document.getElementById（'can1'）；
var ctx=el.getContext（'2d'）；
var提取；
el.onmousedown=函数（e）{
isDrawing=true；
ctx.strokeStyle=“绿色”；
ctx.lineWidth=4；
ctx.lineJoin=ctx.lineCap='round'；
ctx.moveTo（e.offsetX，e.offsetY）；
};
el.onmousemove=功能（e）{
if（isDrawing）{
ctx.lineTo（e.offsetX，e.offsetY）；
ctx.stroke（）；
}
};
el.onmouseup=函数（）{
isDrawing=false；
};

不知道迷宫图像的外观有点困难，但最基本的解决方案是在鼠标光标点检查图像的颜色，并根据颜色决定是否继续绘制

下面我有一些基本准确的代码，在本例中，我们的想法是在鼠标光标的位置获取图像的颜色。在这种情况下，我假设一个黑白迷宫，其中墙壁是黑色的，活动区域是白色的。我检查颜色数据以查看红色是否最大化（只有当您的行走区域是红色最大化的颜色，如白色、红色或黄色时，这才起作用。对于不同的颜色，请相应调整，但此处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);
}

---

在允许

.lineTo

之前，请检查

onmousemove

中的坐标

e.offsetX，e.offsetY

，谢谢。目前正在研究这种方法。