HTML5 canvas製作遊戲接住小球

遊戲的整體邏輯是隨機在上面生成障礙物，當小球碰到障礙物時障礙物消失，當全部障礙物被消滅時贏得遊戲，而當小球掉到木板以下則輸掉遊戲。

先從頁面說起，比較簡單的**，只有乙個div乙個canvas，就不多做解釋了。

然後是遊戲介面，小球和木板部分我定義了全域性變數來儲存他們的左上角座標，因為這個座標是不斷變化的。而障礙物部分則用乙個二維陣列儲存，然後用隨機數給二維陣列賦初值，0代表該處無障礙物，1代表該處有障礙物。

var mat_x=30*margin_width;
var mat_vx=0;
var ball_x=5*box_width;
var ball_y=5*box_width;
var ball_vx=3;
var ball_vy=5;
var display=new array();
for ( var i = 0; i < 10; i++) 
}

繪製部分的**就不貼了，下面就說說主要邏輯。首先是木板的移動，這裡主要是通過鍵盤的左右箭頭來控制，因為要呼叫js的鍵盤監聽事件。具體**如下：

document.οnkeyup=function(event);
document.οnkeydοwn=function(event)
if(e && e.keycode==39)
};

通過得到的移動速度改變小球座標：

function movemat()else if(mat_x+mat_vx>=width-3*box_width-3*margin_width) else
}

然後是小球移動的**，一開始我們給小球定義乙個x軸方向的速度vx，乙個y軸方向的速度vy，讓小球一開始就動起來。然後我們判斷運動後小球的位置，當小球運動到左右兩邊時，x軸方向的速度vx變為它的相反數，同理，運動到上方時，則y軸方向的速度變為它的相反數。而當小球撞擊木板時（碰撞解說看下面，這裡暫不解說了），y軸的速度必定改變，x軸的速度則視情況而定。如果小球和木板x軸的速度同向，即都大零，或都小於零，則x軸速度不變。否則x軸速度等於小球速度加上木板速度。（當小球運動到下方而沒撞擊木板時，遊戲結束，因此不在此處進行判斷）：

function changeball()
if(ball_y<=margin_width)
if(ball_x>=mat_x-box_width&&
ball_x<=mat_x+4*box_width+3*margin_width&&
ball_y<=height-2*margin_width-box_width*2+5&&
ball_y>=height-2*margin_width-box_width*2-5
)else if (ball_vx==0) 
ball_vy=-ball_vy;
} ball_x=ball_x+ball_vx;
ball_y=ball_y+ball_vy;
}

然後是小球與障礙物的碰撞部分，要判斷乙個物體與另乙個物體碰撞還是挺難的，所以我們先不這樣判斷，而是先判斷乙個點與乙個物體發生碰撞，由於我們這裡的障礙物使用的矩形，就拿矩形來說了。如果乙個點的x座標，大於矩形最小的x座標，小於矩形最大的x座標且點的y座標小於矩形最小的y座標，大於矩形最大的y座標，則點與矩形發生了碰撞了。可能這麼說還是有人不明白，所以筆者畫了一張圖加以解釋：

明白了點與矩形的判斷，我們再來看看小球與障礙物的判斷，這裡筆者仍把小球看作乙個矩形，具體是取小球的外切矩形的四個頂點的座標，拿這四個頂點依次去與障礙物判斷，只要有乙個頂點與障礙物發生碰撞，小球即與障礙物發生了碰撞。由於取的是外切矩形的頂點，所以不太嚴謹，有強迫症的朋友可以去計算小球的邊緣的座標。

當發生碰撞後，需要處理兩件事，一是障礙物消失：我們前面說過，障礙物存在二維陣列裡，1代表有障礙物，0代表無障礙物，所以這裡只要把對應的數賦值為0即可。二是小球方向改變：y軸速度改變，則x軸速度不變。x軸速度改變，則y軸速度不變。因為有點麻煩，筆者想了好久沒有想到辦法解決，這裡筆者又偷了一點懶，用乙個隨機數來判斷是否改變。如果諸位讀者有什麼好的解決辦法，還望與筆者分享一下，不勝感激。

function checkimpact()else
}} 
} } }

最後部分就是判斷輸贏了。只有當障礙物全部被消滅時，才能贏得遊戲，而當還存在障礙物，小球卻掉到下方時輸掉遊戲並結束。具體**如下：

function checkover()

} }

if (!flag)

if (ball_y>=height)

}html5——canvas製作遊戲接住小球

HTML5 canvas製作遊戲接住小球

html5 canvas製作刮刮卡

用HTML5 canvas製作簡單遊戲

HTML5 canvas遊戲工作原理

HTML5 canvas製作遊戲接住小球

html5 canvas製作刮刮卡

用HTML5 canvas製作簡單遊戲

HTML5 canvas遊戲工作原理

相關推薦