原生js写简易别踩白块儿

快来打我* 2024-04-17 06:26 26阅读 0赞

###### 简易别踩白块儿 ######

> 注意事项：① 在一个元素未生成前不可对其添加事件  
> ② 当数组中有元素为空时：即`""`，将其转换成字符串时，该字符串中只有不为空的元素。

###### 效果图 ######

![在这里插入图片描述][20190826221737863.gif]

> 步骤：  
> ① 分别为最初始的九个瓷片添加点击事件。若用户点击非黑色瓷片，则点击瓷片的背景变为红色，清除计时器，提示用户游戏结束，用户可选择重新开始游戏（该提示内容在未清除计时器前透明度为0，且z-index较低。当计时器被清除时，该提示内容透明度为1，且z-index变大）。  
> ② 完成基础的无限加载瓷片：每隔一段时间改变一次整体的`margin-top`值（利用定时器来实现）。当整体对象的offsetTop>对象的本身的高度-offset，其中offset为自定义值时，创建3个瓷片（可不一定为3）。在创建时并为每个瓷片添加点击事件。  
> ③ 完成一行中随机一个瓷片的背景为黑色，即可正确点击瓷片。（`getRandomColor()`方法，该方法的基本思想是：生成1~3任意一个整数，若为1，则将某一行的第一个瓷片的背景变为黑色，其余同理。在该方法中，1代表背景为黑色，0代表无背景色）  
> ④ 在①中，若用户选择重新开始游戏，则瓷片的数量变为初始值，即9。黑瓷片重新随机生成。  
> ⑤ 在`margin-top`改变过程中，移动速度会随着其绝对值的增大而增大：当新的`offsetTop>oldOffsetTop+1000`时，改变`oldOffsetTop`为当前`offsetTop`,并将速度适当增大。  
> ⑥ 当某一个用户未点击的黑瓷片移动到不可见区域时，也自动判断为游戏结束：在随机生成瓷片颜色时，将每个瓷片的颜色记录到`color`数组中。在移动过程，`Math.ceil(当前offsetTop绝对值/每个瓷片的高)*3(3为一行的瓷片个数)`为遍历的临界条件，若遍历`color`数组未发现为1的元素，则游戏继续，若有，则游戏结束。在此处，可加一个延迟判断，否则在一个瓷片还未移动到不可见区域，该判断就执行，这样是不可取的  
> ⑦ 用户不可跨越点击黑色瓷片：可判断当前点击瓷片以前的所有瓷片是否还有黑色瓷片，若没有则可点击，若有，则不可点击。

