别踩白块简单实现

朴灿烈づ我的快乐病毒、 2022-05-10 03:52 178阅读 0赞

*  刚开始学习javascript,想找个小项目练练手，所以就写了一个简单的别踩白块网页版小游戏，不是很复杂，但是刚开始的时候还是觉得无从下手，写这篇文章以防我自己以后忘了
 *  到底还如何做呢？  
    1、 四行div，每行div有四小div并排，每四个必有一个黑块  
    2、使用定时器控制div向下移动  
    3、添加onclick事件判断黑块是否被点击  
    4、设置死亡条件和分数  
    html代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>别踩白块</title>
        <link rel="stylesheet" type="text/css" href="whiteblock.css">
    </head>
    <body>
    <h2 id="sco1">score</h2>
    <h2 id="sco">0</h2>
    <div id="main"><div id="con"></div></div>/*main为游戏区，con为白块黑块区，白块黑块的div在js代码中生成*/
    <button id="bt">开始游戏</button>
    </body>
    <script src="whiteblock.js"></script>
    </html>

css布局

*{
        margin: 0px;
        padding: 0px;
    }
    h2{
        text-align: center;
    }
    #sco1{
        margin-top: 100px;
    }
    #main{
        width: 400px;
        height: 400px;
        margin-left: auto;
        margin-top: 50px;
        margin-right: auto;
        position: relative;
        border: 1px solid gray;
        overflow: hidden;
    }
    #con{
        width: 100%;
        /*border: 1px solid #87f71e;*/
        height: 400px;
        position: relative;
        top: -100px;/*为了让白块从第二层开始，从最后一层还玩不玩了*/
    }
    .rows{
        width: 100%;
        height: 100px;
    
    }
    .cell{
        width: 100px;
        height: 100px;
        float: left;
        background-color: white;
        /*border: 1px solid #fb0d1b;*/
    }
    .black{
        width: 100px;
        height: 100px;
        background-color: black;
        /*border: 1px solid #fbfa07;*/
        float: left;
    }
    #bt{
        /*position: absolute;*/
        /*left:400px;*/
        /*top:300px;*/
        /*z-index: 1;*/
        margin-left: 730px;
        margin-top: 20px;
        height: 30px;
        width: 60px;
    }

javascript代码

var speed=2;
        var clock=null;
        function createRows() {//创建一行白块（当然其中有个黑块）
        var content=$("con");
        var row=createDiv("rows");
        
        var cells=getCell();//得到黑块和白块的class值
        for(var i=0;i<4;i++)
        {
            row.appendChild(createDiv(cells[i]));
        }
        if(content.firstChild==null)
        {
            content.appendChild(row);
        }
        else
        {
            content.insertBefore(row,content.firstChild);
        }
    }
    function getCell() {//返回一行的块的class
        var cCell=["cell","cell","cell","cell",];
        var cellIndex=Math.floor(Math.random()*4);随机生成黑块位置
        cCell[cellIndex]="black";
        return cCell;
    }
    function createDiv(className) {//创建一个白块
        var cdiv=document.createElement("div");
        cdiv.className=className;
        return cdiv;
    }
    function $(Element) {//为了方便，把通过id查找元素的方法拿了出来
        return  document.getElementById(Element);
    }
    function cclick(ev) {//点击函数
        // console.log(ev.target.className);
        if(ev.target.className.indexOf("black")!==-1)//点到黑块
        {
            ev.target.className="cell";
            ev.target.parentNode.pass=1;
            cscore();
        }
        else {//点到白块
            die();
        }
    }
    function delet() {//删除一行
        var content=$("con");
        if(content.childNodes.length==6)
        {
            content.removeChild(content.lastChild);
        }
    }
    function move() {//下移
        var content = $("con");
        var top = parseInt(window.getComputedStyle(content, null)["top"]);
    
        if (top + speed > 0) {
            top = 0;
        }
        else {
            top += speed;
        }
        // console.log(top);
        content.style.top = top + "px";
        //
        console.log(content.childNodes.length)
        if (top == 0) {
            createRows();
            content.style.top = '-100px';
            delet();
        }
    
        else if(top==(-100+speed))
        {
            var roww=content.childNodes;
            console.log(roww[roww.length-1].pass);
            if(roww.length==5&&roww[roww.length-1].pass!==1)
            {
                die();
            }
        }
    }
    function  die() {
        clearInterval(clock);
        alert("游戏结束，得分："+parseInt($("sco").innerHTML));
    
    }
    function cscore() {
        var score=$("sco");
        var newscore=parseInt(score.innerHTML)+1;
        score.innerHTML=newscore;
        if(newscore%10==0)
        {
            speedadd();
        }
    
    }
    function speedadd() {
        speed+=2;
    }
    function init() {
    
        for(var i=0;i<4;i++)
        {
            createRows();
        }
        $("main").onclick=function (ev) {
            cclick(ev);
        };
        clock=window.setInterval("move()",30);
    
    }
    init();
    $("bt").onclick=function(ev)
    {
        location.replace(location);
    }

