快捷導(dǎo)航

javascript HTML5 canvas實(shí)現(xiàn)打磚塊游戲

更新時(shí)間：2020年06月18日 15:17:29 作者：liuming_music

這篇文章主要介紹了基于javascript HTML5 canvas實(shí)現(xiàn)打磚塊游戲的具體實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例編寫的一個(gè)小游戲，基于HTML5中的canvas。游戲主要是小球反彈擊打小方塊。在代碼中主要實(shí)現(xiàn)了小方塊的生成，鍵盤鍵事件的監(jiān)聽，小球的移動(dòng)和碰壁之后的反彈以及怎樣消除小方塊等方法。代碼使用到了一個(gè)js腳本庫

游戲開發(fā)流程：

1、創(chuàng)建畫布：

將畫布放在div標(biāo)簽里面，這樣可以控制畫布居中的位置，再對(duì)div標(biāo)簽加上一些樣式比如border和border-radius，這樣一來使其看上去像手機(jī)，利于觀看。

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

2、創(chuàng)建移動(dòng)的小木塊：

定義一個(gè)可以用于移動(dòng)的小方塊，該移動(dòng)小方塊包含如下的屬性，坐標(biāo)位置，小方塊的長和寬和小方塊每次移動(dòng)的距離。

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

3、創(chuàng)建用于擊打的小球：

定義一個(gè)用于移動(dòng)和擊打小方塊的小球，該小球包含如下的屬性，小球的做坐標(biāo)位置，半徑，在x軸和y軸的速度。其中x軸和y軸的速度是為小球計(jì)算移動(dòng)的方向和移動(dòng)之后的坐標(biāo)值。

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

4、生成一系列的小方塊：

生成一系列的小方塊用于被小球擊打，小球的生成主要是根據(jù)畫布的大小和小方塊的坐標(biāo)與長寬以及各個(gè)小方塊的x軸和y軸的間隔。

var diamond_impact = [];//定義存儲(chǔ)擊打小方塊的數(shù)組
diamond_impact.length = 0;
var width_span = 25; // 任意兩個(gè)小方塊的橫向間隔 
var height_span = 25; //任意兩個(gè)小方塊的水平間隔 
for(var i =1 ; i <=10 ; i++){//控制每行輸出的小方塊
 for(var j = 1 ; j < 10 ; j++){//輸出每列的小方塊 只有x軸和y軸的坐標(biāo)不一樣而已
 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、編寫移動(dòng)小方塊的移動(dòng)方法：

移動(dòng)小方塊的實(shí)現(xiàn)，首先需要監(jiān)聽獲得鍵盤的事件，之后再根據(jù)獲得的鍵盤事件來分別處理來向那個(gè)方向移動(dòng)，在此處我分別定義了四個(gè)方向，目的是為了只在左右移動(dòng)可能不能完全消滅小方塊，
在移動(dòng)的過程之中還要判斷移動(dòng)小方塊的位置，以防止是否已經(jīng)出界。在此處我分別定義了四個(gè)方法來處理各個(gè)方向的移動(dòng)。

//鍵盤事件，獲取當(dāng)前在那個(gè)方向運(yùn)動(dòng)

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";
}
 
//定義四個(gè)方法來重繪制方塊的位置 分別有 左、右、上、下

function move_right_diamond(){
 clear_diamond();//清除以前的方塊
 init_canvas_background();//再次初始化畫布 下同
 //重新繪制小方塊的位置
 if(diamond.x + diamond.width >= canvas.width){ //判斷方塊是否已經(jīng)到達(dá)最右端
 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、編寫小球移動(dòng)的方法以及碰壁和接觸移動(dòng)小方塊反彈的方法：

反彈：小方塊的反彈，主要改變其x軸和y軸方向的速度，由于我們定義的是勻速運(yùn)動(dòng)，為此我們只需要改變其速度的方向。
移動(dòng)：根據(jù)小球的速度和指定的移動(dòng)大小來計(jì)算出新的小球坐標(biāo)，之后再繪制新的小球。
反彈圖片實(shí)例：(對(duì)于觸碰墻壁反彈類似，就不多說)

小球移動(dòng)的代碼：

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;//改變其坐標(biāo)的位置
ball_impact.y += ball_impact.vy * cyc /1000;

7、小球擊打小方塊，小方塊消失的方法：

擊打：小球擊打小方框，主要判斷小球和小方塊的坐標(biāo)位置即可。注意此處將會(huì)分別判斷y軸和x軸將小球的擊打的小方塊限定在一個(gè)區(qū)域里面。
小時(shí)：擊中當(dāng)前小方塊之后改變其長寬，之后重繪小方塊即可，由于當(dāng)前的小方塊的長寬都為0，即繪制之后的小方塊沒有。
圖解擊打的坐標(biāo)變化：

8、判斷游失敗和成功的方法：

失敗：是要小球的掉到最低端即小球的Y坐標(biāo)大于畫布的Y坐標(biāo) 就是失?。?br /> 成功：計(jì)數(shù)判斷是否消滅的小方塊數(shù)是否和指定的小方塊數(shù)相同。

if(ball_impact.y + ball_impact.r >= canvas.height){
 cxt.fillStyle = "#FC0000";
 cxt.font = "bold 50px 微軟雅黑";
 cxt.fillText("FAILURE！",30,250);
 diamond.move = 0;//不能移動(dòng)板塊
}

//判斷是否與所有的小方塊數(shù)相等
if(count_sum == 90){
 cxt.fillStyle = "#FCF205";
 cxt.font = "bold 50px 微軟雅黑";
 cxt.fillText("SUCCESS！",20,250);//在畫布上書寫SUCCESS 
 diamond.move = 0;//不能移動(dòng)板塊
 ball_impact.vx =0;
 ball_impact.vy =0;
else{
 count_sum = 0;
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: