网页版别踩白块游戏

0x584a 发布于2019-08-29 16:43 / 2080人阅读

摘要：别踩白块白块黑块游戏初始化根据前面的部分我们可以知道，每个就代表一个白块，就代表一个黑块，每点击一个黑块消失其实是删除了一个，然后从上面添加一个新的。所以我们首先要通过来控制的创造和生成记得删除在编写静态页面时候指定生成的个。

自己最近一直想做个小项目，但是自己代码水平太烂了，做不了大系统，索性利用毕生所学写个小游戏，哈哈哈
别踩白块这个游戏相信很多人都在手机上玩过，今天我们就来做一个网页版的，先上一张游戏效果图：

不同于移动端采用手指触碰，网页版需要我们用鼠标点击黑块，黑块才会消失。刷新页面即可以开始游戏，这个小游戏最重要的部分代码，初学者也能很快看懂。YES~

在开始之前，让我们简单分析下整个游戏的流程：一定的速度下移，点击黑块，黑块消失，新的黑块在普通游戏玩家眼中，应该是游戏开始，黑块以块不断向下移动，若黑块触底则游戏结束；而以我们来说，可以将每一个黑块和白块抽象成一个个的数据结构，黑块的消失和出现其实就是数据结构的创造和销毁，我们来看一张游戏的流程图，对于要编写的功能有一个大概的了解:

页面布局

可以用 div+css 布局来实现别踩白块的静态效果展示，直接上 HTML 代码，我来简要说下 HTML 思路，将主界面分解成一个4×4的大矩形格子，每一个方块代表其中一个小的矩形格，其中每一行的四个白块中有一个黑块，每一行中黑块位于那一列是随机生成的，但是我们这里现在是静态页面就自己确定了，然后通过 css 控制样式。

游戏初始化

根据前面的 HTML 部分我们可以知道，每个

就代表一个白块，

就代表一个黑块，每点击一个黑块消失其实是删除了一个

，然后从上面添加一个新的

。所以我们首先要通过 js 来控制

的创造和生成（记得删除在编写静态页面时候指定生成的4个 div.row）。具体方法如下：

//创建div, 参数className是其类名
    function creatediv(className){
        var div = document.createElement("div");
        div.className = className;
        return div;
    }

    // 创造一个并且有四个子节点
    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 < 4; i++){
            row.appendChild(creatediv(arr[i])); //添加row的子节点 cell
        }

        if(con.firstChild == null){
            con.appendChild(row);
        }else{
            con.insertBefore(row, con.firstChild);
        }
    }

    //删除div#con的子节点中最后那个    
    function delrow(){
            var con = $("con");
            if(con.childNodes.length == 6) {
                   con.removeChild(con.lastChild);
               }
        }    

    //创建一个类名的数组，其中一个为cell black, 其余为cell
    function creatcell(){
        var temp = ["cell", "cell", "cell", "cell",];
        var i = Math.floor(Math.random()*4);//随机生成黑块的位置
        temp[i] = "cell black";
        return temp;
    }

让黑块动起来

在可以通过 js 来创造和销毁 div 后，我们就要让黑块动起来，这个时候我们就用到了之前css提到的设定

隐藏了一行的

，我们通过 js 的 DOM 操作使其向下方移动，并设置定时器每30毫秒移动一次，这样就实现了黑块的平滑移动，在黑块移动的同时，我们要判断黑块是否已经触底，触底则游戏失败，停止调用 move()，触底后调用函数 fail() 游戏失败，具体方法如下：

//使黑块向下移动    
    function move(){
        var con = $("con");
        var top = parseInt(window.getComputedStyle(con, null)["top"]);

        if(speed + top > 0){
            top = 0;
        }else{
            top += speed;
        }            
        con.style.top = top + "px";

        if(top == 0){
            createrow();
            con.style.top = "-100px";
            delrow();
        }else if(top == (-100 + speed)){
            var rows = con.childNodes;
            if((rows.length == 5) && (rows[rows.length-1].pass !== 1) ){
                fail();
            }
        }
    }

    function fail(){
            clearInterval(clock);
            confirm("你的最终得分为 " + parseInt($("score").innerHTML) );
        }
点击黑块事件

让黑块动起来之后呢，就要考虑用户有没有点击到黑块，用户若点击到黑块我们要让所在那一行消失，那么就需要一个 judge 方法，具体如下：

//判断用户是否点击到了黑块，
function judge(ev){
    if (ev.target.className.indexOf("black") != -1) {
        ev.target.className = "cell";
        ev.target.parentNode.pass = 1; //定义属性pass，表明此行row的黑块已经被点击
        score();
    }
}

这一步，几个核心的功能点都已经实现了，剩下来的就是将这些方法组合起来，组成完整的逻辑关系。

完整代码




    
    别踩白块
    



    score
    0

祝大家早日富可敌国，bye~

云服务器 GPU云服务器踩白块别踩白块版别别踩白

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113937.html

网页版别踩白块游戏

摘要：别踩白块白块黑块游戏初始化根据前面的部分我们可以知道，每个就代表一个白块，就代表一个黑块，每点击一个黑块消失其实是删除了一个，然后从上面添加一个新的。所以我们首先要通过来控制的创造和生成记得删除在编写静态页面时候指定生成的个。自己最近一直想做个小项目，但是自己代码水平太烂了，做不了大系统，索性利用毕生所学写个小游戏，哈哈哈别踩白块这个游戏相信很多人都在手机上玩过，今天我们就来做一个网...

fobnn 2019-08-02 16:05 评论0 收藏0
网页版别踩白块游戏

摘要：别踩白块白块黑块游戏初始化根据前面的部分我们可以知道，每个就代表一个白块，就代表一个黑块，每点击一个黑块消失其实是删除了一个，然后从上面添加一个新的。所以我们首先要通过来控制的创造和生成记得删除在编写静态页面时候指定生成的个。自己最近一直想做个小项目，但是自己代码水平太烂了，做不了大系统，索性利用毕生所学写个小游戏，哈哈哈别踩白块这个游戏相信很多人都在手机上玩过，今天我们就来做一个网...

focusj 2019-08-23 11:56 评论0 收藏0
Python游戏开发，pyautogui模块，Python自动玩“别再踩白块了“小游戏

摘要：前言利用自动玩别再踩白块了这个小游戏，让我们愉快地开始吧开发工具版本相关模块模块模块模块模块以及一些自带的模块。环境搭建安装并添加到环境变量，安装需要的相关模块即可。 ...

youkede 2021-09-04 16:45 评论0 收藏0
手摸手带你实现小游戏<别踩白块儿 -- 内有游戏链接>

摘要：别踩白块儿使用白鹭引擎编写的游戏游戏地址准备工作了解白鹭引擎并安装编写工具安装游戏引擎安装创建项目创建项目可以选择不同版本的引擎，创建成功之后还可以查看，对发布进行设置。别踩白块儿使用（白鹭引擎）Egret编写的游戏 showImg(https://user-gold-cdn.xitu.io/2018/10/26/166af8033a59fdbf?w=500&h=840&f=gif...

zhoutk 2019-08-02 11:50 评论0 收藏0