如何解决我无法为 javascript 对象键赋值
我正在尝试制作俄罗斯方块游戏,并且取得了一些进展,但我遇到了对象键分配问题,
我现在要做的是检测形状的碰撞,我想到的是跟踪每个形状的位置
,通过将坐标存储在一个名为 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);
将值分配给新创建的数组。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。