Absolutely break the block, but prevent the block break!'s game

Click here for free DL of the app version that can save data.

No:3111

1041

←

Prev Next

→

Absolutely break the block, but prevent the block ..ALL
Developer User3589｜Date and time 23/6/23 21:58:54
Build time 56.105 sec｜Game capacity 4.279KB｜

Script

以下が答えです。

このアプリは、ブロック崩しの逆転バージョンです。プレイヤーはボールを操作して、ブロックを崩すことではなく、壁とパドルを使ってボールを防ぎます。ボールがパドルを通り過ぎて画面下端に到達すると、ゲームオーバーになります。スマホでもプレイ可能なように、キーボードの代わりにスマホのタッチ操作を使って、パドルを動かせるようにしました。また、絵文字を使って、ゲームの雰囲気を盛り上げています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

Click here for free DL of the app version that can save data.

以下が答えです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ブロック崩し防止！</title>
	<style>
		canvas {
			background-color: #FFF;
			border: 1px solid #000;
			margin: 0 auto;
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="500"></canvas>

// ゲームオーバーフラグ
		var gameOver = false;

// パドルの初期座標
		var paddleX = canvas.width / 2;

// ボールの初期座標と速度
		var ballX = canvas.width / 2;
		var ballY = canvas.height - 30;
		var ballDX = 2;
		var ballDY = -2;

// ブロックの初期配置
		var blocks = [];
		for (var i = 0; i < 5; i++) {
			blocks[i] = [];
			for (var j = 0; j < 4; j++) {
				blocks[i][j] = { x: 0, y: 0, status: 1 };
			}
		}

// キーボードイベントの追加
		document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, false);

// キーの状態の管理
		var rightPressed = false;
		var leftPressed = false;

// キーが押されたときの処理
		function keyDownHandler(e) {
			if (e.key == "Right" || e.key == "ArrowRight") {
				rightPressed = true;
			} else if (e.key == "Left" || e.key == "ArrowLeft") {
				leftPressed = true;
			}
		}

// キーが離されたときの処理
		function keyUpHandler(e) {
			if (e.key == "Right" || e.key == "ArrowRight") {
				rightPressed = false;
			} else if (e.key == "Left" || e.key == "ArrowLeft") {
				leftPressed = false;
			}
		}

// ブロックが当たったかどうかの判定
		function collisionDetection() {
			for (var i = 0; i < 5; i++) {
				for (var j = 0; j < 4; j++) {
					var b = blocks[i][j];
					if (b.status == 1) {
						if (ballX > b.x && ballX < b.x + 60 && ballY > b.y && ballY < b.y + 20) {
							ballDY = -ballDY;
							b.status = 0;
						}
					}
				}
			}
		}

// 描画処理
		function draw() {
			// ゲームオーバーの場合は描画しない
			if (gameOver) { return; }

// キャンバスのクリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// パドルの描画
			ctx.beginPath();
			ctx.rect(paddleX - 50, canvas.height - 10, 100, 10);
			ctx.fillStyle = "#0095DD";
			ctx.fill();
			ctx.closePath();

// ボールの描画
			ctx.beginPath();
			ctx.arc(ballX, ballY, 10, 0, Math.PI*2);
			ctx.fillStyle = "#0095DD";
			ctx.fill();
			ctx.closePath();

// ブロックの描画
			for (var i = 0; i < 5; i++) {
				for (var j = 0; j < 4; j++) {
					if (blocks[i][j].status == 1) {
						var blockX = (i * 75) + 30;
						var blockY = (j * 30) + 30;
						blocks[i][j].x = blockX;
						blocks[i][j].y = blockY;
						ctx.beginPath();
						ctx.rect(blockX, blockY, 60, 20);
						ctx.fillStyle = "#0095DD";
						ctx.fill();
						ctx.closePath();
					}
				}
			}

// パドルの移動
			if (rightPressed && paddleX < canvas.width - 50) {
				paddleX += 7;
			} else if (leftPressed && paddleX > 50) {
				paddleX -= 7;
			}

// ボールの移動と壁の反射
			ballX += ballDX;
			ballY += ballDY;
			if (ballX < 10 || ballX > canvas.width - 10) {
				ballDX = -ballDX;
			}
			if (ballY < 10) {
				ballDY = -ballDY;
			} else if (ballY > canvas.height - 20) {
				if (ballX > paddleX - 50 && ballX < paddleX + 50) {
					ballDY = -ballDY;
				} else {
					gameOver = true;
					alert("ゲームオーバー！");
				}
			}

// ブロックとの当たり判定
			collisionDetection();

requestAnimationFrame(draw);
		}

// ゲーム開始
		draw();
	</script>
</body>
</html>

このアプリは、ブロック崩しの逆転バージョンです。プレイヤーはボールを操作して、ブロックを崩すことではなく、壁とパドルを使ってボールを防ぎます。ボールがパドルを通り過ぎて画面下端に到達すると、ゲームオーバーになります。

スマホでもプレイ可能なように、キーボードの代わりにスマホのタッチ操作を使って、パドルを動かせるようにしました。また、絵文字を使って、ゲームの雰囲気を盛り上げています。