读心小游戏
- 时间：2019年8月31日
- 类型：JS练习
- 人员：魏欣怡
本案例素材了联系“魏欣怡”或下载
效果图
案例说明
在心中任意选择一个两位数（或者说，从10~99之间任意选择一个数），把这个数字分别减去其十位数和个位数（例如你选择的是71,那就：71-7-1=63）。
在右边图表中找出与最后得出的数所相应的图形，并把这个图形牢记心中，然后点击上方的阵型。你会发现，阵型所显示出来的图形就是你刚刚心里记下的那个图形。
实现过程
第一步：实现布局效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>读心术</title>
<link rel="stylesheet" href="css/demo.css" type="text/css">
</head>
<body>
<div class="container">
<div class="left">
<div class="top">
<img src="image/round.png" id="initImg">
<img src= "image/0.png" style="opacity: 0" id="resultImg">
</div>
<div class="bottom">
<p>在心中任意选择一个两位数（或者说，从10~99之间任意选择一个数），把这个数字分别减去其十位数和个位数（例如你选择的是71,那就：71-7-1=63）。</p>
<p>在右边图表中找出与最后得出的数所相应的图形，并把这个图形牢记心中，然后点击上方的阵型。你会发现，阵型所显示出来的图形就是你刚刚心里记下的那个图形。</p>
</div>
</div>
<div class="right">
</div>
</div>
</body>
<script src="js/demo.js" type="text/javascript"></script>
</html>
第二步：完成JS效果
// var startGame=false;
var maxImgIndex=16;
var initImg=document.querySelector("#initImg");
var resultImg=document.querySelector("#resultImg");
var right=document.querySelector(".right");
var currentImage;
function getRandom(min, max) {
return Math.floor(Math.random()*(max-min)+min);
}
function initImgArea() {
currentImage = getRandom(0, maxImgIndex);
right.innerHTML = "";
for (var i = 0; i < 100; i++) {
var imgIndex;
if (i % 9 === 0) {
imgIndex = currentImage;
} else {
imgIndex = getRandom(0, maxImgIndex);
}
right.innerHTML += `<div class="item"><span class="number">${i}</span><img src="image/${imgIndex}.png "></div>`
}
}
initImgArea();
document.querySelector(".top").addEventListener("click",function (e) {
// if (startGame){
// return
// }
e.currentTarget.style.transition="all 3s";
e.currentTarget.style.transform="rotate(1440deg)";
});
document.querySelector(".top").addEventListener("transitionend",function (e) {
e.currentTarget.style.transition = "none";
e.currentTarget.style.transform = "rotate(0deg)";
initImg.style.opacity=0;
resultImg.style.opacity=1;
resultImg.src=`image/${currentImage}.png`;
// isGameOver = true;
})