简易别踩白块儿
注意事项：① 在一个元素未生成前不可对其添加事件
② 当数组中有元素为空时：即
，将其转换成字符串时，该字符串中只有不为空的元素。""
效果图
步骤：
① 分别为最初始的九个瓷片添加点击事件。若用户点击非黑色瓷片，则点击瓷片的背景变为红色，清除计时器，提示用户游戏结束，用户可选择重新开始游戏（该提示内容在未清除计时器前透明度为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>
![Spring5学习笔记（十二）—— 事务操作[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)