HTML5中canvas實現小球擊打小方塊游戲

dingda 發布于2019-08-19 18:01 / 999人閱讀

摘要：創建用于擊打的小球定義一個用于移動和擊打小方塊的小球，該小球包含如下的屬性，小球的做坐標位置，半徑，在軸和軸的速度。

源代碼：http://download.csdn.net/detail/liumingm...

游戲開發流程：

1、創建畫布：

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

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;
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79103.html

HTML5中canvas實現小球擊打小方塊游戲

摘要：創建用于擊打的小球定義一個用于移動和擊打小方塊的小球，該小球包含如下的屬性，小球的做坐標位置，半徑，在軸和軸的速度。源代碼：http://download.csdn.net/detail/liumingm... 游戲開發流程： 1、創建畫布：將畫布放在div標簽里面，這樣可以控制畫布居中的位置，再對div標簽加上一些樣式比如border和border-radius，這樣...

余學文 2019-08-30 12:55 評論0 收藏0
HTML5中canvas實現小球擊打小方塊游戲

摘要：創建用于擊打的小球定義一個用于移動和擊打小方塊的小球，該小球包含如下的屬性，小球的做坐標位置，半徑，在軸和軸的速度。源代碼：http://download.csdn.net/detail/liumingm... 游戲開發流程： 1、創建畫布：將畫布放在div標簽里面，這樣可以控制畫布居中的位置，再對div標簽加上一些樣式比如border和border-radius，這樣...

ityouknow 2019-08-01 15:09 評論0 收藏0
js+canvas仿微信《彈一彈》小游戲

摘要：在彈一彈游戲中，小球不能向上發射。這里又有一個坑彈一彈游戲中，剛射擊出去的小球是不受重力影響的不然瞄準還有什么意義。前言半年前用js和canvas仿了熱血傳奇網游（地址），基本功能寫完之后，剩下的都是堆數據、堆時間才能完成的任務了，沒什么新鮮感，因此進度極慢。這次看到微信《彈一彈》比較火，因為涉及到物理引擎（為了真實），于是動手試了一下。一共用了10個小時，不僅完成了這個demo，...

Invoker 2019-08-22 17:00 評論0 收藏0
一步步實現nest粒子特效

摘要：嘗試實現畫出一個彈射的小球很簡單，那怎么用多個小球實現這樣的效果呢。本文首發于我的博客，這是我的github，歡迎star。 ??這篇博客是模仿nest.js實現一個demo，由簡單到復雜，來一步步的實現它。這里是效果預覽。我的github里邊還有很多別的前端的demo，喜歡的話可以點個star，你的支持就是我的動力。從一道面試題開始實現一個半徑10px的小球在500px*5...

ky0ncheng 2019-08-22 11:20 評論0 收藏0