Javascript 使用mousemove事件在网格中创建矩形

我试图用js做一个简单的游戏，但我有一些问题

我想做的是在画布中使用mousemove事件创建一个矩形网格，同时使用随机颜色移动鼠标

我的代码：

JS:

var-NUM\u-RECTANGLES\u-overs=4；
var NUM_矩形_DOWN=10；
函数random_color（）{
var r=Math.floor（Math.random（）*255）；
var g=Math.floor（Math.random（）*255）；
var b=Math.floor（Math.random（）*255）；
返回{
“r”：r，
“g”：g，
“b”：b
};
}
window.onload=（）=>{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var rect_x=canvas.width/NUM_RECTANGLES_；
var rect_y=canvas.height/NUM_RECTANGLES_DOWN；
canvas.addEventListener（“mousemove”，函数（事件）{
var color=random_color（）；
var layer_x=event.layerX-canvas.offsetLeft；
var layer_y=event.layerY-canvas.offsetTop；
var x=0；
var y=0；
对于（变量i=0；i=层x）{
打破
}
x+=rect_x；
}
ctx.beginPath（）；
ctx.fillStyle=“rgb（“+color.r+”，“+color.g+”，“+color.b+”）
ctx.rect（x，y，rect_x，rect_y）；
ctx.fill（）；
})
}

HTML:

#帆布{
宽度：400px；
高度：500px；
边框：1px纯黑；
}

问题是： 当我将鼠标移到canvar上时，矩形不会创建鼠标所在的位置

看看你自己：

---

谢谢。

你离得很近，只是有几件事把你绊倒了

canvas.width

如果打开开发人员控制台，canvas.width将设置为300，而不是预期的400-您需要添加：

var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 500;

此外，递增x的逻辑应该如下所示：

    for (var i = 0; i < NUM_RECTANGLES_ACROSS; i++) {
        if (x + rect_x  < layer_x) {
            x += rect_x;
        }
    }

for（变量i=0；i

这里有一个工作的例子，仍然有可能的改进，但这应该让你在正确的方向

#帆布{
宽度：400px；
高度：500px；
边框：1px纯黑；
}
var NUM_矩形_交叉=4；
var NUM_矩形_DOWN=10；
函数random_color（）{
var r=Math.floor（Math.random（）*255）；
var g=Math.floor（Math.random（）*255）；
var b=Math.floor（Math.random（）*255）；
返回{
“r”：r，
“g”：g，
“b”：b
};
}
window.onload=（）=>{
var canvas=document.getElementById（“canvas”）；
画布宽度=400；
高度=500；
var ctx=canvas.getContext（“2d”）；
var rect_x=canvas.clientWidth/NUM_RECTANGLES_；
var rect_y=canvas.clientHeight/NUM_RECTANGLES_DOWN；
canvas.addEventListener（“mousemove”，函数（事件）{
var color=random_color（）；
var layer_x=event.layerX-canvas.offsetLeft；
var layer_y=event.layerY-canvas.offsetTop；
var x=0；
var y=0；
对于（变量i=0；i

你很接近，只是有几件事让你绊倒了

canvas.width

如果打开开发人员控制台，canvas.width将设置为300，而不是预期的400-您需要添加：

var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 500;

此外，递增x的逻辑应该如下所示：

    for (var i = 0; i < NUM_RECTANGLES_ACROSS; i++) {
        if (x + rect_x  < layer_x) {
            x += rect_x;
        }
    }

for（变量i=0；i

这里有一个工作的例子，仍然有可能的改进，但这应该让你在正确的方向

#帆布{
宽度：400px；
高度：500px；
边框：1px纯黑；
}
var NUM_矩形_交叉=4；
var NUM_矩形_DOWN=10；
函数random_color（）{
var r=Math.floor（Math.random（）*255）；
var g=Math.floor（Math.random（）*255）；
var b=Math.floor（Math.random（）*255）；
返回{
“r”：r，
“g”：g，
“b”：b
};
}
window.onload=（）=>{
var canvas=document.getElementById（“canvas”）；
画布宽度=400；
高度=500；
var ctx=canvas.getContext（“2d”）；
var rect_x=canvas.clientWidth/NUM_RECTANGLES_；
var rect_y=canvas.clientHeight/NUM_RECTANGLES_DOWN；
canvas.addEventListener（“mousemove”，函数（事件）{
var color=random_color（）；
var layer_x=event.layerX-canvas.offsetLeft；
var layer_y=event.layerY-canvas.offsetTop；
var x=0；
var y=0；
对于（变量i=0；i

你是天才你是天才请不要破坏你的帖子，为别人做更多的工作。通过在Stack Exchange（SE）网络上发布，您已经在a下授予SE分发内容的不可撤销权利（即，无论您未来的选择如何）。根据SE政策，分发非故意破坏版本。因此，任何故意破坏行为都将恢复原状。请参阅：。如果允许删除，在帖子下方左侧有一个“删除”按钮，但它仅在浏览器中，而不是在移动应用程序中。请不要通过破坏您的帖子为他人做更多的工作。通过在Stack Exchange（SE）网络上发布，您已经