canvasで少しずつ作るブロック崩し(3/5)
前回はボールを1個だけ出現させてバーで跳ね返せる機能を作りました。複数のボールを出現する機能とクリックでバーを上下させボールを打ち返せる機能をつけてみます。
機能追加版
左クリック: バーを下げる
右クリック: ボール出現
ソースコード
<html> <head> <meta charset="UTF-8"> <script type="text/javascript"> (function() { var canvas; var ctx; var width; var height; var mouseX; var mouseY; var barTimerID; var pushTimerID; var popTimerID; var ball_id = 0; var ball = []; var BAR = { 'HEIGHT' : 10, 'WIDTH' : 50, 'UNDER' : 25, 'X' : 0, 'Y' : 0, 'PUSH' : 10, 'Vx' : 0, 'Vx0' : 0, 'Vy' : 0, 'Vy0' : 100, 'M' : 10, 'E' : 0.7, 'E0' : 10, }; var BALL = { 'ALIVE' : 0, 'X' : 0, 'Y' : 0, 'Vx' : 0, // ボール速度(x成分) 'Vx0' : 100, // ボールの初速 'Vy' : 0, // ボール速度(y成分) 'Vy0' : 600, // ボールの初速(y成分の最低速度) 'RADIUS' : 5, 'M' : 1, }; var FIELD = { 'GRAVITY' : 588, // 重力加速度(0.9 * FPS) 'FPS' : 60, // frame per second 'E' : 0.7, 'E0' : 10, }; var Ball = function(id) { this.id = id; 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.timerID; }; // 初期化処理 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; BAR.X = mouseX; BAR.Y = height-BAR.UNDER; canvas.addEventListener('mousemove', getMouseCoordinate, false); canvas.addEventListener('mousedown', pushBar, false); canvas.addEventListener('mouseup', popBar, false); canvas.addEventListener('contextmenu', putBall, false); setInterval(calcBallP, 1000/FIELD.FPS); 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(); // ボールの初期位置は中心 ball[ball_id] = new Ball(ball_id); ball[ball_id].Alive = 1; ball[ball_id].X = BAR.X; ball[ball_id].Y = height-BAR.UNDER; ball[ball_id].Vy = ball[ball_id].Vy0 * (-1); ball_id++; console.log(ball.length); }; // バーの収縮 function pushBar(e) { if (!e.pageX) { e = event.touches[0]; } if (e.button == 0) { //BAR.Y += BAR.PUSH; clearInterval(popTimerID); clearInterval(pushTimerID); pushTimerID = setInterval(pushBarEvent, 1000/FIELD.FPS); } }; // バーの反発 function popBar(e) { if (!e.pageX) { e = event.touches[0]; } if (e.button == 0) { //BAR.Y = height-BAR.UNDER; clearInterval(popTimerID); clearInterval(pushTimerID); pushTimerID = setInterval(popBarEvent, 1); } }; // バーの収縮処理 function pushBarEvent() { if (BAR.Y < height - BAR.UNDER + BAR.PUSH) { BAR.Vy = BAR.Vy0; BAR.Y += BAR.Vy * (FIELD.FPS/1000); } else { BAR.Vy = 0; BAR.Y = height - BAR.UNDER + BAR.PUSH; } }; // バーの反発処理 function popBarEvent() { if (BAR.Y > height-BAR.UNDER) { BAR.Vy = BAR.Vy0 * (-1); BAR.Y += BAR.Vy * (FIELD.FPS/1000); } else { BAR.Vy = 0; BAR.Y = height-BAR.UNDER; } }; // ボール位置計算 function calcBallP() { for (var i = 0; i < ball.length; i++) { // 生存しているボールのみ計算 if (ball[i].Alive) { // 床・天井接触 if (ball[i].Y <= 0 || 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 || width <= ball[i].X) { if (ball[i].X <= 0) { ball[i].X = FIELD.E0; } else { ball[i].X = 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)); } } // 縦計算 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); } } }; // 画面の描画 function drawField() { drawBack(); drawBall(); drawBar(); }; function drawBack() { ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, width, height); }; var hue = 0.5; function drawBall() { ctx.save(); // 生存しているボールの数だけ描画 for(var i = 0; i < ball.length; i++) { if (ball[i].Alive) { // 円の描画設定 ctx.beginPath(); ctx.arc(ball[i].X, ball[i].Y, ball[i].RADIUS, 0, 2*Math.PI, true); ctx.closePath(); // 色設定 hue += 0.5; ctx.strokeStyle = 'hsl(' + hue + ', 50%, 50%)'; ctx.fillStyle = 'hsl(' + hue + ', 50%, 50%)'; ctx.shadowColor = 'hsl(' + hue + ', 50%, 50%)'; ctx.shadowBlur = 10; } // 描画実行 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); }; // 初期化イベント window.addEventListener('load', initialize, false); } ) (); </script> </head> <body> <canvas id='canvas' width=500 height=300></canvas> </body> </html>
次回はブロックを作ってゲームっぽくしていきます。 あと、バーで球を打つ時の判定は改善しないとダメそう。
関連ページ
canvasで少しずつ作るブロック崩し(1/5) - Segmentation Fault
canvasで少しずつ作るブロック崩し(2/5) - Segmentation Fault
canvasで少しずつ作るブロック崩し(その4) - Segmentation Fault
canvasで少しずつ作るブロック崩し(5/5) - Segmentation Fault
