别踩白块（网页版）
（扣1评论送web资料）
实现功能：
1.随机生成白块与黑块，且每行只有一个黑块。
2.上方实时记录当前得分，每点击一次黑块则得一分。
3.每次单击黑块将使其变为白块，如有黑块触底则游戏结束。
4.游戏结束后弹出最终得分对话框。
html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>别踩白块</title>
<link rel="stylesheet" href="BlackBlocks.css">
</head>
<body>
<h2>score</h2>
<h2 id="score">0</h2>
<div id="main">
<div id="con"></div>
</div>
<div class="btn">
<button class="start" onclick="start()">开始游戏</button>
</div>
</body>
<script src="BlackBlocks.js"></script>
</html>
CSS文件：
#main{
width: 408px;
height:408px;
background:white;
border:2px solid gray;
margin:0 auto;
overflow: hidden;
}
h2{
text-align: center;
}
#con{
width:100%;
height: 400px;
position: relative;
top: -400px;
border-collapse: collapse;
}
.row{
height: 100px;
width: 100%;
}
.cell{
height: 100px;
width: 100px;
float: left;
border:rgb(54,74,129) 1px solid;
}
.black{
background: black;
}
.btn{
width: 100%;
text-align: center;
}
.start{
margin-top: 20px auto;
width: 150px;
height:50px;
border-radius: 10px;
background: yellowgreen;
line-height: 50px;
color: #fff;
}
Javascript文件：
function $(id){
return document.getElementById(id);
}
function creatediv(className){
var div = document.createElement("div");
div.className = className;
return div;
}
var clock = null;
var state = 0;
var speed = 6;
var flag = false;
function start(){
if(!flag){
init();
}else{
alert('游戏已经开始，无需再次点击！');
}
}
function init(){
flag = true;
for(var i=0;i<4;i++){
createrow();
}
$('main').onclick = function(ev){
ev = ev||event
judge(ev);
}
clock = window.setInterval('move()',30);
}
function createrow(){
var con = $('con');
var row = creatediv("row");
var arr = createcell();
con.appendChild(row);
for(var i = 0;i<4;i++){
row.appendChild(creatediv(arr[i]));
}
if(con.firstChild == null){
con. appendChild(row);
}else{
con.insertBefore(row,con.firstChild);
}
}
function delrow(){
var con = $('con');
if(con.childNodes.length == 6){
con.removeChild(con.lastChild);
}
}
function createcell(){
var temp = ['cell','cell','cell','cell',];
var i = Math.floor(Math.random()*4);
temp[i] = 'cell black';
return temp;
}
function move(){
var con = $('con');
var top = parseInt(window.getComputedStyle(con,null)['top']);
if(speed+top>0){
top=0;
}else{
top+=speed;
}
con.style.top = top+'px';
over();
if(top == 0){
createrow();
con.style.top = '-101px';
delrow();
}
}
function speedup(){
speed += 2;
if(speed == 20){
alert('你超神了！');
}
}
function over(){
var rows = con.childNodes;
if((rows.length == 5)&&(rows[rows.length-1].pass!==1)){
fail();
}
for(let i=0; i<rows.length; i++){
if(rows[i].pass1 == 1){
fail();
}
}
}
function fail(){
clearInterval(clock);
flag = false;
confirm('你的最终得分 '+parseInt($('score').innerHTML));
var con = $('con');
con.innerHTML = "";
$('score').innerHTML = 0;
con.style.top = '-408px';
}
function judge(ev){
if(ev.target.className.indexOf('black')==-1&&ev.target.className.indexOf('cell')!=-1){
ev.target.parentNode.pass1 = 1;
}
if(ev.target.className.indexOf('black')!=-1){
ev.target.className = 'cell';
ev.target.parentNode.pass = 1;
score();
}
}
function score(){
var newscore = parseInt($('score').innerHTML)+1;
$('score').innerHTML = newscore;
if(newscore == 0){
speedup();
}
}
加油！！！