JS实现别踩白块游戏

Posted 学渣瓜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS实现别踩白块游戏相关的知识,希望对你有一定的参考价值。

最终效果演示:

   

涉及知识点:

  html+CSS+javascript

  元素节点的增删

  属性节点(class)的操作。

实现流程:

 

1. 静态页面布局:

  上中下三部分:①分数;②主界面是4x4的矩形格子;③开始按钮 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>别踩白块Demo</title>
    </head>
    <link  rel="stylesheet" href="css/index.css"/>
    <body>
        <h2>
            <span>score: </span>
            <span id="score">0</span>
        </h2>
        <div id="main">
                <div id="con">
                    <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>
        <div class="btn">
            <button id="start">Start</button>
        </div>        
    </body>
</html>
HTML Code
h2 {
    text-align: center;
}
#main {
    width: 408px;
    height: 408px;
    margin: 0 auto;
    background: white;
    border: 2px solid gray;
    overflow: hidden;
}
#con {
    width: 100%;
    height: 400px;
    position: relative;
    border-collapse:collapse;
    /* top: -100px; */
}
/**/
.row{
    height: 100px;
    width: 100%;
}
/* 一个块 */
.cell{
    height: 100px;
    width: 100px;
    float: left;
    border:rgb(54, 74, 129) 1px solid;
}
/* 黑块 */
.black {
    background: black;
}
/* 开始按钮 */
.btn {
    width: 100%;
    text-align: center;
}
#start {
    margin: 20px auto;
    width: 150px;
    height: 50px;
    border-radius: 10px;
    background: yellowgreen;
    line-height: 50px;
    color: #fff;
}
Final CSS Code

 

 2. 动态的插入黑块白块:

  每次点击黑块,其实是删除了一个 <div class="row"> 然后从上面添加一个新的 <div class="row">

  所以,删除静态页面布局中写的4个<div class="row"> ,使用JS来动态添加

  黑块是使用Math.random()函数生成的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>别踩白块Demo</title>
    </head>
    <link  rel="stylesheet" href="css/index.css"/>
    <body>
        <h2>
            <span>score: </span>
            <span id="score">0</span>
        </h2>
        <div id="main">
            <div id="con"></div>
        </div>
        <div class="btn">
            <button id="start">Start</button>
        </div>        
    </body>
