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>
次回はボールを出して実際に打てるようにしたいと思います。
関連ページ
canvasで少しずつ作るブロック崩し(2/5) - Segmentation Fault
canvasで少しずつ作るブロック崩し(3/5) - Segmentation Fault
canvasで少しずつ作るブロック崩し(その4) - Segmentation Fault
canvasで少しずつ作るブロック崩し(5/5) - Segmentation Fault