![在这里插入图片描述][70]

[70]: /images/20220510/3bb217221cfb40b2a47b08db091eb2ae.png

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js实现别踩白块

1. 实现效果 ![在这里插入图片描述][20190828215259721.gif_pic_center] 2. 知识点总结 1. 最后一行元素的移除时 ...

向右看齐/ 2024年04月17日 16:53/ 0 赞/ 53 阅读

相关原生js写简易别踩白块儿

简易别踩白块儿 > 注意事项：① 在一个元素未生成前不可对其添加事件 > ② 当数组中有元素为空时：即`""`，将其转换成字符串时，该字符串中只有不为空的元素。 ...

快来打我*/ 2024年04月17日 06:26/ 0 赞/ 57 阅读

相关【微信小程序】别踩白块源码免费分享

微信小程序“别踩白块”源码分享一、项目目录框架及配置 1.文件框架（1）pages文件夹：（2）app.

桃扇骨/ 2023年01月17日 03:14/ 0 赞/ 182 阅读

相关别踩白块的两种模式

本节主要讲解别踩白块，游戏采用的方法较为简单，主要学习C\中如何创建动态数组，来存放相应的空间，游戏分为两个模式，模式一通过点击来实现移动，模式二（也就是常见的模式）方块移动，

刺骨的言语ヽ痛彻心扉/ 2022年07月18日 01:23/ 0 赞/ 159 阅读

相关 Javascript实现别踩白块儿（钢琴块儿）小游戏

游戏唯一的一个规则，我们只需要不断踩着黑色方块前进即可，这里根据方向键来踩白块在规定时间内，每走一次分数加100 -------------------- ![这里写图

叁歲伎倆/ 2022年06月12日 09:11/ 0 赞/ 225 阅读

相关别踩白块-用H5中的Canvas和JavaScript实现。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t

川长思鸟来/ 2022年06月09日 04:38/ 0 赞/ 185 阅读

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

游戏思路 1. 先创建一个正方形，将其分成16块部分代码如下： div{ margin: 0 auto;

古城微笑少年丶/ 2022年06月04日 05:26/ 0 赞/ 352 阅读

相关别踩白块简单实现

刚开始学习javascript,想找个小项目练练手，所以就写了一个简单的别踩白块网页版小游戏，不是很复杂，但是刚开始的时候还是觉得无从下手，写这篇文章以防我自己以后忘了

朴灿烈づ我的快乐病毒、/ 2022年05月10日 03:52/ 0 赞/ 179 阅读

相关毕设作品：基于机器视觉的游戏辅助设计--别踩白块外挂设计（2）

好久没有跟新了,之前有网友在催我,怎么还不跟新之前比较忙,没怎么有空写这些,今天整理一下吧. 先附上我的毕设论文word ,和答辩ppt,还有源代码毕业论文: [ht

左手的ㄟ右手/ 2022年03月27日 10:54/ 0 赞/ 244 阅读

相关 C++实现别踩白块儿（双人版）

![Center][] ![Center 1][] 部分代码 // 游戏状态常量 enum STATUS{BEGIN, // 游戏开始

妖狐艹你老母/ 2021年09月22日 07:16/ 0 赞/ 310 阅读