###### 完整代码 ######

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style> *{ box-sizing: border-box; margin: 0; padding: 0; } .all{ width: 216px; height:auto; margin: auto; /*border: 1px solid silver;*/ font-size: 0; } .all>div{ position: relative; height: 200px; width: 70px; display: inline-block; border: 1px solid silver; text-align:center; line-height: 200px; font-size: 20px; color: white; } .meng{ z-index:-1; opacity: 0; display: flex; justify-content: center; align-items: center; position: absolute; top:0; left: 0; width: 100%; background: rgba(0,0,0,0.5); height: 420px; } .meng>div{ border: 1px solid silver; background: rgba(255,255,255,.9); height: 200px; width: 300px; display: flex; flex-direction: column; justify-content: center; align-items:center; } .all>div>span{ position: absolute; left: 0; right: 0; margin: auto; } .button{ margin-top:25px; } .button button{ width: 90px; margin-right: 10px; } .tran{ transition: margin-top .5s linear; } </style>
    <body>
    <div class="all tran">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    </div>
    <div class="meng">
        <div>
            <span>游戏结束啦！</span>
            <div class="button">
                <button class="confirm">确定</button>
                <button class="again">再来一次！</button>
            </div>
        </div>
    </div>
    </body>
    <script> var all = document.getElementsByClassName("all")[0]; var confirm = document.getElementsByClassName("confirm")[0]; var again = document.getElementsByClassName("again")[0]; var meng = document.getElementsByClassName("meng")[0]; var speed=1; var column = 3; var moduleWidth = 70; var moduleHeight = 200; var offset = 1000; all.style.marginTop=0; var color = []; var beConfirm = false; var beginArray = all.innerHTML; var oldOffsetTop=0; var allHeight = document.documentElement.clientHeight; meng.style.height = allHeight+"px"; console.log(meng.style.height) getRandomColor(0); var begin = document.getElementsByClassName("begin")[0];//必须在begin创建后才能获取到 var timer ; var time = 400; confirm.onclick = function () { beConfirm=true; meng.style.opacity = 0; meng.style.zIndex=-1; }; again.onclick = function () { oldOffsetTop=0; speed=1; all.className="all"; meng.style.opacity = 0; meng.style.zIndex=-1; all.innerHTML = beginArray; all.style.marginTop=0; color=[]; getRandomColor(0); setBeginChildrenClick(); }; function getRandomColor(start) { var divLength = all.children.length; for(var i= start;i<divLength;i++){ //一行中的三个任意之一为1，为1的元素的背景色为黑色 var randomChoose = Math.ceil(Math.random()*3); color[randomChoose+i-1] = 1; if(i==0){ var span = document.createElement("span"); span.className="begin"; span.innerHTML="开始"; span.onclick=function (ev) { timer = getTimer() } all.children[randomChoose+i-1].appendChild(span); } if(i<(divLength-3)){ i=(randomChoose+i-1)+(column-(randomChoose+i-1)%column)-1 }else{ break; } } for(var i=0;i<divLength;i++){ if(color[i]==1){ all.children[i].style.background = "black" }else{ color[i]=0; } } } function failFun(that){ clearInterval(timer); if(that){ that.style.background="red"; }else{ for(var i=0;i<color.length;i++){ if(color[i]==1){ all.children[i].style.background="red"; break; } } } setTimeout(function () { if(that){ that.style.background=""; }else{ all.children[i].style.background="" } meng.style.zIndex = 10; meng.style.opacity = 1; },500); } function moduleClick(e) { var that = e; if(that.style.background=="" || that.style.background=="red"){ failFun(that); }else { if(that.index==0 || color.slice(0,that.index).join("").indexOf("1")==-1){ that.style.background="rgba(100,100,100,.4)"; for(var i=0;i<color.length;i++){ if(i==that.index){ color[i] = 0; break; } } } } } function getAllHeight(){ //得到当前的all的高 for(var i=0;i<all.children.length;i++){ var num = Math.ceil(all.children.length/column); return num*moduleHeight+"px" } } function getTimer() { var timer = setInterval(function () { var overColumn = Math.ceil(Math.abs(all.offsetTop)/moduleHeight); var moduleNumber = overColumn*column; setTimeout(function () { //延迟400ms执行 比下一次执行该方法早100ms，将时间错开 for(var k = 0;k<moduleNumber;k++){ if(color[k]==1){ clearInterval(timer); failFun(""); break; } } },time); all.className="all tran"; if(Math.abs(all.offsetTop)>Math.abs(oldOffsetTop)+1000){ speed +=0.1; time = 400-(speed-1)*10; oldOffsetTop = all.offsetTop; } all.style.marginTop =parseInt(all.style.marginTop)-100*speed+"px"; var allHeight = getAllHeight(); if(Math.abs(all.offsetTop)> parseInt(allHeight)-offset){ var start = all.children.length; for(var j=0;j<3;j++){ var divEle = document.createElement("div"); divEle.index = all.children.length; divEle.onclick = function () { if(!beConfirm){ moduleClick(this) } }; all.appendChild(divEle); } getRandomColor(start); } },400); return timer; } function setBeginChildrenClick() { for(var j=0;j<all.children.length;j++){ all.children[j].index = j; all.children[j].onclick = function () { if(!beConfirm){ moduleClick(this) } }; } } setBeginChildrenClick(); </script>
    </html>

[20190826221737863.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/26fbc080f8264e7b9ae28a27b9a05557.gif