position > lastIndex()) {
return false;
}
if (imageIndexForPosition[position] == lastIndex()) {
return true;
} else {
return false;
}
}
上面 lastIndex()
的值为 8。
3、实现方块移动
方块移动的实现很简单,先将旧位置的图形清除,然后在新的位置绘制。
var refreshImagePositions = function(origin, target) {
var originRect = rectForPosition(origin);
context.clearRect(originRect[0], originRect[1], originRect[2], originRect[3]);
drawImageItem(imageIndexForPosition[target], target);
}4、检查是否完成
检查图案是否已经还原,只需要对数组进行一次遍历,看是否有序即可。
var checkIfFinish = function() {
for (var index = 0; index < imageIndexForPosition.length; index++) {
if (index != imageIndexForPosition[index]) {
return false;
}
}
return true;
}5、交互事件屏蔽
当图案还原之后,我们不希望玩家还能通过键盘或鼠标来移动方块,这个时候就需要对交互事件进行屏蔽。
只需要一个标志位就可以达到这个目的:
// 屏幕点击
background.onclick = function(e) {
if (isFinish) {
return;
}
// do something
};
// 键盘按钮事件
document.onkeyup = function(event) {
if (isFinish) {
return;
}
// do something
}当图案还原之后,标志位 isFinish 会被置为 true ,然后在屏幕点击和键盘按钮响应事件的开始处添加判断,如果已经结束,则不继续走方块移动的逻辑。
以上就是如何利用原生的JavaScript来实现一个简单的拼图小游戏的详细内容,更多请关注php中文网其它相关文章!
网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词:如何运用原生的JavaScript来完成一个容易的拼图小游戏