简易的对对碰游戏实现(基于JavaScript的事件处理机制)
原理:要制作这个游戏很简单,首先需要绘制一个表格,并在其中添加照片。然后,通过鼠标点击事件调用在JavaScript中编写的隐藏图片功能的函数,从而达到预期效果。
具体代码如下:
以下是重构后的代码:
```html
img {
margin: 9px;
float: left;
width: 32px;
height: 32px;
}
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
---|
var lastObj = null;
var objCount = 0;
var tableBody = document.getElementById("tableBody");
var images = [
"img/bg-0092.gif", "img/bg-0704.gif", "img/bg-0884.gif", "img/bg-0092.gif", "img/bg-0884.gif", "img/bg-0704.gif", "img/bg-0092.gif", "img/bg-0884.gif", "img/bg-0704.gif", "img/bg-0092.gif", "img/bg-0704.gif", "img/bg-0884.gif", "img/bg-0092.gif", "img/bg-0704.gif", "img/bg-0884.gif"
];
function clickDisappear(obj) {
if (obj !== lastObj) { // 如果当前对象不是上一个对象,则移除上一个对象并添加新对象到表格中
if (lastObj) {
lastObj.style.display = "none"; // 隐藏上一个对象
}
objCount++; // 对象数量加一
var newImg = document.createElement("img"); // 创建新对象
newImg.src = images[objCount % images.length]; // 设置新对象的图片路径
newImg.onclick = clickDisappear; // 设置新对象的点击事件处理函数为clickDisappear函数
tableBody.appendChild(newImg); // 将新对象添加到表格中
lastObj = newImg; // 将新对象设置为当前对象
} else { // 如果当前对象是上一个对象,则将上一个对象的显示状态设为"none"以隐藏它,并将新对象的显示状态设为"block"以显示它
lastObj.style.display = "none";
lastObj = obj; // 将当前对象设置为上一个对象
}
}
```
在时间紧迫、任务繁重的情况下,我们不再多言,让我们在下一篇文章中继续探讨吧!期待与您相聚!