JS版:不要踩白块

最新推荐文章于 2022-05-15 18:11:03 发布

YXB413

最新推荐文章于 2022-05-15 18:11:03 发布

阅读量343

点赞数

分类专栏： JavaScript 文章标签： JavaScript 别踩白块游戏

本文链接：https://blog.csdn.net/YXB413/article/details/83012419

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

别踩白块这个游戏，很适合用来练手，而且也不是那么难，废话不多说，先上游戏的思路

以下是代码部分

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>whiteBlock</title>
       <style type="text/css">
           .main {
               width: 400px;
               height: 400px;
               border: 1px solid #FF8C00;
               margin: auto;
               position: relative;
               overflow: hidden;
           }
           .container {
               width: 100%;
               height: 100%;
               position: relative;
               top: -100px;
           }
           .row {
               width: 100%;
               height: 100px;
           }
           .cow {
               width: 100px;
               height: 100px;
               float: left;
           }
           .black {
               background-color: black;
           }
           .score_box {
               margin: 100px 200px;
               position: absolute;
               border: 1px solid #00FFFF;
           }
           .score_box h1{
               float: left;
           }
       </style>
   </head>
   <body>
       <div class="score_box">
           <h1 id="score">0</h1><h1>:分</h1>
       </div>

       <div class="main" id="main">
           <div class="container" id="container"></div>
       </div>
       <script>
       var control = null;//定时器控制句柄
       var flag = 0;//全局判断标记: 0:初始化   1:进行中   2:暂停 3:失败
       var speed = 2;//用于控制速度的快慢

         //游戏初始化函数
         function init(){
            for (var i=0;i<4;i++) {
                createRow();
            }
            $('main').onclick = function(event){
                judge(event);
            };
         }

       function createRow(){
          var row = createrDiv('row');
          var con = $('container');
          //随机产生0~3的数，用以确定那个盒子的颜色为黑色
          var index = Math.floor(Math.random()*4);
          for (var i=0;i<4;i++) {
              index===i?row.appendChild(createrDiv('cow black')):row.appendChild(createrDiv('cow'));
          }

          con.firstChild==null?con.appendChild(row):con.insertBefore(row,con.firstChild);
       }
       //创建div元素，并添加其传过来的classname
       function createrDiv(className){
          var div = document.createElement('div');
          div.className = className;
          return div;
       }

         //根据类名返回元素
         function $(name){
            return document.getElementById(name);
         }

         //方块移动函数
         function move(){
            var con = $('container');
            var top = parseInt(window.getComputedStyle(con,null)['top']);
            top+=speed;
            if(Math.abs(top)<speed){
                top=0;
            }
            con.style.top = top+'px';
             if(top===0){ //每新建一行的时候相应的删除最后一行
                createRow();
                delectRow();
                con.style.top = '-100px';
            }
             else if(top===(-100+speed)){//
                var rows = con.childNodes;
                if((rows.length==5)&&rows[rows.length-1].pass!==1){
                    fail();
                }
             }

         }
         //定时器启动函数
         function start(){
            control = window.setInterval('move()',30);
         }
         //删除越界的行的函数
         function delectRow(num){
                var con = $('container');
                if(con.children.length==6)
                    con.removeChild(con.lastChild);
         }
         //得分函数
         function score(){
            $('score').innerHTML = parseInt($('score').innerHTML)+10;
            if(parseInt($('score').innerHTML)>0&&parseInt($('score').innerHTML)%100==0){
                speed+=2;
            }
         }
         //判断函数
         function judge(){
            if(flag===3){
                alert('游戏结束!');
                return;
            }
             if(event.target.className.indexOf('black')==-1){
                fail();
            }
            else{
                    event.target.className = 'cow';
                    event.target.parentNode.pass = 1;
                     score();
            }
         }
         //判断输赢函数
         function fail(){
            clearInterval(control);
                flag = 3;
                alert('游戏结束');
         }


         init();
         start();
       </script>
   </body>
</html>

YXB413

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS版:不要踩白块

别踩白块这个游戏，很适合用来练手，而且也不是那么难，废话不多说，先上游戏的思路以下是代码部分 &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;whiteBlock&lt;/title&gt;
复制链接

扫一扫

专栏目录