javascript HTML5 canvas實現打磚塊游戲

2020-03-24 16:00:31

字體：大中小

來源：轉載

供稿：網友

本文實例編寫的一個小游戲，基于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 : 103、創建用于擊打的小球：定義一個用于移動和擊打小方塊的小球，該小球包含如下的屬性，小球的做坐標位置，半徑，在x軸和y軸的速度。其中x軸和y軸的速度是為小球計算移動的方向和移動之后的坐標值。var ball_impact = { x : 150, y : 465, r : 10, vx : 200, vy : 2004、生成一系列的小方塊：生成一系列的小方塊用于被小球擊打，小球的生成主要是根據畫布的大小和小方塊的坐標與長寬以及各個小方塊的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;以上就是本文的全部內容，希望對大家的學習有所幫助。更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：javascript如何操作HTML下拉列表標簽

下一篇：javascript 獲取HTML DOM父、子、臨近節點