ブロック崩し
ブロック崩し
ブロック崩し
以下がブロック崩しの実装例です。jQueryを使用しています。 <!DOCTYPE html> <html> <head> <title>ブロック崩し</title> <style> #game-board { width: 400px; height: 400px; border: 1px solid black; position: relative; } #ball { width: 20px; height: 20px; background-color: red; border-radius: 50%; position: absolute; } #paddle { width: 80px; height: 10px; background-color: blue; position: absolute; bottom: 0; } .brick { width: 50px; height: 20px; background-color: green; border: 1px solid black; position: absolute; top: 50px; left: 0; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function() { // ボールの初期位置と速度 var ballX = 200; var ballY = 200; var ballSpeedX = 3; var ballSpeedY = -3; // パドルの初期位置と速度 var paddleX = 160; var paddleSpeed = 5; // ブロックの配列 var bricks = []; for(var i=0; i<8; i++) { for(var j=0; j<4; j++) { var brick = $('<div></div>').addClass('brick').css({top: j*30, left: i*55}); $('#game-board').append(brick); bricks.push(brick[0]); // DOM要素だけを入れた配列を作成 } } // ボールとパドルの初期表示 $('#ball').css({left: ballX, top: ballY}); $('#paddle').css({left: paddleX}); // ボールの移動と衝突判定 setInterval(function() { // ボールの移動 ballX += ballSpeedX; ballY += ballSpeedY; $('#ball').css({left: ballX, top: ballY}); // ゲームクリア判定 if(bricks.length === 0) { alert('おめでとう!ブロックを全部壊しました!'); location.reload(); } // 壁との衝突判定 if(ballX <= 0 || ballX >= 380) { ballSpeedX = -ballSpeedX; } if(ballY <= 0) { ballSpeedY = -ballSpeedY; } if(ballY >= 380) { // ミスしたとき alert('ゲームオーバー'); location.reload(); } // パドルとの衝突判定 if(ballY >= 370 && ballX >= paddleX && ballX <= paddleX + 80) { ballSpeedY = -ballSpeedY; } // ブロックとの衝突判定 var collision = false; for(var i=0; i<bricks.length; i++) { var brick = bricks[i]; var rect1 = $('#ball')[0].getBoundingClientRect(); var rect2 = brick.getBoundingClientRect(); if(rect1.right >= rect2.left && rect1.left <= rect2.right && rect1.bottom >= rect2.top && rect1.top <= rect2.bottom) { ballSpeedY = -ballSpeedY; collision = true; brick.remove(); bricks.splice(i, 1); break; } } // ジョークメッセージ表示 if(collision) { var jokes = ['ホントに壊れそうだった', '正確にどこを狙ってたんですか?', 'ああ、これはナイスショット!', '爽快感に次ぐ爽快感!']; var jokeIndex = Math.floor(Math.random() * jokes.length); var joke = $('<div></div>').text(jokes[jokeIndex]).addClass('joke').appendTo('body'); setTimeout(function() { joke.remove(); }, 2000); } }, 30); // パドルの移動 $(document).on('keydown', function(event) { if(event.keyCode === 37) { // 左矢印キー paddleX -= paddleSpeed; if(paddleX < 0) { paddleX = 0; } $('#paddle').css({left: paddleX}); } else if(event.keyCode === 39) { // 右矢印キー paddleX += paddleSpeed; if(paddleX > 320) { paddleX = 320; } $('#paddle').css({left: paddleX}); } }); }); </script> </head> <body> <h1>ブロック崩し</h1> <div id="game-board"> <div id="ball"></div> <div id="paddle"></div> </div> </body> </html>