编程实现钢琴块游戏

在开始编程之前，让我们先来分析下整个游戏的流程：一定的速度下移，点击黑块，黑块消失，新的黑块出现在普通游戏玩家眼中，应该是游戏开始，黑块不断向下移动，若黑块触底则游戏结束；

而以开发者来说，应将每一个黑块和白块抽象成一个个的数据结构，黑块的消失和出现其实就是数据结构的创造和销毁，我们来看一张游戏的流程图，对于要编写的功能有一个大概的了解:

下面是添加样式，就是添加一个游戏的基础框架，把基本格子画出来

#main {

width: 400px;

height: 400px;

background: white;

border: 2px solid gray;

margin: 0 auto;

overflow: hidden;

}

#con {

width: 100%;

height: 400px;

position: relative;

top: -100px; /*隐藏最上层的那行*/

border-collapse:collapse;

}

/* 行 */

.row{

height: 100px;

width: 100%;

}

/* 一个块 */

.cell{

height: 100px;

width: 100px;

float: left;

}

.black {

background: black;

}

.start {

margin-top: 20px;

width: 150px;

height: 50px;

border-radius: 10px;

background: yellowgreen;

line-height: 50px;

text-align: center;

color: #fff;}

实现以下效果

根据前面的 HTML 部分我们可以知道，每个 就代表一个白块， 就代表一个黑块，每点击一个黑块消失其实是删除了一个 然后从上面添加一个新的 所以我们首先要通过 js 来控制 的创造和生成（记得删除在编写静态页面时候指定生成的 4 个 p.row）。具体方法如下：

 //创建p, 参数className是其类名
 function createp(className){
 var p = document.createElement('p');
 p.className = className;
 return p;
 }
 // 创造一个并且有四个子节点
 function createrow(){
 var con = $('con');
 var row = createp('row'); //创建p className=row
 var arr = creatcell(); //定义p cell的类名,其中一个为cell black
 con.appendChild(row); // 添加row为con的子节点
 for(var i = 0; i < 4; i++){
 row.appendChild(createp(arr[i])); //添加row的子节点 cell
 }
 if(con.firstChild == null){
 con.appendChild(row);
 }else{
 con.insertBefore(row, con.firstChild);
 }
 }
 //删除p#con的子节点中最后那个 
 function delrow(){
 var con = $('con');
 if(con.childNodes.length == 6) {
 con.removeChild(con.lastChild);
 }
 } 
 //创建一个类名的数组，其中一个为cell black, 其余为cell
 function creatcell(){
 var temp = ['cell', 'cell', 'cell', 'cell',];
 var i = Math.floor(Math.random()*4);//随机生成黑块的位置
 temp[i] = 'cell black';
 return temp;
 }

下一步

在可以通过 js 来创造和销毁 p 后，我们就要让黑块动起来，这个时候我们就用到了之前 css 提到的设定 隐藏了一行的 ，我们通过 js 的 DOM 操作使其向下方移动，并设置定时器每 30 毫秒移动一次，这样就实现了黑块的平滑移动，在黑块移动的同时，我们要判断黑块是否已经触底，触底则游戏失败，停止调用 move()，触底后调用函数 fail() 游戏失败，具体方法如下：

 //使黑块向下移动 
 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';
 if(top == 0){
 createrow();
 con.style.top = '-100px';
 delrow();
 }else if(top == (-100 + speed)){
 var rows = con.childNodes;
 if((rows.length == 5) && (rows[rows.length-1].pass !== 1) ){
 fail();
 }
 }
 }
 function fail(){
 clearInterval(clock);
 confirm('你的最终得分为 ' + parseInt($('score').innerHTML) );
 }

下一步

让黑块动起来之后呢，我们就来考虑怎么判断用户有没有点击到黑块呢，同时用户若点击到黑块，我们要让所在那一行消失，那么我们需要一个 judge 方法，具体如下：

//判断用户是否点击到了黑块，
function judge(ev){
 ev = ev || event
 if (ev.target.className.indexOf('black') != -1) {
 ev.target.className = 'cell';
 ev.target.parentNode.pass = 1; //定义属性pass，表明此行row的黑块已经被点击
 score();
 }
}