javascript HTML5 canvas實作打磚塊遊戲_javascript技巧-js教程-PHP中文網

javascript HTML5 canvas實作打磚塊遊戲_javascript技巧

WBOY

發布： 2016-05-16 15:06:43

原創

2343 人瀏覽過

本文實例編寫的小遊戲，基於HTML5中的canvas。遊戲主要是小球反彈擊打小方塊。在程式碼中主要實現了小方塊的生成，鍵盤鍵事件的監聽，小球的移動和碰壁之後的反彈以及怎樣消除小方塊等方法。程式碼使用到了一個js腳本庫

遊戲開發流程：

1、建立畫布：

把畫布放在div標籤裡面，這樣可以控制畫布居中的位置，再對div標籤加上一些樣式例如border和border-radius，這樣一來使其看上去像手機，利於觀看。

<div id="main">
 <!--将画布嵌在div块里面,使其可以居中-->
 <canvas id="liuming_canvas" width="300px" height="500px">
 </canvas>
</div>

登入後複製

2、創造移動的小木塊：

定義一個可以用來移動的小方塊，該移動小方塊包含如下的屬性，座標位置，小方塊的長和寬和小方塊每次移動的距離。

var diamond = {
 x : 100,  
 y : 485,
 width : 100,
 height : 15,
 move : 10
}

登入後複製

3、創建用於擊打的小球：

定義一個用於移動和擊打小方塊的小球，該小球包含如下的屬性，小球的做坐標位置，半徑，在x軸和y軸的速度。其中x軸和y軸的速度是為小球計算移動的方向和移動之後的座標值。

var ball_impact = {
 x : 150,
 y : 465,
 r : 10,
 vx : 200,
 vy : 200
}

登入後複製

4、產生一連串的小方塊：

產生一系列的小方塊用於被小球擊打，小球的生成主要是根據畫布的大小和小方塊的坐標與長寬以及各個小方塊的x軸和y軸的間隔。

var diamond_impact = [];//定义存储击打小方块的数组
diamond_impact.length = 0;
var width_span = 25; // 任意两个小方块的横向间隔 
var height_span = 25;  //任意两个小方块的水平间隔 
for(var i =1 ; i <=10 ; i++){//控制每行输出的小方块
 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、寫出移動小方塊的移動方法：

移動小方塊的實現，首先需要監聽獲得鍵盤的事件，之後再根據獲得的鍵盤事件來分別處理來向那個方向移動，在此處我分別定義了四個方向，目的是為了只在左右移動可能無法完全消滅小方塊，
在移動的過程之中也要判斷移動小方塊的位置，以防止是否已出界。在此我分別定義了四種方法來處理各個方向的移動。

//键盘事件，获取当前在那个方向运动

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);
 }
}
//其余方法类似

登入後複製

6、寫小球移動的方法、碰壁和接觸移動小方塊反彈的方法：

反彈：小方塊的反彈，主要改變其x軸和y軸方向的速度，由於我們定義的是勻速運動，為此我們只需要改變其速度的方向。
移動：根據小球的速度和指定的移動大小來計算新的小球座標，之後再繪製新的小球。
反彈圖片實例：(對於觸碰牆壁反彈類似，就不多說)

小球移動的代碼：

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座標就是失敗；
成功：計數判斷是否消滅的小方塊數是否和指定的小方塊數相同。

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(count_sum == 90){
 cxt.fillStyle = "#FCF205";
 cxt.font = "bold 50px 微软雅黑";
 cxt.fillText("SUCCESS！",20,250);//在画布上书写SUCCESS 
 diamond.move = 0;//不能移动板块
 ball_impact.vx =0;
 ball_impact.vy =0;
else{
 count_sum = 0;
}

登入後複製

以上就是本文的全部內容，希望對大家的學習有所幫助。