以下がブロック崩しの実装例です。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('おめでとう！ブロックを全部壊しました！');
showToast("再読み込みしてください");
}
// 壁との衝突判定
if(ballX <= 0 || ballX >= 380) {
ballSpeedX = -ballSpeedX;
}
if(ballY <= 0) {
ballSpeedY = -ballSpeedY;
}
if(ballY >= 380) { // ミスしたとき
alert('ゲームオーバー');
showToast("再読み込みしてください");
}
// パドルとの衝突判定
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>
