本文主要是介绍别踩白块 复盘笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
别踩白块 复盘笔记
- index.html
- index.css
- index.js
index.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>别踩白块</title><link rel="stylesheet" type="text/css" href="css/index.css"/></head><body><!--表示分数的部分--><h2>score</h2><h2 id="score">0</h2><!--布局四行四列的白黑块--><div id="main"><!--用两个div框住四行的原因，为方便整个content进行绝对定位，main作为直接父级元素进行相对定位--><div id="content"></div> </div><!--游戏开始的按钮--><div class="btn"><button class="start" onclick="start()">开始游戏</button></div></body><script type="text/javascript" src="js/index.js"></script>
</html>index.css
*{margin: 0;padding: 0;}h2{text-align: center;
}#main{width: 408px;height: 408px;margin: 0 auto;border: 2px solid gray;background: white;position: relative;overflow: hidden;
}#content{width: 100%;height: 100%;position: absolute;top: -408px;border-collapse: collapse;
}.row{width: 100%;height: 100px;
}.cell{width: 100px;height: 100px;background-color: white;float: left;border: 1px solid blue;
}.black{background-color: black;
}.btn{width: 100%;height: 100px;text-align: center;
}.start{width: 150px;height: 50px;font-size: 20px;line-height: 50px;color: white;background: greenyellow;margin: 20px auto;
}index.js
下面的代码标记的顺序，是思考的过程，一步一步实现代码。
/*1.产生随机黑块白块类的数组的函数*/
function create_cells(){var temp = ['cell','cell','cell','cell'];var i = Math.floor(Math.random()*4);temp[i] = 'cell black';return temp;
}//2.创建一个类名为'className'的div
function create_div(className){var div = document.createElement('div');div.className = className;return div;
}//3.获取页面中的元素的函数
function $(id){return document.getElementById(id);
}/*4.生成一行，四列*/
function create_row(){var content = $('content');var row = create_div('row');var arr = create_cells();for(var i=0;i < 4;i++){var cell = create_div(arr[i]);row.appendChild(cell);}if(content.firstChild == null){content.appendChild(row);}else {content.insertBefore(row,content.firstChild);}
}var clock = null; //全局的时钟，可以任意时候关掉游戏
var flag = 0; //0表示游戏还没有开始
var speed = 2;//5.黑块运动，后编写删除末尾行函数以及判断游戏是否结束函数
function move(){var content = $('content');var top = parseInt(window.getComputedStyle(content,null)['top']);top += speed;content.style.top = top + 'px';IsGameOver(); //每下落一次，就判断是否游戏结束（最后一行的黑块是否被点击）if(top >= 0){create_row();top = -102;content.style.top = top + 'px';if(content.childNodes.length == 6){delete_row();}}
}//6.删除末尾元素
function delete_row(){var content = $('content');content.removeChild(content.lastChild);
}//7.判断游戏是否结束
function IsGameOver(){//判断用户是否失败var rows = $('content').childNodes; //获取所有的行//1.用户点击了白块,判断每行的pass1（白块）是否被点击for(let i=0;i < rows.length;i++){if(rows[i].pass1 == 1) fail(); //只要点击了白块，就游戏失败}//2.判断到达底端的黑块是否被点击，当行数为6时，说明还为删除已经点击过的黑行//若行数为5，说明已经删除了点击过的黑行，并且最上面一行，//要么是刚要下落，要么就是还没下落结束//每次底部都是有一行的，每次只要判断底部的那一行黑块是否被点击if(rows.length == 5 && rows[rows.length-1].pass2 != 1) fail();
}//8.游戏结束后执行的函数
function fail(){clearInterval(clock);confirm('你的最终得分为' + parseInt($('score').innerHTML));$('score').innerHTML = 0;var content = $('content');content.innerHTML=null;content.style.top = '-408px';speed = 2;flag = 0;
}//9.点击游戏开始后，开始初始化.用时钟每30ms调用move函数
function start(){if(flag == 0){init();flag = 1;}else {alert("游戏已经开始了，不要再点击");}
}//10.init函数，来驱动move函数。然后给main绑定onclick函数，写judge函数
function init(){var content = $('content');for(var i=0; i < 4;i++){create_row();}$('main').onclick = function(ev){var ev = event || ev; //获取事件对象.也就是点击事件judge(ev);}clock = window.setInterval(move,30);
}//11.判断用户点击的块并标记
function judge(ev){ //只标记用户点击的是哪一行的什么颜色块if(ev.target.className.indexOf('cell') != -1 && ev.target.className.indexOf('black') == -1){ev.target.parentNode.pass1 = 1; //定义属性pass1，标记白块}if(ev.target.className.indexOf('cell') != -1 && ev.target.className.indexOf('black') != -1){ev.target.className = 'cell'; //黑块变成白块ev.target.parentNode.pass2 = 1; //定义属性pass2，标记黑块score();//分数加1}
}//12.判断用户点击后，计算分数
function score(){var score = $('score');var newscore = parseInt(score.innerHTML) + 1;score.innerHTML = newscore;if(newscore % 10 == 0){speed_up();}
}//13.加速函数
function speed_up(){speed += 1;
}这篇关于别踩白块 复盘笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
