【Html+Css+Js】实现【不要踩“粉”块】小游戏_用js制作小游戏,玩家通过键盘,别踩红块-优快云博客

本文链接：https://blog.youkuaiyun.com/AI__NB/article/details/122240586

本文记录了一位前端学习者制作‘别踩粉块’小游戏的过程，主要涉及DOM元素创建、事件绑定及定时器应用。通过创建div元素动态生成游戏板，并设置点击事件判断玩家是否踩到‘粉块’。游戏开始后，内容在视口中滚动，当触底或踩到‘粉块’时游戏结束。代码中包含了详细注释，便于理解和学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【Html+Css+Js】实现【不要踩“粉”块】小游戏

近期也是在学习前端过程中，无意中发现了一款叫做【别踩白块】的小游戏好像挺有趣，就想着去试着去做一做看看，这一做就是好几天，我这里是粉块嘿嘿，哈哈后来出了点低级问题，单词拼错了啊哈哈，废话不说了，先上效果图给大家看看哈。
在这里插入图片描述
这里主要是对于Dom创建元素和事件的函数创建与绑定，同时用到了定时器。
思路是来源于实验楼哈，有进行删改，整体就是一个视口和一个内容，内容在视口中滚动的一个过程。
具体可以用一个图表示（来自实验楼）：
在这里插入图片描述

然后代码附上：

【Html】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>别踩白块</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="main">
        <p>实际得分</p>
        <p id="score">0</p>
        <div id="view">
            <div id="contain">
            <!--这里的以下被注释的代码，也就是后面js创建出来的row和box，这里仅供理解参看，大概是这种结构，静态页面也可以就这么写。>
                <!-- <div class="row">
                    <div class="black box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                </div>
                <div class="row">
                    <div class="box"></div>
                    <div class="black box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                </div>
                <div class="row">
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="black box"></div>
                    <div class="box"></div>
                </div>
                <div class="row">
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="black box"></div>
                </div> -->
            </div>
    

        </div>
        
        <input type="button" class="btn" onclick="start()" value="开始游戏"> 
    </div>

    <script src="./index.js"></script>
</body>
</html>

【Css】

html{
    background-color:coral
}
#main{
    width: 600px;
    height: 600px;
    background-color: aquamarine;
    margin: 0 auto;
    border: 1px black solid ;
}
p{
    text-align: center;
    background-color: aquamarine;
}
.btn{
    width: 100px;
    height: 40px;
    margin-top: 30px;
    margin-left: 250px;
    background-color: lightgreen;
    /* 边框美化 */
    border-radius: 10%;
}
/* .row{
    height: 100px;
    width: 100%;
} */
.box{
    width: 100px;
    height: 100px;
    border: 1px black solid;
    float: left;
}

#view{
    width: 408px;
    height: 408px;
    margin: 0 auto;
    background-color:antiquewhite;
    border: 1px solid black;
    overflow: hidden;
}
#contain{
    width: 408px;
    height: 408px;
    background-color: pink;
    margin: 0 auto;
    position: relative;
    top: -408px;
    border-collapse: collapse;
}

.black{
    background-color: black;
}

【Js】

var clock = null;
var state = 0;
var speed = 6;
var flag = false;


// 获取元素工具封装
// 根据id元素来获取元素
function $(id){
    return document.getElementById(id);
}

// 创建div ，class是其类名
function createDiv(className){
    var  div = document.createElement("div");
    div.className = className;
    return div;
}

// 创造一个<div class="row"> ,并且有四个子节点<div class = "box">
function createRow(){
    var con = $("contain");
    var row = createDiv("row"); 
    var arr = createBox();

    con.appendChild(row);

    for(var i = 0;i < 4; i++){
        row.appendChild(createDiv(arr[i]));
    }

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

} 
// 创建一个类名的数组,一个为black box ,其他为box.
function createBox(){
    var temparr = ['box','box','box','box'];
    var i = Math.floor(Math.random()*4);//随机产生黑块的位置
    // Math.random()函数 0-1的随机数
    temparr[i] = 'box black';
    return temparr;
}





// 点击按钮，开始游戏
function start(){
    if(!flag){
        init();
    }else{
        alert("游戏已经开始了！");
    }
}

// 游戏初始化
function init(){
    flag=true;
    for(var i = 0;i<4;i++){
        createRow();
    }

    // 添加onclick事件
    $("view").onclick = function (ev){
        ev = ev || event;
        judge(ev);
    };

    // 定时器
    clock = window.setInterval('move()',30);
}

// 让所有box动起来
function move(){
    var con = $("contain");
    var top = parseInt(window.getComputedStyle(con,null)["top"]);
    // console.log(top);//查看top的值变换
    if(speed + top > 0){
        top = 0;
    }else{
        top = top + speed;
    }
    con.style.top = top + "px";
    over();


    if(top ==0){
        createRow();
        con.style.top = "-102px";
        delRow();
    }
}

// 删除某行
function delRow(){
    var con = $("contain");
    if(con.childNodes.length == 6){
        con.removeChild(con.lastChild);
    }
}

// 判断是否点击黑块,白块
function judge(ev) {
    if(ev.target.className.indexOf("black") == -1 &&
       ev.target.className.indexOf("box") !== -1){
           ev.target.parentNode.pass1 = 1;//点击白块
       }

    if(ev.target.className.indexOf("black") !== -1){
           ev.target.className = "box";
           ev.target.parentNode.pass = 1;//点击黑块
           score();
        }
}
// 判断游戏是否结
function over(){
    var con = $("contain");
    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);
    flag = false;
    confirm("你的最终得分是" + parseInt($('score').innerHTML));
    var con = $("contain");
    con.innerHTML = "";
    $("score").innerHTML = 0;
    con.style.top = "-408px";
}


// 加速函数
function speedUp(){
    speed += 2;
    if(speed == 20){
        alert("你超神了");
    }
}

// 分数
function score(){
    var newscore = parseInt($("score").innerHTML) + 1;
    $("score").innerHTML = newscore;

    if(newscore % 10 == 0){
        speedUp();
    }
}