昨天在课堂上听课，软件工程导论，听着挺无聊-。-，于是乎，打开了VS2018，敲起了代码，写写封装，写着写着，突发奇想改良成了游戏，模拟了一个类似 “别踩白块儿” 的益智小游戏，我取名为 “别踩黑块” ，哈哈哈，代码随意发挥，既清奇又不整洁，只建议学习其中逻辑原理，不建议当作学习版本。（大佬看我代码估计要喷死我-。-）

---

在线地址：https://ebuxsf.coding.io/black

主要部分代码：

<div class="bigBox">
    <div class="box"></div>
    <div class="head">
        <h4 class="box2">分数：0</h4>
        <h4 class="box3">倒计时：</h4>
    </div>
    <h4 class="box5"></h4>
    <button class="box4">开始游戏</button>
</div>

<div class="btn">
    <h1>别踩黑块 游戏</h1>
</div>
<script>
    
    // Math.ceil(Math.random()*9) //随机九位数

    window.onload = function(){
        inHtml()
    }

    var jiannum = 20 //倒计时
    var resNum = 10 //加分值
    
    var spe3 = "boxAmin3"
    var spe2 = "boxAmin2"
    var spe1 = "boxAmin1"
    
    function spe(oclass){
        var spe = oclass
        return spe
    }
    
    var speNs = 0
    
    var box6 = document.querySelector('.box6')
    var box7 = document.querySelector('.box7')
    var box8 = document.querySelector('.box8')
    
    box6.onclick = function(){
        speNs = 1
        alert('你选择了简单系数，点击开始游戏')
    }
    box7.onclick = function(){
        speNs = 2
        alert('你选择了中等系数，点击开始游戏')
    }
    box8.onclick = function(){
        speNs = 3
        alert('你选择了困难系数，点击开始游戏')
    }
    
    function inHtml() {
                    
        var box = document.querySelector('.box')
        var box3 = document.querySelector('.box3')
        var box4 = document.querySelector('.box4')
        
        var boxs = 1000 //盒子数量
        var boxHtml = ''
        for (var i = 0; i < boxs; i++) {
            boxHtml = boxHtml + '<div class="odd bothBox' + Math.ceil(Math.random()*9) + '"></div>'
        }
        box.innerHTML += boxHtml
        box3.innerHTML = '倒计时：' + jiannum
        box4.addEventListener('click',Game,true)
    }


    function Game() {
        
        var box = document.querySelector('.box')
        var box2 = document.querySelector('.box2')
        var box3 = document.querySelector('.box3')
        var box4 = document.querySelector('.box4')
        var box5 = document.querySelector('.box5')
        
        var jishuIndex = document.querySelectorAll('.odd');
        var jiafenNum = 0;
        
        if(speNs == 0){
            var speNum = spe(spe1)
        }else if(speNs == 1){
            var speNum = spe(spe1)
        }else if(speNs == 2){
            var speNum = spe(spe2)
        }else if(speNs == 3){
            var speNum = spe(spe3)
        }
        
        box4.removeEventListener('click',Game,false)
        box4.style.bottom = '-40px'
        box2.innerHTML = '分数：' + jiafenNum
        box.classList.add(speNum);
        
        for (var i = 0; i < jishuIndex.length; i++) {
            jishuIndex[i].index = i
            jishuIndex[i].addEventListener('click',function(){
                if (this.index % 2 == 1) {
                    jishuIndex[this.index].classList.add("boxActives");
                    box5.innerHTML = '-10'
                    box5.classList.add("box5Amin");
                    setTimeout(function () {
                        box5.classList.remove("box5Amin");
                        jiafenNum = jiafenNum - resNum;
                        box2.innerHTML = '分数：' + jiafenNum
                        if (jiafenNum < 0) {
                            jiafenNum = 0;
                            box2.innerHTML = '分数：' + jiafenNum
                        }
                    },200)
                } else {
                    setTimeout(function () {
                        box5.classList.remove("box5Amin");
                    },200)
                    jishuIndex[this.index].classList.add("boxActive");
                    box5.innerHTML = '+10'
                    box5.classList.add("box5Amin");
                    jiafenNum = jiafenNum + resNum;
                    box2.innerHTML = '分数：' + jiafenNum
                }
            },false)
            
            if (jishuIndex[i].index % 2 == 1) {
                jishuIndex[i].classList.add("demo1");
            }else {
                jishuIndex[i].classList.add("demo2");
            }

        }
        

        function timer() {
            jiannum--;
            box3.innerHTML = '倒计时：' + jiannum
        }

        var timerss = setInterval(function () {
            timer()
            if (jiannum == 0) {
                alert('游戏结束，你的分数为：' + jiafenNum + '分')
                jiannum = resNum;
                jiafenNum = 0;
                box2.innerHTML = '分数：' + jiafenNum
                inHtml()
                startNum = 0
                clearInterval(timerss)
                var box = document.querySelector('.box')
                box.classList.remove(speNum);
                box4.style.bottom = '20px'
            }
        }, 1000)

    }

</script>