问题描述
我正在尝试制作俄罗斯方块游戏，并且取得了一些进展，但我遇到了对象键分配问题，
我现在要做的是检测形状的碰撞，我想到的是跟踪每个形状的位置
，通过将坐标存储在一个名为 alreadyOccupiedPos 的对象中
这个对象将形状存储为键,例如第一个出现的形状的键名将是'1'，第二个出现的形状的键名是'2'等等...
并且每个形状都有一个作为数组数组的值，该数组包括构成形状的正方形和每个正方形
表示为一个子数组，子数组有两个元素，当前行和当前列，其中
方格在棋盘内。我首先为 alreadyOccupiedPos object 指定第一个形状的默认键。
我有两个关键变量，第一个是 numberOfSquares，它表示形状包含的方块数，
每次创建或移动新形状时它都会重置，然后我有 shapeNumber 这是函数中的默认参数，我可以用来引用
到 alreadyOccupiedPos 对象中的形状编号。现在我面临的问题，在形状绘制发生的第二个循环中，以及绘制形状，
我试图通过推送一个包含当前行和当前列的数组来插入 alreadyOccupiedPos object 中每个方块的位置
正方形是包含形状正方形的数组，这就是我试图做的alreadyOccupiedPos[shapeNumber][numberOfSquares] = [j + step,i + randomHorizantalPos];
问题是它没有得到分配。
这是代码笔：
https://codepen.io/marwanoss/pen/gOmxPoP?editors=0010
这是js代码：
let tableBody = document.querySelector('table').children[0];
let tableRows = Array.from(tableBody.children)
//shapes
let L_shape = [
[1,0],[1,1,1]
];
let S_shape = [
[0,1],[0,0]
];
let Z_shape = [
[1,1]
];
let J_shape = [
[0,1]
];
let square_shape = [
[1,1]
];
let I_shape = [
[0,0]
];
let T_shape = [
[1,0]
]
let shapes = [L_shape,S_shape,Z_shape,J_shape,square_shape,I_shape,T_shape],colors = ['red','black','green','yellow','cyan','rgb(44,10,10)'],randomlyChosenColor = colors[Math.floor(Math.random() * colors.length)],randomlyChosenShape = shapes[Math.floor(Math.random() * shapes.length)],randomHorizantalPos = Math.floor(Math.random() * 13),numberOfSquares = 0,clearLimit = tableRows.length,alreadyOccupiedPos = { 1: [] };
function recur(step = 0,shapeNumber = 1) {
//this condition checks whether a shape has reached the bottom of the board or not,if so a new shape gets generated and the position get reseted to the top of the board.
if (step === 17) {
clearLimit = step;
randomHorizantalPos = Math.floor(Math.random() * 13);
randomlyChosenShape = shapes[Math.floor(Math.random() * shapes.length)];
randomlyChosenColor = colors[Math.floor(Math.random() * colors.length)];
alreadyOccupiedPos[shapeNumber + 1] = [];
numberOfSquares = 0;
recur(0,shapeNumber)
} else {
//this for loop clears the board
for (let i = 0; i < tableRows.slice(0,clearLimit - 1).length; i++) {
for (let j = randomHorizantalPos; j < randomHorizantalPos + 3; j++) {
tableRows[i].children[j].style.backgroundColor = 'white'
}
}
//after the board gets cleared by the prevIoUs loop this loop creates the shape by giving the squares a background color to create the illusion of the shape moving by adding a step in each recursive call
for (let i = 0; i < tableRows.length; i++) {
for (let j = 0; j < randomlyChosenShape.length; j++) {
if (randomlyChosenShape[j][i] === 1) {
tableRows[j + step].children[i + randomHorizantalPos].style.backgroundColor = randomlyChosenColor;
alreadyOccupiedPos[shapeNumber][numberOfSquares] = [j + step,i + randomHorizantalPos];
numberOfSquares++;
}
}
}
setTimeout(() => {
numberOfSquares = 0;
recur(step + 1,shapeNumber)
},1000);
}
}
recur()
这是 html（这是很多 html，哈哈，我可以使用 js 中的循环创建 html，我只是忘记了 xD）：
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script src="tetris.js"></script>
</body>
这是CSS：
body{
display: flex;
padding: 0;
margin: 0;
Box-sizing: border-Box;
background-color: black;
}
html{
font-size: 10px;
}
table{
background-color: white;
height: 60rem;
width: 50rem;
margin: 5% auto;
}
table td{
background-color: white;
border: black .1px solid;
}
解决方法
alreadyOccupiedPos[shapeNumber][numberOfSquares] 已分配。也许你需要改变行
recur(0,shapeNumber)
到
recur(0,shapeNumber + 1);
将值分配给新创建的数组。