定个小目标：一月一万行代码3
前言：这是一个图片消消消的小游戏，简单练习。
游戏开始时，显示12个图像的背面，用鼠标点击其中任意一张，即可显示图像的正面，如果点击了两张，则显示出两张图像的正面。如果点击过的两张图像是相同的图像，则将图像从界面中移除，如果不同，则将两张图像重新显示其背面。直到所有的图像都消除掉。
效果：
思路如下：
在一个div内部用12个img标签来显示12个图像，开始时，12个img都显示相同的图像，而真实的图像则存储在一个数组中。点击时，img标签的id对应数组的下标，即得到其正面的图像。如果打开了两张图像时，则判断两个img标签的id对应的数组中的值是否相同，如果相同，则表示是两张相同的图像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片消消消</title>
<style>
* {
margin: 0;
padding: 0;
}
#current {
margin: 50px auto;
width: 800px;
height: 300px;
text-align: center;
padding: 20px;
}
#current>img {
width: 124px;
height: 140px;
margin: 2px;
}
</style>
</head>
<body>
<div id="current"></div>
</body>
<script>
var clickCount = 0; //记录点击次数
var firstCard = 0; //记录点击的第一张图片
var secondCard = 0; //记录点击的第二张图像
var imgs = ["img/a.jpg", "img/b.jpg", "img/c.jpg", "img/d.jpg", "img/e.jpg", "img/f.jpg",
"img/a.jpg", "img/b.jpg", "img/c.jpg", "img/d.jpg", "img/e.jpg", "img/f.jpg"
];
var cardBg = "img/bg.jpg";
var img = [];
var box = document.getElementById("current");
//打乱数组图片的顺序
function shuffle(arr) {
for (var i = 0; i < imgs.length; i++) {
var index = parseInt(Math.random() * 12);
//不借助第三个变量，交换变量
[imgs[i], imgs[index]] = [imgs[index], imgs[i]];
}
return arr;
};
//判断游戏是否结束
function checkResult() {
var boxChild = box.childElementCount;
return boxChild;
}
//实现翻牌
function changeCard(e) {
console.log("clickCount=" + clickCount);
var id = e.getAttribute("id");
if (clickCount === 0) {
firstCard = id;
// console.log("firstCard=" + firstCard);
img[firstCard].setAttribute("src", imgs[firstCard]);
}
if (clickCount === 1) {
secondCard = id;
// console.log("secondCard=" + secondCard);
if (firstCard === secondCard) {
alert("不能多次点击图片");
img[firstCard].setAttribute("src", cardBg);
firstCard = 0;
secondCard = 0;
clickCount = -1;
} else {
img[secondCard].setAttribute("src", imgs[secondCard]);
setTimeout(() => {
if (imgs[firstCard] === imgs[secondCard]) {
img[firstCard].onClick = "";
img[secondCard].onClick = "";
box.removeChild(img[firstCard]);
box.removeChild(img[secondCard]);
if (checkResult() <= 0) {
alert("游戏结束");
}
} else {
img[firstCard].setAttribute("src", cardBg);
img[secondCard].setAttribute("src", cardBg);
}
firstCard = 0;
secondCard = 0;
clickCount = 0;
}, 500);
}
}
clickCount++;
}
//创建12个图像元素
for (var i = 0; i < imgs.length; i++) {
img[i] = document.createElement("img");
img[i].src = cardBg;
img[i].setAttribute("id", i);
img[i].onclick = function () {
changeCard(this);
}
box.appendChild(img[i]);
}
shuffle(imgs);
</script>
</html>
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码