Segmentation Faultぐ

Segmentation Fault

コアダンプの数だけ強くなれるよ。

canvasで少しずつ作るブロック崩し(4/5)

スポンサーリンク


前回は右クリックでボールを出現、左クリックでバーを上下させボールを打ち返す機能を加えました。今回はいよいよブロックを作ってボールが当たると消える機能をつけてみます。


完成品

左クリック: バーを下げる
右クリック: ボール出現

ソースコード

<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
(function() {

  var canvas;
  var ctx;
  var mouseX;
  var mouseY;
  
  // バーの情報
  var BAR = {
    'HEIGHT' : 10,
    'WIDTH'  : 50,
    'UNDER'  : 25,
    'X'      : 0,
    'Y'      : 0,
    'PUSH'   : 10,
    'Vx'     : 0,
    'Vx0'    : 0,
    'Vy'     : 0,
    'Vy0'    : 150,
    'M'      : 5,
    'E'      : 0.7,
    'E0'     : 10,
  };
  
  // フィールドの情報
  var FIELD = {
    'HEIGHT'  : 0,
    'WIDTH'   : 0,
    'GRAVITY' : 588, // 重力加速度(0.9 * FPS)
    'FPS'     : 60,  // frame per second
    'E'       : 0.7, 
    'E0'      : 10,
  };
  
  // ボールの情報
  var BALL = [];
  var Ball = function() {
    this.Alive  = 0;
    this.X      = 0;
    this.Y      = 0;
    this.Vy     = 0;
    this.Vx     = 100;
    this.Vx0    = 0;
    this.Vy0    = 200;
    this.RADIUS = 5;
    this.M      = 1;
    this.HUE    = 0.5;
  };
  
  // ブロックの情報
  var BLOCK = [];
  var Block = function() {
    this.Alive  = 0;
    this.WIDTH  = 30;
    this.HEIGHT = 10;
    this.X      = 0;
    this.Y      = 0;
  };
  
  // 初期化処理
  function initialize() {
    canvas = document.getElementById('canvas');
    if(!canvas && !canvas.getContext) {
      return false;
    }
    
    // キャンバス作成
    ctx = canvas.getContext('2d');
    FIELD.WIDTH = ctx.canvas.width ;
    FIELD.HEIGHT = ctx.canvas.height;
    
    // バーの設定
    mouseX = FIELD.WIDTH/2;  // バーの初期位置は中心
    BAR.X = mouseX;
    BAR.Y = FIELD.HEIGHT-BAR.UNDER;
    
    // ブロックの生成
    createBlocks();
    
    // 各種イベント設定
    canvas.addEventListener('mousemove', getMouseCoordinate, false);
    canvas.addEventListener('mousedown', pushBar, false);
    canvas.addEventListener('mouseup', popBar, false);
    canvas.addEventListener('contextmenu', putBall, false);
    
    setInterval(drawField, 1000/FIELD.FPS);
  };
  
  
  // マウス座標の更新
  function getMouseCoordinate(e) {
    var rect = e.target.getBoundingClientRect();
    mouseX = Math.floor(e.clientX - rect.left);
    mouseY = Math.floor(e.clientY - rect.top);
  };
  
  // ボールの生成
  function putBall(e) {
    e.preventDefault();
    
    // ボールの初期位置は中心
    var tail = BALL.length;
    BALL[tail] = new Ball();
    BALL[tail].Alive = 1;
    BALL[tail].X = BAR.X;
    BALL[tail].Y = FIELD.HEIGHT-BAR.UNDER;
    BALL[tail].Vy = BALL[tail].Vy0 * (-1);
  };
  
  // バーの収縮
  function pushBar(e) {
    if (!e.pageX) {
      e = event.touches[0];
    }
    
    if (e.button == 0) {
      setTimeout(pushBarEvent, 1000/FIELD.FPS);
    }
  };
  
  // バーの反発
  function popBar(e) {
    if (!e.pageX) {
      e = event.touches[0];
    }
    
    if (e.button == 0) {
      setTimeout(popBarEvent, 1000/FIELD.FPS);
    }
  };
  
  // バーの収縮処理
  function pushBarEvent() {
    if (BAR.Y < FIELD.HEIGHT - BAR.UNDER + BAR.PUSH) {
      BAR.Vy = BAR.Vy0;
      BAR.Y += BAR.Vy * (FIELD.FPS/1000);
      setTimeout(pushBarEvent, 1000/FIELD.FPS);
    } else {
      BAR.Vy = 0;
      BAR.Y = FIELD.HEIGHT - BAR.UNDER + BAR.PUSH;
    }
  };
  
  var BarTimer;
  // バーの反発処理
  function popBarEvent() {
    if (BAR.Y > FIELD.HEIGHT-BAR.UNDER) {
      BAR.Vy = BAR.Vy0 * (-1);
      BAR.Y  += BAR.Vy * (FIELD.FPS/1000);
      setTimeout(popBarEvent, 1000/FIELD.FPS);
    } else {
      BAR.Y = FIELD.HEIGHT-BAR.UNDER;
      setTimeout(resetBarSpeed, 100);
    }
  };
  
  function resetBarSpeed() {
    BAR.Vy = 0;
  };
  
  // ブロックの生成
  function createBlocks() {
    var bxmax = 13;
    var bymax = 6;
    var btop  = 20;
    var bleft = 20;
    var bidx = 0;
    var bint = 5;
    
    for (var x = 0; x < bxmax; x++) {
      for (var y = 0; y < bymax; y++) {
        BLOCK[bidx] = new Block();
        BLOCK[bidx].X = x * BLOCK[bidx].WIDTH + btop + (x * bint);
        BLOCK[bidx].Y = y * BLOCK[bidx].HEIGHT + bleft + (y * bint);
        BLOCK[bidx].Alive = 1;
        
        bidx++;
      }
    }
    
  };
  
  
  // 画面の描画
  function drawField() {
    
    calcBallP();
    drawBack();
    drawBall();
    drawBar();
    drawBlock();
  };
  
  // ボール位置計算
  function calcBallP() {
    
    for (var i = 0; i < BALL.length; i++) {
      
      if (BALL[i] == null) {
        continue;
      }
      
      // 生存しているボールのみ計算
      if (BALL[i].Alive == 1) {
        // 床・天井接触
        if (BALL[i].Y <= 0 || FIELD.HEIGHT <= BALL[i].Y) {
          if (BALL[i].Y <= 0) {
            
            // 天井
            BALL[i].Y = FIELD.E0;
            BALL[i].Vy = BALL[i].Vy * FIELD.E * (-1)
          } else {
            // 床
            // 床に接触したボールは死亡
            BALL[i].Alive = 0;
            BALL[i].Vx = 0;
            BALL[i].Vy = 0;
          }
        }
        
        // 壁接触
        if (BALL[i].X <= 0 || FIELD.WIDTH <= BALL[i].X) {
          if (BALL[i].X <= 0) {
            BALL[i].X = FIELD.E0;
          } else {
            BALL[i].X = FIELD.WIDTH - FIELD.E0;
          }
          
          BALL[i].Vx = BALL[i].Vx * (-1);
        }
        
        // バー接触
        if (BAR.X <= BALL[i].X && BALL[i].X <= BAR.X + BAR.WIDTH) {
          if (Math.abs(BALL[i].Y - BAR.Y) <= BAR.HEIGHT) {
            
            // バーとボールの境界でバタつきを防ぐための処置
            BALL[i].Y = BAR.Y - BAR.E0;
            
            // バー接触後の速度計算
            BALL[i].Vy = (BALL[i].M * BALL[i].Vy - BAR.M * BAR.Vy) / BALL[i].M;
            
            // Vyが初速度より減速した場合は、初速度に戻す
            BALL[i].Vy = Math.abs(BALL[i].Vy) > BALL[i].Vy0 ? (BALL[i].Vy * BAR.E * (-1)) : (BALL[i].Vy0 * (-1));
          }
        }
        
        // ブロック接触
        for (var bi = 0; bi < BLOCK.length; bi++) {
          var xtouch = 0;
          var ytouch = 0;
          
          if (BLOCK[bi] == null) {
            continue;
          }
          
          if (BLOCK[bi].Alive == 0) {
            continue;
          }
          
          if ((Math.abs(BALL[i].X - BLOCK[bi].X) < BALL[i].RADIUS/2 + BLOCK[bi].WIDTH/2) &&
              (Math.abs(BALL[i].Y - BLOCK[bi].Y) < BALL[i].RADIUS/2 + BLOCK[bi].HEIGHT/2)) {
            
            BLOCK[bi].Alive = 0;
            BALL[i].Vy *= (-1);
          }
        }
        
        // 縦計算
        BALL[i].Vy += FIELD.GRAVITY * (1/FIELD.FPS);
        BALL[i].Y  += BALL[i].Vy * (1/FIELD.FPS);
        
        // 横計算
        BALL[i].X += BALL[i].Vx * (1/FIELD.FPS);
      }
    }
    
    deleteAllDeadBall();
  };
  
  // 死亡したボールを削除
  function deleteAllDeadBall() {
    var isDeadBall = 1;
    while(isDeadBall != 0) {
      isDeadBall = 0;
      for (var i = 0; i < BALL.length; i++) {
        if (BALL[i] == null) {
          continue;
        }
        
        if(BALL[i].Alive == 0) {
          delete BALL[i];
          BALL.splice(i,1);
          isDeadBall = 1;
          break;
        }
      }
    }
  }
  
  
  function drawBack() {
    ctx.fillStyle = 'rgb(0, 0, 0)';
    ctx.fillRect(0, 0, FIELD.WIDTH, FIELD.HEIGHT);
  };
  
  
  // ボールの描画
  function drawBall() {
    
    ctx.save();
    
    // 生存しているボールの数だけ描画
    for(var i = 0; i < BALL.length; i++) {
      
      if (BALL[i] == null) {
        continue;
      }
      
      if (BALL[i].Alive) {
        // 円の描画設定
        ctx.beginPath();
        ctx.arc(BALL[i].X, BALL[i].Y, BALL[i].RADIUS, 0, 2*Math.PI, true);
        ctx.closePath();
        
        // 色設定
        BALL[i].HUE += 0.5;
        ctx.strokeStyle = 'hsl(' + BALL[i].HUE + ', 50%, 50%)';
        ctx.fillStyle = 'hsl(' + BALL[i].HUE + ', 50%, 50%)';
        ctx.shadowColor = 'hsl(' + BALL[i].HUE + ', 50%, 50%)';
      }
      
      // 描画実行
      ctx.stroke();
      ctx.fill();
    
    }
    
    ctx.restore();
  };
  
  // バーの描画
  function drawBar() {
    var delay = 1;
    
    BAR.X = (mouseX + delay * BAR.X) / (delay+1);
    
    // 色設定
    ctx.fillStyle = 'rgb(255,255,255)';
    
    // バーの描画設定
    ctx.fillRect(BAR.X, BAR.Y, BAR.WIDTH, BAR.HEIGHT);
    
  };
  
  // ブロックの描画
  function drawBlock() {
    // 色設定
    ctx.fillStyle = 'rgb(0,255,0)';
    
    for (var i = 0; i < BLOCK.length; i++) {
      if (BLOCK[i] == null) {
        continue;
      }
      
      if (BLOCK[i].Alive) {
        ctx.fillRect(BLOCK[i].X, BLOCK[i].Y, BLOCK[i].WIDTH, BLOCK[i].HEIGHT);
      }
    }
  }
  
  // 初期化イベント
  window.addEventListener('load', initialize, false);
  
} ) ();
</script>
</head>
<body>
<canvas id='canvas' width=500 height=300></canvas>
<p>
左クリック: バーを下げる <br />
右クリック: ボール出現
</p>
</body>
</html>



ボールとブロックの当たり判定がイマイチなので変な動きが多いです。
他にも色々ツッコミどころはありますが、改善点含めて次回でまとめて完成としたいです。

関連ページ

canvasで少しずつ作るブロック崩し(1/5) - Segmentation Fault
canvasで少しずつ作るブロック崩し(2/5) - Segmentation Fault
canvasで少しずつ作るブロック崩し(3/5) - Segmentation Fault
canvasで少しずつ作るブロック崩し(5/5) - Segmentation Fault