别踩白块简单实现_stm32别踩白块csdn-CSDN博客

本文链接：https://blog.csdn.net/qq_41335337/article/details/82840920

刚开始学习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);
}

在这里插入图片描述