JavaScript DOM动画应用---找不同，寻找房祖名游戏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
           #wrap{
           width: 400px;
           height: 600px;
           border: 1px solid;
           margin: 0 auto;
           position: relative;
           padding: 20px;
           background: lightgray;
       }
       #time{
           position: absolute;
           left: 20px;
       }
       #score{
           position: absolute;
           right: 20px;
       }
       #start{
           width: 50px;
           height: 30px;
           line-height: 30px;
           font-size: 20px;
           background-color: #D4BED5;
           color: white;
           position: absolute;
           left: 0;
           right: 0;
           margin: 0 auto;
           top: 80px;
           text-align: center;
       }
       #main{
           width: 400px;
           height: 400px;
           position: absolute;
           top: 0;
           bottom: 0;
           margin: auto;
           /*display: flex;*/
       }
   </style>
</head>
<body>
   <div id="wrap">
       <div id="time">倒计时:60.0s</div>
       <div id="score">分数：0</div>
       <div id="start">开始</div>
       <div id="main">
           <img src="../img/1.png" alt="">
       </div>
   </div>
</body>
<script>
   var scoreNum = 0 ; //记录得分变量
   var count = 2; //表示当前关卡数
   //倒计时函数
   function timeFn(){
       var n = 9 ;
       var timer = setInterval(function(){
           time.innerHTML = "剩余时间"+n+"s";
           n--;
           if (n < 0) {
               clearInterval(timer);
               start.style.display = "block";
               // 分数重置
               scoreNum = 0;
               // 关卡重置
               count = 2;
               // 重置游戏界面
               createImg(1);
           }
           console.log(timer);
       },1000);
   }

   // 得分函数
   function scoreFn(){
       scoreNum++;
       score.innerHTML = "得分:"+scoreNum;
   }

   // 开始按钮
   start.onclick = function(){
       // 隐藏开始按钮
       this.style.display = "none";
       // 将一张大图换成四张小图
       // 先清空main
       main.innerHTML = "";
       createImg(count);
       // 开启计时器
       timeFn();
       // 游戏得分显示重置
       score.innerHTML = "得分："+scoreNum;

   }
   // 创建图片的函数
   // 参数index表示当前是第几关，要创建index的平方个图片
   function createImg(index){
       // 创建之前先清空
       main.innerHTML = "";
       // 计算每张图片的宽高
       var w = 380/index;
       var color = randomColor();
       // 随机得到房祖名本次图片的位置
       var num = Math.pow(index,2);
       var numFang = randomNum(0,num);
       // 创建图片
       for(var i=0;i<num;i++){
           var img = document.createElement("img");
           img.style.width = w + "px";
           // 判断房祖名
           if (i == numFang) {
               img.src = "../img/2.png";
               img.onclick = function(){
                   // 加分
                   scoreFn();
                   // 进入下一关
                   count++;
                   // 将关卡设置为九关
                   if (count > 9) {
                       count = 9;
                   }
                   createImg(count);

               }
           }else{
               img.src = "../img/1.png";
           }
           img.style.background = color;
           main.appendChild(img);
       }
   }
   // 随机背景色
   function randomColor(){
       return "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"
   }
   // 随机下标房祖名照片
   function randomNum(min,max){
       return Math.floor(Math.random()*(max-min)+min);
   }
</script>
</html>

JavaScript DOM动画应用---找不同，寻找房祖名游戏

猜你喜欢