别踩白塊（原生js版的别踩白塊）

分階段提取代碼是為了讓讀者更加簡單明了的明白别踩白塊的代碼第一階段寫出靜态頁面（搭建架構）

<!DOCTYPE html>

<html >

<head>

<title>Document</title>

<style>

#cont{

position: relative;

border: 1px solid red;

width: 400px;

overflow: hidden;

}

#main{

position: relative;

}

.row{

width: 400px;

height: 100px;

}

.row div{

width: 98px;

height: 98px;

border: 1px solid gray;

float: left;

}

.black{

background: black;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</body>

</script>

</html>

二階段删除靜态的快，因為别踩白塊的那些都是自己建立的（動态建立div）

<!DOCTYPE html>

<html >

<head>

<title>Document</title>

<style>

#cont{

position: relative;

border: 1px solid red;

width: 400px;

overflow: hidden;

}

#main{

position: relative;

}

.row{

width: 400px;

height: 100px;

}

.row div{

width: 98px;

height: 98px;

border: 1px solid gray;

float: left;

}

.black{

background: black;

}

</style>

</head>

<body>

</div>

</body>

var main = document.getElementById('main');

function cdiv(className){

// 建立DIV

var div = document.createElement('div');

if(className){ // 判斷有沒有傳遞class值

// 如果有值，為div添加class屬性

div.setAttribute('class',className);

}

//傳回建立好的div

return div;

}

// 建立一行div

function crow(){

// 建立一行div class="row"

var row = cdiv('row');

// 擷取随機數

var index = Math.floor(Math.random()*4);

for(var i=0;i<4;i++){

//循環四次建立小div

if(i==index){ //如果本次循環數和随機數相等，此div為黑色

row.appendChild(cdiv('black'));

}else{

//如果本次循環數和随機數不相等，此div為白色

row.appendChild(cdiv());

}

// 将本行div 添加到main

main.appendChild(row);

}

function init(){

// 循環四次，稱為四行

for(var i=0;i<4;i++){

crow();

}

// 初始化調用

init();

</script>

</html>

第三步讓白塊動起來 div塊循環出現

<!DOCTYPE html>

<html >

<head>

<title>Document</title>

<style>

#cont{

position: relative;

border: 1px solid red;

width: 400px;

overflow: hidden;

}

#main{

position: relative;

top:-100px;

}

.row{

width: 400px;

height: 100px;

}

.row div{

width: 98px;

height: 98px;

border: 1px solid gray;

float: left;

}

.black{

background: black;

}

</style>

</head>

<body>

</div>

</body>

var main = document.getElementById('main');

function cdiv(className){

// 建立DIV

var div = document.createElement('div');

if(className){ // 判斷有沒有傳遞class值

// 如果有值，為div添加class屬性

div.setAttribute('class',className);

}

//傳回建立好的div

return div;

}

// 建立一行div

function crow(){

// 建立一行div class="row"

var row = cdiv('row');

// 擷取随機數

var index = Math.floor(Math.random()*4);

for(var i=0;i<4;i++){

//循環四次建立小div

if(i==index){ //如果本次循環數和随機數相等，此div為黑色

row.appendChild(cdiv('black'));

}else{

//如果本次循環數和随機數不相等，此div為白色

row.appendChild(cdiv());

}

// 将本行div 添加到main

main.insertBefore(row,main.firstChild);

// main.appendChild(row);

}

function move(){

// 擷取main 的top值，

var top = parseInt(getComputedStyle(main).top);

top += 2;

// 每調用一次，top在原基礎上+2

main.style.top = top+'px'; //将top新值重新賦回樣式表

if(top == 0){ //top值為0時，證明最頂層的一行div出現完畢

crow(); //建立新的一行

main.style.top = '-100px';// 将top 置為-100,隐藏新的頂層一行

if(main.children.length>5){ //當大于5行時

//删除最後一行

main.removeChild(main.lastChild);

}

function init(){

// 循環四次，稱為四行

for(var i=0;i<4;i++){

crow();

}

// 每隔一段時間就調用move函數

setInterval(move,40);

}

// 初始化調用

init();

</script>

</html>

第四步加分判斷輸赢加速

<!DOCTYPE html>

<html >

<head>

<title>Document</title>

<style>

#cont{

position: relative;

border: 1px solid red;

width: 400px;

overflow: hidden;

}

#main{

position: relative;

top:-100px;

}

.row{

width: 400px;

height: 100px;

}

.row div{

width: 98px;

height: 98px;

border: 1px solid gray;

float: left;

}

.black{

background: black;

}

</style>

</head>

<body>

</div>

</body>

var main = document.getElementById('main');

function cdiv(className){

// 建立DIV

var div = document.createElement('div');

if(className){ // 判斷有沒有傳遞class值

// 如果有值，為div添加class屬性

div.setAttribute('class',className);

}

//傳回建立好的div

return div;

}

// 建立一行div

function crow(){

// 建立一行div class="row"

var row = cdiv('row');

// 擷取随機數

var index = Math.floor(Math.random()*4);

for(var i=0;i<4;i++){

//循環四次建立小div

if(i==index){ //如果本次循環數和随機數相等，此div為黑色

row.appendChild(cdiv('black'));

}else{

//如果本次循環數和随機數不相等，此div為白色

row.appendChild(cdiv());

}

// 将本行div 添加到main

main.insertBefore(row,main.firstChild);

// main.appendChild(row);

}

var x = 2;

function move(){

// 擷取main 的top值，

var top = parseInt(getComputedStyle(main).top);

top += x;

// 每調用一次，top在原基礎上+2

main.style.top = top+'px'; //将top新值重新賦回樣式表

if(top > 0){ //top值為0時，證明最頂層的一行div出現完畢

crow(); //建立新的一行

main.style.top = '-100px';// 将top 置為-100,隐藏新的頂層一行

if(main.lastChild.p == undefined){

clearInterval(c);

sta = false;

alert('game over!!!');

}

if(main.children.length>5){ //當大于5行時

//删除最後一行

main.removeChild(main.lastChild);

}

var sta = true;

function init(){

// 循環四次，稱為四行

for(var i=0;i<4;i++){

crow();

}

main.onclick = function(ev){

if(sta == false){

alert('game over!!!');

}else if(ev.target.className == ''){

clearInterval(c);

sta = false;

alert('game over!!!');

}else{

ev.target.className = '';

ev.target.parentNode.p = true;

var sc = document.getElementById('sc');

var fs = parseInt(sc.innerHTML);

sc.innerHTML = fs+1;

if(fs%5==0){

x +=1;

}

// 每隔一段時間就調用move函數

c = setInterval(move,40);

}

// 初始化調用

init();

</script>

</html>

别踩白塊（原生js版的别踩白塊）

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條

别踩白塊 （原生js版的别踩白塊）

繼續閱讀

别踩白塊（原生js版的别踩白塊）