簡易别踩白塊兒
注意事項：① 在一個元素未生成前不可對其添加事件
② 當數組中有元素為空時：即
，将其轉換成字元串時，該字元串中隻有不為空的元素。""
效果圖
步驟：
① 分别為最初始的九個瓷片添加點選事件。若使用者點選非黑色瓷片，則點選瓷片的背景變為紅色，清除計時器，提示使用者遊戲結束，使用者可選擇重新開始遊戲（該提示内容在未清除計時器前透明度為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=)