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

HTML5のcanvasとJavascriptで少しづつブロック崩しを作っていこうと思います。目標はぶろっくでポン！みたいに重力+複数のボールを扱えるブロック崩しにすること。だいたい5回分ぐらいで完成を想定。

初回はとりあえずマウスで動かせるバーを作ります。

マウスで動くバー

ソースコード

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

  var canvas;
  var ctx;
  var width;
  var height;
  var barX;
  var mouseX;
  var mouseY;
  
  var BAR = {
    'HEIGHT' : 10,
    'WIDTH'  : 50,
    'UNDER'  : 20,
  };
  
  // 初期化処理
  function initialize() {
    canvas = document.getElementById('canvas');
    if(!canvas && !canvas.getContext) {
      return false;
    }
    
    ctx = canvas.getContext('2d');
    width = ctx.canvas.width ;
    height = ctx.canvas.height;
    
    // バーの初期位置は中心
    mouseX = width/2;
    barX = mouseX;
    canvas.addEventListener('mousemove', getMousePosition, false);
    setInterval(drawBar, 10);
  };
  
  
  // マウス座標の更新
  function getMousePosition(e) {
    var rect = e.target.getBoundingClientRect();
    mouseX = Math.floor(e.clientX - rect.left);
    mouseY = Math.floor(e.clientY - rect.top);
  };
  
  
  function drawBar() {
    var delay = 5;
    
    barX = (mouseX + delay * barX) / (delay+1);
    
    ctx.save();
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(0, 0, width, height);
    
    // 色設定
    ctx.fillStyle = 'rgb(255,255,0)';
    // 円の描画設定
    ctx.fillRect(barX, height-BAR.UNDER, BAR.WIDTH, BAR.HEIGHT);
    
    // 描画実行
    ctx.stroke();
    ctx.fill();
    ctx.restore();
  };

  
  // 初期化イベント
  window.addEventListener('load', initialize, false);
  
} ) ();
</script>
</head>
<body>
<canvas id='canvas' width=500 height=300></canvas>
</body>
</html>

<html>

<head>

(function() {

var canvas;

var ctx;

var width;

var height;

var barX;

var mouseX;

var mouseY;

var BAR = {

'HEIGHT' : 10,

'WIDTH' : 50,

'UNDER' : 20,

};

// 初期化処理

function initialize() {

canvas = document.getElementById('canvas');

if(!canvas && !canvas.getContext) {

return false;

}

ctx = canvas.getContext('2d');

width = ctx.canvas.width ;

height = ctx.canvas.height;

// バーの初期位置は中心

mouseX = width/2;

barX = mouseX;

canvas.addEventListener('mousemove', getMousePosition, false);

setInterval(drawBar, 10);

};

// マウス座標の更新

function getMousePosition(e) {

var rect = e.target.getBoundingClientRect();

mouseX = Math.floor(e.clientX - rect.left);

mouseY = Math.floor(e.clientY - rect.top);

};

function drawBar() {

var delay = 5;

barX = (mouseX + delay * barX) / (delay+1);

ctx.save();

ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';

ctx.fillRect(0, 0, width, height);

// 色設定

ctx.fillStyle = 'rgb(255,255,0)';

// 円の描画設定

ctx.fillRect(barX, height-BAR.UNDER, BAR.WIDTH, BAR.HEIGHT);

// 描画実行

ctx.stroke();

ctx.fill();

ctx.restore();

};

// 初期化イベント

window.addEventListener('load', initialize, false);

} ) ();

</script>

</head>

<body>

</body>

</html>

次回はボールを出して実際に打てるようにしたいと思います。

マウスで動くバー

ソースコード

関連ページ

Tone.jsで音を鳴らしてみる

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

Javascriptで8パズル