JavaScript小游戏——别踩白块

菜鸟自娱自乐时间开始。
没有什么技术难度，就如题目所说“五毛钱”效果的小游戏

写程序还是要先构思好写下大纲然后一步一步去实现，不然真的写着想着改着就很麻烦

整体思路：

初始化填充box（四行，每行有一个小黑正方形，box的初始位置在container的顶部）
让内容动起来（定时setInterval，通过改变box的top属性实现整个box不断下落的效果）
当top为0px时，在box的顶部插入一行（firstChild，insertBefore（new，old)）
当最下边一行滑出底部界面时删除最下边一行（lastElementChild）
点击变白并得分（事件的委托，小方块的点击时间委托到box，ev.target=ev.target||ev.srcElement）
判断失败：①点击到白块，②最下一行row有黑块（点击时为当前行添加自定义属性pass为true，判断最下一行row.pass是否为true即可）失败则清楚定时器
加速（得分时，增加每个时间改变的top值即可）

这个过程中遇到的一点问题就是获得最后一行是否有黑块时涉及到lastChild和lastElementChild的区别

html

    <h1>别踩白块——能踩到50算我输</h1>
    <h1>0</h1>
    <div class="container">
        <div class="box">
        </div>
    </div>

CSS


h1{
    text-align: center;
}
.container{
    width: 400px;
    height: 400px;
    margin: 100px auto;
    border: 1px solid gray;
    overflow: hidden;
}
.box{

    height: 400px;
    width: 400px;
    margin: 0 auto;
    position: relative;
    top:-401px;
}
.row div{
    width: 98px;
    height: 98px;
    border: 1px solid gray;
    float: left;
}
.black{
    background-color: black;
}

var box = document.getElementsByClassName('box')[0];
var speed = 2;
var grade = 0;
var clock = null;
function CreateDiv() {
    var div = document.createElement('div');
    return div;
};
function createRow() {
    var rand = Math.floor(Math.random() * 4);
    var row = CreateDiv();
    row.className = "row";
    row.pass=false;
    for (let index = 0; index < 4; index++) {
        var div = CreateDiv();
        if (index == rand) {
            div.className = "black";
        }
        row.appendChild(div);
    }
    return row;
};
function getStyle(el, attr) {
    return el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el, null)[attr];
};
function gameOver() {
    alert('游戏结束，得分：' + grade + ' 分');
    clearInterval(clock);
}
function move() {
    var top = parseInt(getStyle(box, 'top')) + speed;
    box.style.top = top + 'px';
    if (top >= 0) {
        var last=box.lastElementChild;
        if (last.pass) {
            var row = createRow();
            var firstChild = box.firstChild;
            box.insertBefore(row, firstChild);
            box.style.top = "-100px";
            // 走过的行删掉
            var rowNum = box.children.length;
            if (rowNum > 5) {
                box.removeChild(last);
            }
        } else{
             gameOver();
        }
    }
};
function inti() {
    for (let index = 0; index < 4; index++) {
        var row = createRow();
        box.appendChild(row);
    }  
}
window.onload=function () {
    inti();
    clock = window.setInterval(move, 80);
};
box.onclick = function (event) {
    event.target = event.target || event.srcElement;
    if (event.target.className == "black") {
        event.target.className = "";
        event.target.parentNode.pass=true;
        grade++;
        speed++;
        document.getElementById('h1').innerHTML = grade;
    } else {
        gameOver();
    }
};

虽然没什么技术含量，还是挺考验基本功的。

JavaScript小游戏——别踩白块

猜你喜欢