</html>
// ========工具封装:根据id来获取元素
function $(id) {
    return document.getElementById(id);
}
// ========创建div, className是其类名
function creatediv(className) {
    var div = document.createElement(\'div\');
    div.className = className;
    return div;
}
// =========创建一个类名的数组,其中一个为黑块cell black, 其余为白块cell
function creatcell() {
    var temp = [\'cell\', \'cell\', \'cell\', \'cell\', ];
    var i = Math.floor(Math.random() * 4);//随机产生黑块的位置 Math.random()函数参数 0~1的随机数
    temp[i] = \'cell black\';
    return temp;
}
// 创造一个<div class="row">并且有四个子节点<div class="cell">
function createrow() {
    var con = $(\'con\');
    var row = creatediv(\'row\'); //创建div className=row
    var arr = creatcell(); //定义div cell的类名,其中一个为cell black

    con.appendChild(row); // 添加row为con的子节点

    for (var i = 0; i < arr.length; i++) {
        row.appendChild(creatediv(arr[i])); //添加row的子节点 cell
    }
    //从上面添加新的row
    if (con.firstChild == null) {
        con.appendChild(row);
    } else {
        con.insertBefore(row, con.firstChild);
    }
}
Createrow Code   

       

 3. 让黑块下落:

  ①利用top值移动<div id="con">区域,不断改变top值,从而产生下落的效果

var speed=4;  //默认下移速度
//黑块向下移动
function move(e) {
    var con = $(\'con\');
    //获取con的top值
    var top = parseInt(window.getComputedStyle(con, null)[\'top\']);
    if(speed + top > 0){
        top = 0; 
    }else{
        top += speed;
    }       
    con.style.top = top + \'px\';//不断移动top值,使它动起来

    if(top == 0){
        createrow();// 下降结束一行,则在最顶部增加一行,完成下降的连续性
        con.style.top = \'-100px\';//并重新隐藏新加的一行
    }else{
        top += speed;
    }
}
Move Code

        

  ②将展示过后的每一行移除

    从上图可知, <div class="row">越来越多,为了防止其占据内存,并能够保留 row的数量最多为5(能保证移动的连续性),

    那么当rows的length为6时就要删除最后一个row    

function move(e) {
    。。。
    //保留的最多row的数量为5,那么当rows的length为6时就要删除最后一个row
    if($(\'con\').childNodes.length==6){
        $(\'con\').removeChild($(\'con\').lastChild);
    }    
    。。。
}
Update move Code

      ③判断黑块下落有没有触底(通过pass属性),触底则游戏结束

//=========判断黑块触底结束
function over() {
    var rows = $(\'con\').childNodes;
    if ((rows.length == 5) && (rows[rows.length - 1].pass !== 1)) {
        fail();    
    }
    // for(let i = 0; i < rows.length; i++){
    //     if(rows[i].pass1 == 1) {
    //         fail();
    //     }
    // }
}
over Code

4. 点击黑块事件判断输赢:

  点击黑块,让其消失的主要原理不是删除黑块,而是让黑块的颜色变成白色,让玩家以为黑块被删除了 ,其实黑块还在,只是我们“看不见”了,

  当黑块移动到底端时,判断包含黑块的这一行有没有被点击过(通过pass属性)

    点到黑块,让黑块的颜色变成白色,分数+1

    没有点到黑块(点到白块,黑块下移触底),游戏结束

//判断是否为黑块
function  juge(ev){    
    var e = ev ||window.event;
    //点击目标元素,判断类名中是否包含 black
    if(e.target.className.indexOf(\'black\')==-1){
        fail();//点到白块游戏结束
    }else{
        e.target.className=\'cell\'  //让黑块颜色变成白色
        e.target.parentNode.pass=1;//定义属性pass,表明此行row的黑块已经被点击
        AddScore();
    }
}
// 记分,当分数是10 的倍数时加速下移,越来越快
function AddScore() {
    score+=1; 
    $(\'score\').innerHTML = score;
    if (score % 10 == 0) {
        speed+=2;
    }
}
// =========游戏结束
function fail() {
    clearInterval(clock); //清除计时器
    alert(\'Game over!\'+\'\\n\'+\'Final Score:\'+score);
    $(\'score\').innerHTML = 0; //分数清零
    $(\'con\').innerHTML =  ""; 
    start_flag = true;
    $(\'start\').innerHTML = "start";
}

以下是完整代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>别踩白块Demo</title>
    </head>
    <link  rel="stylesheet" href="css/index.css"/>
    <body>
        <h2>
            <span>score: </span>
            <span id="score">0</span>
        </h2>
        <div id="main">
                <div id="con"></div>
            </div>
        <div class="btn">
            <button id="start">Start</button>
        </div>        
    </body>
    <script src="js/index.js"></script>
</html>
HTML Code
h2 {
    text-align: center;
}
#main {
    width: 408px;
    height: 408px;
    margin: 0 auto;
    background: white;
    border: 2px solid gray;
    overflow: hidden;
}
#con {
    width: 100%;
    height: 400px;
    position: relative;
    border-collapse:collapse;
    /* top: -100px; */
}
/**/
.row{
    height: 100px;
    width: 100%;
}
/* 一个块 */
.cell{
    height: 100px;
    width: 100px;
    float: left;
    border:rgb(54, 74, 129) 1px solid;
}
/* 黑块 */
.black {
    background: black;
}
/* 开始暂停按钮 */
.btn {
    width: 100%;
    text-align: center;
}
#start {
    margin: 20px auto;
    width: 150px;
    height: 50px;
    border-radius: 10px;
    background: yellowgreen;
    line-height: 50px;
    color: #fff;
}
CSS Code
// ========工具封装:根据id来获取元素
function $(id) {
    return document.getElementById(id);
}
// ========创建div, className是其类名
function creatediv(className) {
    var div = document.createElement(\'div\');
    div.className = className;
    return div;
}
// =========创建一个类名的数组,其中一个为黑块cell black, 其余为白块cell
function creatcell() {
    var temp = [\'cell\', \'cell\', \'cell\', \'cell\', ];
    var i = Math.floor(Math.random() * 4);//随机产生黑块的位置 Math.random()函数参数 0~1的随机数
    temp[i] = \'cell black\';
    return temp;
}
// 创造一个<div class="row">并且有四个子节点<div class="cell">
function createrow() {
    var con = $(\'con\');
    var row = creatediv(\'row\'); //创建div className=row
    var arr = creatcell(); //定义div cell的类名,其中一个为cell black

    con.appendChild(row); // 添加row为con的子节点

    for (var i = 0; i < arr.length; i++) {
        row.appendChild(creatediv(arr[i])); //添加row的子节点 cell
    }
    //从上面添加新的row
    if (con.firstChild == null) {
        con.appendChild(row);
    } else {
        con.insertBefore(row, con.firstChild);
    }
}
//全局变量
var score=0; //分数初始值0
var speed=4;  //默认下移速度
var clock=null; //定时器
var start_flag = true;//开始按钮的状态

//黑块向下移动
function move(e) {
    var con = $(\'con\');
    //获取con的top值
    var top = parseInt(window.getComputedStyle(con, null)[\'top\']);
    if(speed + top > 0){
        top = 0; 
    }else{
        top += speed;
    }       
    con.style.top = top + \'px\';//不断移动top值,使它动起来
    
    //保留的最多row的数量为5,那么当rows的length为6时就要删除最后一个row
    if($(\'con\').childNodes.length==6){
        $(\'con\').removeChild($(\'con\').lastChild);
    }    
    over();
    
    if(top == 0){
        createrow();// 下降结束一行,则在最顶部增加一行,完成下降的连续性
        con.style.top = \'-100px\';//并重新隐藏新加的一行
    }else{
        top += speed;
    }
}
//=========判断黑块触底结束
function over() {
    var rows = $(\'con\').childNodes;
    if ((rows.length == 5) && (rows[rows.length - 1].pass !== 1)) {
        fail();
    }
    // for(let i = 0; i < rows.length; i++){
    //     if(rows[i].pass1 == 1) {
    //         fail();
    //     }
    // }
}
// =========游戏结束
function fail() {
    clearInterval(clock); //清除计时器
    alert(\'Game over!\'+\'\\n\'+\'Final Score:\'+score);
    $(\'score\').innerHTML = 0; //分数清零
    $(\'con\').innerHTML =  ""; 
    start_flag = true;
    $(\'start\').innerHTML = "start";
}

//判断是否为黑块
function  juge(ev){    
    var e = ev ||window.event;
    //点击目标元素,判断类名中是否包含 black
    if(e.target.className.indexOf(\'black\')==-1){
        fail();//点到白块游戏结束
    }else{
        e.target.className=\'cell\'  //让黑块颜色变成白色
        e.target.parentNode.pass=1;//定义属性pass,表明此行row的黑块已经被点击
        AddScore();
    }
}
// 记分,当分数是10 的倍数时加速下移,越来越快
function AddScore() {
    score+=1; 
    $(\'score\').innerHTML = score;
    if (score % 10 == 0) {
        speed+=2;
    }
}
//开始游戏
$(\'start\').onclick=function(ev){
    if(start_flag){
        score=0;
        speed=4;
        clock=setInterval(\'move()\',50);
        $(\'con\').onclick=function(ev){
            juge(ev);
        }
        $(\'start\').innerHTML = "playing games";
        start_flag = false;
    }    
}
JS Code

 

  

以上是关于JS实现别踩白块游戏的主要内容,如果未能解决你的问题,请参考以下文章

C语言项目实战:《别踩白块游戏》零基础项目,137 行源代码示例

jquery 简单的别踩白块小游戏

别踩白块游戏

C++用EGE简单实现别踩白块游戏

C语言项目:别踩白块游戏(双人版),450行源码分享+详细思路

python 智能玩别踩白块