HTML5中canvas實現小球擊打小方塊遊戲
阿新 • • 發佈：2019-02-17
遊戲開發流程：
1、建立畫布：
將畫布放在div標籤裡面，這樣可以控制畫布居中的位置，在對div標籤加上一些樣式，利於觀看 [html] view plaincopyprint?
- <divid="main">
- <!--將畫布嵌在div塊裡面,使其可以居中-->
- <canvasid="liuming_canvas"width="300px"height="500px">
- </canvas>
- </div>
<div id="main"> <!--將畫布嵌在div塊裡面,使其可以居中--> <canvas id="liuming_canvas" width="300px" height="500px"> </canvas> </div>
2、建立移動的小木塊：
定義一個可以用於移動的小方塊，該小方塊包含如下的屬性，座標位置，小方塊的長和寬，小方塊移動的大小距離 [html] view plaincopyprint?
- var diamond = {
- x : 100,
- y : 485,
- width : 100,
- height : 15,
- move : 10
- }
var diamond = {
x : 100,
y : 485,
width : 100,
height : 15,
move : 10
}3、建立用於擊打的小球：
定義一個用於移動和擊打小方塊的小球，該小球包含如下的屬性，小球的做座標位置，半徑，在x軸和y軸的速度
- var ball_impact = {
- x : 150,
- y : 465,
- r : 10,
- vx : 200,
- vy : 200
- }
var ball_impact = {
x : 150,
y : 465,
r : 10,
vx : 200,
vy : 200
}4、生成一系列的小方塊：
生成一系列的小方塊用於被小球擊打，小球的生成主要是根據畫布的大小和小方塊的座標與長
[html] view plaincopyprint?
- var diamond_impact = [];
- diamond_impact.length = 0;
- var width_span = 25; // 任意兩個小方塊的橫向間隔
- var height_span = 25; //任意兩個小方塊的水平間隔
- for(var i =1 ; i <=10 ; i++){//控制每行輸出的小方塊
- <span style="white-space:pre"></span> for(var j = 1 ; j <10 ; j++){//輸出每列的小方塊 只有x軸和y軸的座標不一樣而已
- var diamond_impact_children = {
- x : width_span,
- y : height_span,
- width : 10,
- height : 10
- };
- width_span += 30;
- diamond_impact.push(diamond_impact_children); //將得到的小方塊放在 diamond_impact 中，已被以後使用
- }
- height_span += 25;
- width_span = 25;
- }
var diamond_impact = [];
diamond_impact.length = 0;
var width_span = 25; // 任意兩個小方塊的橫向間隔
var height_span = 25; //任意兩個小方塊的水平間隔
for(var i =1 ; i <=10 ; i++){//控制每行輸出的小方塊
<span style="white-space:pre"> </span> for(var j = 1 ; j < 10 ; j++){//輸出每列的小方塊 只有x軸和y軸的座標不一樣而已
var diamond_impact_children = {
x : width_span,
y : height_span,
width : 10,
height : 10
};
width_span += 30;
diamond_impact.push(diamond_impact_children); //將得到的小方塊放在 diamond_impact 中，已被以後使用
}
height_span += 25;
width_span = 25;
}5、編寫移動小方塊的移動方法：
移動小方塊的實現，首先需要監聽獲得鍵盤的事件，之後再根據獲得的鍵盤事件來分別處理來向那個方向移動，在此處我分別定義了四個方向，目的是為了只在左右移動可能不能完全消滅小方塊，
在移動的過程之中還要判斷移動小方塊的位置，以防止是否已經出界。在此處我分別定義了四個方法來處理各個方向的移動。
[html] view plaincopyprint?
- //鍵盤事件，獲取當前在那個方向運動
- var direction = "";
- document.onkeydown = function (e) {
- if (e.keyCode == 37 ) direction = "left" ;
- if (e.keyCode == 39 ) direction = "right";
- if (e.keyCode == 38 ) direction = "up";
- if (e.keyCode == 40 ) direction = "down";
- }
//鍵盤事件，獲取當前在那個方向運動
var direction = "";
document.onkeydown = function (e) {
if (e.keyCode == 37 ) direction = "left" ;
if (e.keyCode == 39 ) direction = "right";
if (e.keyCode == 38 ) direction = "up";
if (e.keyCode == 40 ) direction = "down";
}- //定義四個方法來重繪製方塊的位置 分別有 左、右、上、下
- function move_right_diamond(){
- clear_diamond();//清除以前的方塊
- init_canvas_background();//再次初始化畫布 下同
- //重新繪製小方塊的位置
- if(diamond.x + diamond.width >= canvas.width){ //判斷方塊是否已經到達最右端
- cxt.fillStyle = "#17F705";
- cxt.fillRect(diamond.x,diamond.y,diamond.width,diamond.height);
- }else{
- diamond.x += diamond.move;
- cxt.fillStyle = "#17F705";
- cxt.fillRect(diamond.x,diamond.y,diamond.width,diamond.height);
- }
- }
- //其餘方法類似
//定義四個方法來重繪製方塊的位置 分別有 左、右、上、下
function move_right_diamond(){
clear_diamond();//清除以前的方塊
init_canvas_background();//再次初始化畫布 下同
//重新繪製小方塊的位置
if(diamond.x + diamond.width >= canvas.width){ //判斷方塊是否已經到達最右端
cxt.fillStyle = "#17F705";
cxt.fillRect(diamond.x,diamond.y,diamond.width,diamond.height);
}else{
diamond.x += diamond.move;
cxt.fillStyle = "#17F705";
cxt.fillRect(diamond.x,diamond.y,diamond.width,diamond.height);
}
}
//其餘方法類似 6、編寫小球移動的方法以及碰壁和接觸移動小方塊反彈的方法：
反彈：小方塊的反彈，主要改變其x軸和y軸方向的速度，由於我們定義的是勻速運動，為此我們只需要改變其速度的方向。
移動：根據小球的速度和指定的移動大小來計算出新的小球座標，之後再繪製新的小球。
反彈圖片例項：(對於觸碰牆壁反彈類似，就不多說)
小球移動的程式碼：
[html] view plaincopyprint?
- cxt.arc(ball_impact.x,ball_impact.y,ball_impact.r,0,Math.PI * 2,true);
- cxt.closePath();
- cxt.fill();
- ball_impact.x += ball_impact.vx * cyc /1000;//改變其座標的位置
- ball_impact.y += ball_impact.vy * cyc /1000;
cxt.arc(ball_impact.x,ball_impact.y,ball_impact.r,0,Math.PI * 2,true);
cxt.closePath();
cxt.fill();
ball_impact.x += ball_impact.vx * cyc /1000;//改變其座標的位置
ball_impact.y += ball_impact.vy * cyc /1000;7、小球擊打小方塊，小方塊消失的方法：
擊打：小球擊打小方框，主要判斷小球和小方塊的座標位置即可。注意此處將會分別判斷y軸和x軸將小球的擊打的小方塊限定在一個區域裡面。 小時：擊中當前小方塊之後改變其長寬，之後重繪小方塊即可，由於當前的小方塊的長寬都為0，即繪製之後的小方塊沒有。 圖解擊打的座標變化：
8、判斷遊失敗和成功的方法：
失敗：是要小球的掉到最低端即小球的Y座標大於畫布的Y座標 就是失敗； 成功：計數判斷是否消滅的小方塊數是否和指定的小方塊數相同。 [html] view plaincopyprint?
- if(ball_impact.y + ball_impact.r >= canvas.height){
- cxt.fillStyle = "#FC0000";
- cxt.font = "bold 50px 微軟雅黑";
- cxt.fillText("FAILURE！",30,250);
- diamond.move = 0;//不能移動板塊
- }
if(ball_impact.y + ball_impact.r >= canvas.height){
cxt.fillStyle = "#FC0000";
cxt.font = "bold 50px 微軟雅黑";
cxt.fillText("FAILURE！",30,250);
diamond.move = 0;//不能移動板塊
}[html] view plaincopyprint?
- //判斷是否與所有的小方塊數相等
- if(count_sum == 90){
- cxt.fillStyle = "#FCF205";
- <span style="white-space:pre"></span>cxt.font = "bold 50px 微軟雅黑";
- cxt.fillText("SUCCESS！",20,250);
- diamond.move = 0;//不能移動板塊
- <spanstyle="white-space:pre"></span>ball_impact.vx =0;
- ball_impact.vy =0;
- else{
- count_sum = 0;
- }
//判斷是否與所有的小方塊數相等
if(count_sum == 90){
cxt.fillStyle = "#FCF205";
<span style="white-space:pre"> </span>cxt.font = "bold 50px 微軟雅黑";
cxt.fillText("SUCCESS！",20,250);
diamond.move = 0;//不能移動板塊
<span style="white-space:pre"> </span>ball_impact.vx =0;
ball_impact.vy =0;
else{
count_sum = 0;
}9、顯示效果：
