Here我的2048游戏出现问题，我用HTML和Javascript制作，我又遇到了麻烦。这一次，我试图制作一个for / in循环，可以检查左边，右边，顶部和底部的方块是否已填满。 我需要的是一种方法来引用正方形的数字，同时仍然可以参考对象的属性。我正在尽力解释我想要做的事情。我希望我的代码中的注释解释每个块的作用。谢谢你的帮助。
/*
Math.floor(Math.random()*(1-16+1)+1) <------
|
this code picks a random number between 1 and 16___|
switch ()
*/
//this function creates a method to create objects
function square(full, color, number) {
this.full = full;
this.color = color;
this.number = number;
}
//this block creates objects for each square
var sq1 = new square(true, "black", 2);
var sq2 = new square(false, "grey", 2);
var sq3 = new square(false, "grey", 2);
var sq4 = new square(false, "grey", 2);
var sq5 = new square(false, "grey", 2);
var sq6 = new square(false, "grey", 2);
var sq7 = new square(false, "grey", 2);
var sq8 = new square(false, "grey", 2);
var sq9 = new square(false, "grey", 2);
var sq10 = new square(false, "grey", 2);
var sq11 = new square(false, "grey", 2);
var sq12 = new square(false, "grey", 2);
var sq13 = new square(false, "grey", 2);
var sq14 = new square(false, "grey", 2);
var sq15 = new square(false, "grey", 2);
var sq16 = new square(false, "grey", 2);
//creates a board with the .full properties of the squares
board = [sq1.full, sq2.full, sq3.full, sq4.full, sq5.full, sq6.full, sq7.full, sq8.full, sq9.full, sq10.full, sq11.full, sq12.full, sq13.full, sq14.full, sq15.full, sq16.full];
//creates var sq_num to help check if items to left, up, right and down are full
var sq_num =
//this giant code block conducts all movement
function movement() {
document.addEventListener('keydown', function(event) {
/*for (sq_num in board)
{
if sq_num */
if (event.keyCode == 37) //left
{
if (sq4.full == true) {
sq4.color = sq1.color
sq4.color = "grey"
sq1.color = true
}
if (sq8.full == true) {
sq8.color = sq7.color
sq7.color = "black"
}
if (sq12.full == true) {
sq12.color = sq11.color
sq11.color = "black"
}
if (sq16.full == true) {
sq16.color = sq15.color
sq15.color = "black"
}
} else if (event.keyCode == 38) //up
{
sq13.color = sq9.color
sq9.color = "black"
sq14.color = sq10.color
sq10.color = "black"
sq15.color = sq11.color
sq11.color = "black"
sq16.color = sq12.color
sq12.color = "black"
} else if (event.keyCode == 39) //right
{
if (sq1.full == true) {
sq1.color = sq2.color
sq2.color = "black"
sp2.full = true
}
if (sq2.full == true) {
sq2.color = sq3.color
sq3.color = "black"
sq3.full = true
}
if (sq5.full == true) {
sq5.color = sq6.color
sq6.color = "black"
}
if (sq9.full == true) {
sq9.color = sq10.color
sq10.color = "black"
}
if (sq13.full = true) {
sq13.color = sq14.color
sq14.color = "black"
}
} else if (event.keyCode == 40) //down
{
sq1.color = sq5.color
sq5.color = "black"
sq2.color = sq6.color
sq6.color = "black"
sq3.color = sq7.color
sq7.color = "black"
sq4.color = sq8.color
sq8.color = "black"
}
})
};
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//this function draws each square where it should be in the formation of a board.
function draw() {
ctx.clearRect(0, 0, c.width, c.height); // clear the canvas so the old rectangles are gone
// board
ctx.beginPath();
ctx.lineWidth = "2";
ctx.strokeStyle = "grey";
ctx.rect(5, 5, 610, 610);
ctx.stroke();
// sq1
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(10, 10, 150, 150);
ctx.stroke();
ctx.fillStyle = sq1.color;
ctx.fill();
//sq2
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(160, 10, 150, 150);
ctx.stroke();
ctx.fillStyle = sq2.color;
ctx.fill();
//sq3
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(310, 10, 150, 150);
ctx.stroke();
ctx.fillStyle = sq3.color;
ctx.fill();
//sq4
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(460, 10, 150, 150);
ctx.stroke();
ctx.fillStyle = sq4.color;
ctx.fill();
//sq5
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(10, 160, 150, 150);
ctx.stroke();
ctx.fillStyle = sq5.color;
ctx.fill();
//sq6
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(160, 160, 150, 150);
ctx.stroke();
ctx.fillStyle = sq6.color;
ctx.fill();
//sq7
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(310, 160, 150, 150);
ctx.stroke();
ctx.fillStyle = sq7.color;
ctx.fill();
//sq8
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(460, 160, 150, 150);
ctx.stroke();
ctx.fillStyle = sq8.color;
ctx.fill();
//sq9
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(10, 310, 150, 150);
ctx.stroke();
ctx.fillStyle = sq9.color;
ctx.fill();
//sq10
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(160, 310, 150, 150);
ctx.stroke();
ctx.fillStyle = sq10.color;
ctx.fill();
//sq11
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(310, 310, 150, 150);
ctx.stroke();
ctx.fillStyle = sq11.color;
ctx.fill();
//sq12
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(460, 310, 150, 150);
ctx.stroke();
ctx.fillStyle = sq12.color;
ctx.fill();
//sq13
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(10, 460, 150, 150);
ctx.stroke();
ctx.fillStyle = sq13.color;
ctx.fill();
//sq14
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(160, 460, 150, 150);
ctx.stroke();
ctx.fillStyle = sq14.color;
ctx.fill();
//sq15
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(310, 460, 150, 150);
ctx.stroke();
ctx.fillStyle = sq15.color;
ctx.fill();
//sq16
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(460, 460, 150, 150);
ctx.stroke();
ctx.fillStyle = sq16.color;
ctx.fill();
}
window.setInterval(draw, 100) // repeat game loop function forever, 10 times per second(that value is measured in ms)body {
background-color: lightgrey;
}<canvas id="myCanvas" width="620" height="620" style="border:1px solid #d3d3d"></canvas>