js实现别踩白块

最新推荐文章于 2021-02-10 01:13:24 发布

shuoxi666

最新推荐文章于 2021-02-10 01:13:24 发布

阅读量283

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/shuoxi666/article/details/103425799

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何利用HTML、CSS和JavaScript技术来创建一款名为'别踩白块'的游戏。主要内容包括HTML布局、CSS样式设计以及JavaScript逻辑实现。

摘要由CSDN通过智能技术生成

文章目录

展示：

在这里插入图片描述

html部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/test4.css">
</head>

<body>
    <div class="wapper">
        <div id="go">
            <a href="#">Game Start</a>
        </div>
        <div id="main"></div>
    </div>
</body>

<script src="../js/my.js"></script>

</html>

css部分：

* {
    margin: 0;
    padding: 0;
    text-decoration:none;
}

.wapper{
    overflow: hidden;
    position: relative;
    width:400px;
    height:600px;
    margin:150px auto;
    border:1px solid black;   
}

.wapper #go{
    width:100%;
    border-bottom: 1px dashed black;
    position: absolute;
    top:0px;
    text-align: center;
    z-index: 100;
}

.wapper #go a{
    font-size:60px;
    color:cyan;
}
.wapper #main{
    position: relative;
    top:-100px;
    width:100%;
    height:100%;
    /* border:1px solid red; */
}
#odiv{
    height:150px;
    width:100%;
}
#idiv{
    float:left;
    height:149px;
    width:99px;
    border-bottom: 1px solid black;
    border-right:1px solid black;
}

javascript部分:

var go = document.getElementById("go");
var main = document.getElementById("main");
var timer, num,
    speed,
    flag;

function init() {
    go.addEventListener("click", function () {
        main.innerHTML = "";
        num = 0;
        speed = 5;
        flag = true;
        go.style.display = "none";
        move();
    });
}

//实现运动  判断游戏结束
function move() {
    clearInterval(timer);
    timer = setInterval(function () {
        main.style.top = main.offsetTop + speed + "px";
        if (main.offsetTop > 0) {   //如果运动区域的top值大于0，就让运动区域的top值等于-150px
            main.style.top = "-150px";
            CDiv();   //调用CDiv函数，创建一个odiv和四个idiv，CDiv中有关于odiv以及idiv的具体解释
            var len = main.childNodes.length;
            if (len > 5) { 
                if (main.childNodes[len - 1].className == "color") {//如果最下面的odiv中含有黑色块，就结束游戏。
                    alert("游戏结束:得分为" + num);
                    clearInterval(timer);
                    go.style.display = "block";
                    flag = false;
                } else {    //否则就删掉最下面的odiv
                    main.removeChild(main.childNodes[len - 1]);
                }
            }
        }
    }, 20);
}

//创建div，插入
function CDiv() {
    var odiv = document.createElement("div");  //创建一个odiv
    odiv.setAttribute("id", "odiv");
    odiv.setAttribute("class", "color");       //给每个odiv加一个标记，记录该odiv是否含有黑色块
    var index = Math.floor(Math.random() * 4);  //产生0~4之间的随机数
    for (var i = 0; i < 4; i++) {
        var idiv = document.createElement("div");   
        idiv.setAttribute("id", "idiv");
        odiv.appendChild(idiv);   //创建四个idiv，并插入到odiv中
        if (i == index) {
            idiv.style.backgroundColor = "black";  //在四个idiv中随机改变其中一个的背景色为黑色
            idiv.addEventListener("click", function () {   //黑色块的点击事件
                if (flag) {
                    this.style.backgroundColor = "#bbb";
                    odiv.removeAttribute("class", "color");
                    num++;
                    if(num%5==0){
                        speed++;
                    }
                }
            })
        } else {
            idiv.addEventListener("click", function () {  //白色块的点击事件
                if (flag) {
                    alert("游戏结束:得分为" + num);
                    clearInterval(timer);
                    go.style.display = "block";
                    flag = false;
                }
            })
        }
    }
    if (main.childNodes.lenth == 0) {   //将odiv插入到main中，如果main中没有子元素，则直接插入即可。如果main中含有子元素，就要将odiv插入到main.childNodes[0]之前
        main.appendChild(odiv);
    } else {
        main.insertBefore(odiv, main.childNodes[0]);
    }
}
init();

shuoxi666

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现别踩白块

文章目录html部分：css部分：javascript部分:html部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
复制链接

扫一扫

专栏目录