'編程實現鋼琴塊遊戲'

在開始編程之前，讓我們先來分析下整個遊戲的流程：一定的速度下移，點擊黑塊，黑塊消失，新的黑塊出現在普通遊戲玩家眼中，應該是遊戲開始，黑塊不斷向下移動，若黑塊觸底則遊戲結束；

而以開發者來說，應將每一個黑塊和白塊抽象成一個個的數據結構，黑塊的消失和出現其實就是數據結構的創造和銷燬，我們來看一張遊戲的流程圖，對於要編寫的功能有一個大概的瞭解:

下面是添加樣式，就是添加一個遊戲的基礎框架，把基本格子畫出來

#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 部分我們可以知道，每個 <div class="cell"> 就代表一個白塊，<div class="cell black"> 就代表一個黑塊，每點擊一個黑塊消失其實是刪除了一個 <div class="row"> 然後從上面添加一個新的 <div class="row"> 所以我們首先要通過 js 來控制 <div class="row"> 的創造和生成（記得刪除在編寫靜態頁面時候指定生成的 4 個 div.row）。具體方法如下：

 //創建div, 參數className是其類名
 function creatediv(className){
 var div = document.createElement('div');
 div.className = className;
 return div;
 }
 // 創造一個<div class="row">並且有四個子節點<div class="cell">
 function createrow(){
 var con = $('con');
 var row = creatediv('row'); //創建div className=row
 var arr = creatcell(); //定義div cell的類名,其中一個為cell black
 con.appendChild(row); // 添加row為con的子節點
 for(var i = 0; i < 4; i++){
 row.appendChild(creatediv(arr[i])); //添加row的子節點 cell
 }
 if(con.firstChild == null){
 con.appendChild(row);
 }else{
 con.insertBefore(row, con.firstChild);
 }
 }
 //刪除div#con的子節點中最後那個<div class="row"> 
 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 來創造和銷燬 div 後，我們就要讓黑塊動起來，這個時候我們就用到了之前 css 提到的設定 <div id="con"> 隱藏了一行的 <div id="row">，我們通過 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();
 }
}