JavaScript+html+css实现别踩白块游戏

古城微笑少年丶 2022-06-04 05:26 320阅读 0赞

### 游戏思路 ###

1.  先创建一个正方形，将其分成16块  
    部分代码如下：

div{
                margin: 0 auto;
                width: 100px;
                height: 100px;
            }
            #main { 
                width: 400px;
                height: 400px;
                background: white;
                border: 2px solid gray;
                margin: 0 auto;
                position: relative;
    
            }
    
            #container{ 
                width: 100%;
                height: 400px;
                border-collapse:collapse;
            }
    
            .row{
                height: 100px;
                width: 100%;
            }
            .cell{
                height: 100px;
                width: 100px;
                float: left;
            }
            .black {
                background: black;
            }
        <div id="main">
            <div id="container">
                <div class="row">
                    <div class="cell"></div>
                    <div class="cell black"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                </div>
                <div class="row">
                    <div class="cell"></div>
                    <div class="cell black"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                </div>
                <div class="row">
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell black"></div>
                    <div class="cell"></div>
                </div>
                <div class="row">
                    <div class="cell black"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
                </div>
            </div>
        </div>

效果：  
![这里写图片描述][SouthEast]  
2. 将最上面一行上移并隐藏(黑块要不断地从上面掉落下来)

给container添加：    
    top: -100px; 
    position: relative;
    给main添加：
    position: relative;
    overflow: hidden;

效果图：  
![这里写图片描述][SouthEast 1]  
3. 这些黑块肯定要让Js动态生成啊，可以一行一行的生成，而每一行都是由四个cell组成，（黑色的那块多加一个class=”black”就行啦）， 选哪一块作为黑色呢？ 就要用到随机数了  
部分代码：

一定要注意函数传参，心累啊
            function get_id(value) { 
                var id = document.getElementById(value);
                return id;
            }
            function create_cell() {   
                var temp = ["cell","cell","cell","cell"];
                var i = Math.floor(Math.random()*4);   //产生[0,4)之间的随机数
                temp[i] = "cell black";   //不要写成 ["cell black"]
                return temp;
            }
           function create_div(Name) { 
                var div = document.createElement("div");
                div.className = Name;
                return div;
            }
           function create_row() { 
                var row = create_div("row");  
                var container = get_id("container");
                var array = create_cell(); 
    
                container.appendChild(row);
                for(var i = 0; i < 4; i++) {               
                    row.appendChild(create_div(array[i]));//这里不需要加冒号！！
                }
                if(container.firstChild == null) {
                    container.appendChild(row);
                }
                else {
                    container.insertBefore(row,container.firstChild);   
                }  
            }

4.让方块动起来  
主要是Js操作dom， 添加定时函数setInterval（）使方块匀速下落，在移动的同时，要判断最下面一行黑色的方块是否触底，触底则游戏失败，如何判断鼠标点到黑色方块呢？ 只需要添加一个judge函数就ok了  
代码如下：

游戏完整代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>By 一笑而过</title>
        <style> #main{ width: 400px; height: 400px; border: 2px solid rgba(0, 0, 0, 0.6); margin: 0 auto; overflow: hidden; } #container{ width: 100%; height: 400px; top: -100px; position: relative; border-collapse: collapse; } .row{ width: 100%; height: 100px; } .myrow{ width: 100%; height: 100px; } .cell{ float: left; width: 100px; height: 100px; } .black{ background-color: #000; } h2{ text-align: center; } #bt{ display: block; margin:0 auto; margin-top: 20px; } </style>
    </head>
    <body>
       <h2>Score</h2>
       <h2 id="score">0</h2>
        <div id="main">
            <div id="container"></div>
        </div>
        <button id="bt">开始游戏</button>
        <script> var speed = 4; //初始化方块的下降速度 var clock = null; get_id("bt").onclick = function init() { create_row(); var main = get_id("main"); main.onclick = function(element) { judge(element); } clock = window.setInterval("move()", 30); } //判断有没有点到黑块 function judge(element){ if(element.target.className.indexOf("black") == -1) { element.target.parentNode.pass = 0; } else { element.target.className = "cell"; element.target.parentNode.pass = 1; //这一行的黑块已经被点击了 add_score(); } } //添加分数 function add_score() { var newscore = parseInt(get_id("score").innerHTML) + 1; get_id("score").innerHTML = newscore; if(newscore % 10 == 0){ speedup(); } } //获取id function get_id(value) { var id = document.getElementById(value); return id; } //给方块添加类名 function create_cell() { var temp = ["cell","cell","cell","cell"]; var i = Math.floor(Math.random()*4); //产生[0,4)之间的随机数 temp[i] = "cell black"; //不要写成 ["cell black"] return temp; } //创建div元素并添加类名 function create_div(Name) { var div = document.createElement("div"); div.className = Name; return div; } // 创造一个<div class="row">并且有四个子节点<div class="cell"> function create_row() { var row = create_div("row"); var container = get_id("container"); var array = create_cell(); for(var i = 0; i < 4; i++) { row.appendChild(create_div(array[i]));//这里不需要加冒号！！！！1 } if(container.firstChild == null) { container.appendChild(row); } else{ container.insertBefore(row,container.firstChild); } } //删除最后一行 function delete_lastrow() { var container = get_id("container"); if(container.childNodes.length == 6) { container.removeChild(container.lastChild); } } //方块移动函数 function move() { var container = get_id("container"); //var top = parseInt(container.style.top); var top = parseInt(window.getComputedStyle(container, null)['top']); //得到container盒子的top属 if(top + speed > 0){ top = 0; } else{ top += speed; } container.style.top = top + "px"; if(top == 0){ create_row(); container.style.top = "-100px"; delete_lastrow(); } var rows = container.childNodes; if((rows.length == 5) && (rows[rows.length-1].pass !== 1) ){ gameover(); for( var i = 0; i < 5; i++){ container.removeChild(container.lastChild); } get_id("score").innerHTML = 0; } /* 千万不要写成这样！！！！！ var rows = container.childNodes.length; if((rows == 5) && (rows[rows-1].pass !== 1)){ gameover(); } */ } //游戏结束 function gameover() { clearInterval(clock); alert("你的最终得分为：" + get_id("score").innerHTML + "!"); } // 加速函数 function speedup(){ speed += 2; if(speed == 8){ alert('你超神了'); } } </script>
    </body>
    </html>

刚刚学习Js，写的不太好， 若发现bug，希望能够指出，谢谢！

[SouthEast]: /images/20220604/554c73bae0aa48d6811dc7fc66cbbef2.png
[SouthEast 1]: /images/20220604/a4f6358542db43b7876d5d1835d7c77e.png