【发布时间】：2021-06-11 09:03:50
【问题描述】：
我正在尝试制作俄罗斯方块游戏，并且我取得了一些进展，但我遇到了对象键分配问题，
我现在要做的是检测形状的碰撞，我想的是跟踪每个形状的位置
，通过将坐标存储在名为alreadyOccupiedPos 的对象中
这个对象将形状存储为键
，例如，第一个出现的形状的键名将是“1”，第二个出现的形状的键名是“2”等...
并且每个形状都有一个作为数组数组的值，该数组包括构成形状的正方形和每个正方形
表示为一个子数组，子数组有两个元素，当前行和当前列，其中
广场在棋盘内。我首先为alreadyOccupiedPos object 提供了第一个形状的默认键。
我有两个关键变量，第一个是numberOfSquares，它代表形状所包含的正方形的数量，
并且每次创建或移动新形状时都会重置它，然后我有shapeNumber 这是函数中的默认参数，我可以用来引用
到 alreadyOccupiedPos 对象中的形状编号。现在到我面临的问题，在形状绘制发生的第二个循环中，以及绘制形状，
我试图通过推送一个包含当前行和当前列的数组来在alreadyOccupiedPos object 中插入每个正方形的位置
square 位于包含形状正方形的数组中，这就是我尝试做的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, 0],
[1, 0, 0],
[1, 1, 1]
];
let S_shape = [
[0, 1, 1],
[0, 1, 0],
[1, 1, 0]
];
let Z_shape = [
[1, 1, 0],
[0, 1, 0],
[0, 1, 1]
];
let J_shape = [
[0, 0, 1],
[0, 0, 1],
[1, 1, 1]
];
let square_shape = [
[1, 1, 1],
[1, 1, 1],
[1, 1, 1]
];
let I_shape = [
[0, 1, 0],
[0, 1, 0],
[0, 1, 0]
];
let T_shape = [
[1, 1, 1],
[0, 1, 0],
[0, 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;
}
【问题讨论】：
-
你检查过，条件 (
randomlyChosenShape[j][i] === 1) 真的通过了吗？ -
@Teemu 是的，它确实如此，否则形状不会被绘制，你明白为什么条件是正确的吗？
标签： javascript javascript-objects