目 录CONTENT

文章目录

读心小游戏

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 12174 阅读 / 3299 字

读心小游戏

  • 时间:2019年8月31日
  • 类型:JS练习
  • 人员:魏欣怡

本案例素材了联系“魏欣怡”或下载


效果图

image.png

案例说明

在心中任意选择一个两位数(或者说,从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;
})

0

评论区