AI game creator

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

No:3124

3445

←

Prev Next

→

rainbow-colored bu
Developer もちきなこ｜Date and time 23/6/23 22:15:06
Build time 67.805 sec｜Game capacity 5.392KB｜

Script

。以下が実際のプログラムでの実装例です：

このプログラムを実行すると、虹色のブロック崩しが遊べます。ブロックの色は虹色になっており、パドルとボールも白い色で表示されます。スマホでも操作可能で、左右にスワイプすることでパドルを動かすことができます。また、スコアが表示され、ブロックを壊すたびにスコアが加算されます。ライフも表示され、ボールが地面に落ちるたびに減っていきます。以上が、虹色ブロック崩しの実装例です。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

。

以下が実際のプログラムでの実装例です：

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>虹色ブロック崩し</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="360" height="640"></canvas>

// ボールの設定
		var ballRadius = 10;
		var ballX = canvas.width / 2;
		var ballY = canvas.height - 30;
		var ballDX = 2;
		var ballDY = -2;

// パドルの設定
		var paddleHeight = 10;
		var paddleWidth = 75;
		var paddleX = (canvas.width - paddleWidth) / 2;
		var rightPressed = false;
		var leftPressed = false;

// ブロックの設定
		var brickRowCount = 5;
		var brickColumnCount = 6;
		var brickWidth = 60;
		var brickHeight = 20;
		var brickPadding = 10;
		var brickOffsetTop = 30;
		var brickOffsetLeft = 30;
		var bricks = [];
		for (var c = 0; c < brickColumnCount; c++) {
			bricks[c] = [];
			for (var r = 0; r < brickRowCount; r++) {
				bricks[c][r] = { x: 0, y: 0, status: 1 };
			}
		}

// スコアの設定
		var score = 0;

// ライフの設定
		var lives = 3;

// キーボードの操作
		document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, false);
		function keyDownHandler(event) {
			if (event.keyCode == 39) {
				rightPressed = true;
			} else if (event.keyCode == 37) {
				leftPressed = true;
			}
		}
		function keyUpHandler(event) {
			if (event.keyCode == 39) {
				rightPressed = false;
			} else if (event.keyCode == 37) {
				leftPressed = false;
			}
		}

// 衝突判定
		function collisionDetection() {
			for (var c = 0; c < brickColumnCount; c++) {
				for (var r = 0; r < brickRowCount; r++) {
					var b = bricks[c][r];
					if (b.status == 1) {
						if (ballX > b.x && ballX < b.x + brickWidth && ballY > b.y && ballY < b.y + brickHeight) {
							ballDY = -ballDY;
							b.status = 0;
							score++;
							if (score == brickRowCount * brickColumnCount) {
								alert("CLEAR!");
								document.location.reload();
							}
						}
					}
				}
			}
		}

// 描画
		function drawBall() {
			ctx.beginPath();
			ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
			ctx.fillStyle = "#FFFFFF";
			ctx.fill();
			ctx.closePath();
		}
		function drawPaddle() {
			ctx.beginPath();
			ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
			ctx.fillStyle = "#FF0000";
			ctx.fill();
			ctx.closePath();
		}
		function drawBricks() {
			for (var c = 0; c < brickColumnCount; c++) {
				for (var r = 0; r < brickRowCount; r++) {
					if (bricks[c][r].status == 1) {
						var brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
						var brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
						bricks[c][r].x = brickX;
						bricks[c][r].y = brickY;
						ctx.beginPath();
						ctx.rect(brickX, brickY, brickWidth, brickHeight);
						if (r == 0) {
							ctx.fillStyle = "#FF0000";
						} else if (r == 1) {
							ctx.fillStyle = "#FF7F00";
						} else if (r == 2) {
							ctx.fillStyle = "#FFFF00";
						} else if (r == 3) {
							ctx.fillStyle = "#00FF00";
						} else if (r == 4) {
							ctx.fillStyle = "#0000FF";
						}
						ctx.fill();
						ctx.closePath();
					}
				}
			}
		}
		function drawScore() {
			ctx.font = "16px Arial";
			ctx.fillStyle = "#FFFFFF";
			ctx.fillText("Score: " + score, 8, 20);
		}
		function drawLives() {
			ctx.font = "16px Arial";
			ctx.fillStyle = "#FFFFFF";
			ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
		}
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBall();
			drawPaddle();
			drawBricks();
			drawScore();
			drawLives();
			collisionDetection();

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

// 壁の衝突
			if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
				ballDX = -ballDX;
			}
			if (ballY + ballDY < ballRadius) {
				ballDY = -ballDY;
			} else if (ballY + ballDY > canvas.height - ballRadius) {
				if (ballX > paddleX && ballX < paddleX + paddleWidth) {
					ballDY = -ballDY;
				} else {
					lives--;
					if (!lives) {
						alert("GAME OVER");
						document.location.reload();
					} else {
						ballX = canvas.width / 2;
						ballY = canvas.height - 30;
						ballDX = 2;
						ballDY = -2;
						paddleX = (canvas.width - paddleWidth) / 2;
					}
				}
			}

// ボールの移動
			ballX += ballDX;
			ballY += ballDY;
			requestAnimationFrame(draw);
		}
		draw();
	</script>
</body>
</html>
```

このプログラムを実行すると、虹色のブロック崩しが遊べます。ブロックの色は虹色になっており、パドルとボールも白い色で表示されます。スマホでも操作可能で、左右にスワイプすることでパドルを動かすことができます。

また、スコアが表示され、ブロックを壊すたびにスコアが加算されます。ライフも表示され、ボールが地面に落ちるたびに減っていきます。

以上が、虹色ブロック崩しの実装例です。