JS实现简单的别踩白块游戏

2018-03-14

界面未作优化只实现了基本功能随机生成黑快点击分数加成错点以及触底死亡难度选择等

玩家信息

设置开始/暂停等级选择以及分数统计

<div class="playerInformation">
        <h2>玩家信息 </h2>
        <button id="Btn1">开始</button>
        <button id="Btn2">暂停</button>
        <select name="" id="selectBtn">
        <option value="5"  class="rank">简单</option>
        <option value="10" class="rank">一般</option>
        <option value="20" class="rank">困难</option>
    </select>
</div>

用户操作

startBtn.onclick = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            move(speed);
            }
}
        
stopBtn.onclick = function () {// 暂停
            clearInterval(timer);
 }
       
Select.onchange = function () { // 选择等级
            h = -100; //初始化
            speed = parseInt(this.value); //改变速度
}

移动函数

总共五列，初始位置offsetTop=-100px,然后按照设置的速度向下移动。移动的时候 h=0时瞬间把它变成-100 然后慢慢+speed 直到h=0 如此循环

function move(speed) {
    // 下移动一格 offsetTop变成0之后，将原本的最后一个节点插到第一个节点处
    playerClick();
    if (h == 0) {
 Content.insertBefore(Content.children[5], Content.children[0]);
        for (i = 0; i < 4; i++) {
        Content.children[0].children[i].style.background = "";
        Content.children[0].children[i].isBlack = 0;
        }
    }
    h == 0 ? h = -100 : h += speed; //这句是关键。移动的时候 h=0时瞬间把它变成-100  然后慢慢+speed 直到h=0 如此循环
    Content.style.top = h + 'px';

    if (h == -100) {
        // 黑块触底死亡
        for (var i = 0; i < 4; i++) {
            if (Content.children[5].children[i].isBlack) {
                clearInterval(timer);
                alert('死了');
            }
        }
        creatBlack();
    }

}

生成黑块函数

在第一行的四个格子中随机生成一个黑块

function creatBlack() {
    var blackOne = Content.children[0].children[parseInt(Math.random() * 4)]; //随机生成黑块
    blackOne.style.background = "black";
    blackOne.isBlack = 1;
}

用户操作

function playerClick() {
     for (i = 0; i < adot.length; i++) {
         adot[i].index = i;
         adot[i].onclick = function () {
          if (this.isBlack == 1) {
              this.style.background = "#B0E0E6";
               scoreNum += 10;
            Score.innerHTML = "你的得分为：" + scoreNum + "分";
              this.isBlack = 0;} 
              else {
                    this.isBlack = 0;
                    scoreNum = 0;
                    alert("死了")
                    }
            }
        }
}

效果截图

在这个小案例中。要选择contentde 下第一列元素时，忽略了DOM 中的文本节点，使用obj.fistChild()选择，结果错误，因为html中的转行符号占了一个空的文本节点。后来改用obj.children[0]解决了。