别踩白块 （原生js版的别踩白块）
分阶段提取代码是为了让读者更加简单明了的明白别踩白块的代码 第一阶段写出静态页面（搭建框架）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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 id="cont">
<div id="main">
<div class="row">
<div></div>
<div class="black"></div>
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
<div class="black"></div>
<div></div>
<div></div>
</div>
<div class="row">
<div class="black"></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
<div></div>
<div class="black"></div>
<div></div>
</div>
</div>
</div>
</body>
<script>
</script>
</html>
二阶段删除静态的快，因为别踩白块的那些都是自己创建的（动态创建div）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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 id="cont">
<div id="main"></div>
</div>
</body>
<script>
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 lang="en">
<head>
<meta charset="UTF-8">
<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 id="cont">
<div id="main"></div>
</div>
</body>
<script>
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 lang="en">
<head>
<meta charset="UTF-8">
<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>
<h2 id="sc">0</h2>
<div id="cont">
<div id="main"></div>
</div>
</body>
<script>
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>
