我正在用JavaScript创建2d
类似2046的游戏。
当用户单击一个图块时,该图块将变为白色,附近的图块也将变为白色。即单击[3,4],然后将[3,3],[3,4],[3,5],[2,4],[4,4]变为白色。
但是,如果附近的块具有比被单击的块更大的索引,则事件处理程序无法进行这些更改。即[3,5],[4,4]发生故障。
我曾尝试通过闭包包装处理程序,但仍然失败。什么情况会造成这种情况?
PS问题是在这种情况下发生的WAITING_USER_SELECT_BLOCK
。该setBlock(x,y)
函数应该是blocks [y] [x]时返回null
$(document).ready(function() {
Game.init();
});
var Game = (function() {
var xNumber = 5;
var yNumber = 5;
var blocks = [];
function setBlock(x, y) {
if (blocks[y])
if (blocks[y][x]) {
console.log(blocks[y][x]);
blocks[y][x].css("background", "#FFF");
}
};
function changeStatus(status) {
switch (status) {
case "WAITING_LOGIC_NEW_GAME":
$('#plate').width(50 * xNumber);
$('#plate').height(50 * yNumber);
for (let y = 0; y < yNumber; y++) {
for (let x = 0; x < xNumber; x++) {
if (blocks[y] == null) blocks[y] = [];
blocks[y][x] = $(['<div class="plate-block" ',
'data-block-at-x="' + x + '" ',
'data-block-at-y="' + y + '"></div>'
]
.join(''));
$('#plate').append(blocks[y][x]);
}
}
break;
case "WAITING_USER_SELECT_BLOCK":
$('.plate-block').click(function() {
var block = $(this);
var sx = block.attr('data-block-at-x');
var sy = block.attr('data-block-at-y');
setBlock(sx, sy);
setBlock(sx, sy - 1);
setBlock(sx, sy + 1);
setBlock(sx - 1, sy);
setBlock(sx + 1, sy);
console.log("current block");
console.log(block);
});
break;
}
}
return {
init: function() {
changeStatus("WAITING_LOGIC_NEW_GAME");
changeStatus("WAITING_USER_SELECT_BLOCK");
}
}
})();
#plate {
width: 350px;
height: 350px;
background: #EFEFEF;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.plate-block {
width: 50px;
height: 50px;
background:#EEE;
border: 1px solid #DDD;
-moz-box-sizing: border-box;
box-sizing: border-box;
display:inline-block;
overflow: hidden;
line-height: 50px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plate"></div>
从DOM读取时,值将读取为字符串而不是数字。另外,+
运算符还充当字符串的隐含运算符。
只需将其解析为数字即可。
var sx = +block.attr('data-block-at-x');
$(document).ready(function() {
Game.init();
});
var Game = (function() {
var xNumber = 5;
var yNumber = 5;
var blocks = [];
function setBlock(x, y) {
if (blocks[y])
if (blocks[y][x]) {
console.log(blocks[y][x]);
blocks[y][x].css("background", "#FFF");
}
};
function changeStatus(status) {
switch (status) {
case "WAITING_LOGIC_NEW_GAME":
$('#plate').width(50 * xNumber);
$('#plate').height(50 * yNumber);
for (let y = 0; y < yNumber; y++) {
for (let x = 0; x < xNumber; x++) {
if (blocks[y] == null) blocks[y] = [];
blocks[y][x] = $(['<div class="plate-block" ',
'data-block-at-x="' + x + '" ',
'data-block-at-y="' + y + '"></div>'
]
.join(''));
$('#plate').append(blocks[y][x]);
}
}
break;
case "WAITING_USER_SELECT_BLOCK":
$('.plate-block').click(function() {
var block = $(this);
var sx = +block.attr('data-block-at-x');
var sy = +block.attr('data-block-at-y');
setBlock(sx, sy);
setBlock(sx, sy - 1);
setBlock(sx, sy + 1);
setBlock(sx - 1, sy);
setBlock(sx + 1, sy);
console.log("current block");
console.log(block);
});
break;
}
}
return {
init: function() {
changeStatus("WAITING_LOGIC_NEW_GAME");
changeStatus("WAITING_USER_SELECT_BLOCK");
}
}
})();
#plate {
width: 350px;
height: 350px;
background: #EFEFEF;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.plate-block {
width: 50px;
height: 50px;
background: #EEE;
border: 1px solid #DDD;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
overflow: hidden;
line-height: 50px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plate"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句