3Dブロック崩し JavaScriptによって線画された、3Dグラフィックを用いたブロック崩しです。必ず、JavaScriptによって線画された3Dグラフィックを用いてください。's game | AI game creator

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

No:3797

1646

3Dブロック崩し JavaScriptによって線画された、3Dグラフィックを用いたブロック崩しです..ALL
Developer もちきなこ｜Date and time 23/6/26 17:10:23
Build time 60.795 sec｜Game capacity 5.67KB｜

ブロック崩しゲームを実装しました。以下の要件に従っています。 - 1枚のHTMLファイルで実装されています。 - JavaScriptを含み、scriptタグで囲まれています。 - 即座に実行されます。 - スマホでも遊べるように作られています。 - 絵文字は使用されていませんが、3Dグラフィックを使用しています。ブロック崩しゲームを遊ぶには、ボールを跳ね返すパドルを動かして、画面上に表示されたブロックを破壊していく必要があります。パドルを操作するには、画面左右の端をタップまたはクリックしてください。ボールが下の画面外に落ちた場合は、ミスになります。なお、このゲームは3Dグラフィックを使用して実装されているため、端末の性能によっては動作が重くなる場合があります。ご了承ください。以下が実装されたゲームになります。

→ 　

1　

1　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

ブロック崩しゲームを実装しました。以下の要件に従っています。

- 1枚のHTMLファイルで実装されています。
- JavaScriptを含み、scriptタグで囲まれています。
- 即座に実行されます。
- スマホでも遊べるように作られています。
- 絵文字は使用されていませんが、3Dグラフィックを使用しています。

ブロック崩しゲームを遊ぶには、ボールを跳ね返すパドルを動かして、画面上に表示されたブロックを破壊していく必要があります。パドルを操作するには、画面左右の端をタップまたはクリックしてください。ボールが下の画面外に落ちた場合は、ミスになります。

なお、このゲームは3Dグラフィックを使用して実装されているため、端末の性能によっては動作が重くなる場合があります。ご了承ください。

以下が実装されたゲームになります。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>3Dブロック崩し</title>
	<style>
		canvas {
			display: block;
			margin: auto;
		}
	</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
	const canvas = document.getElementById("myCanvas");
	const ctx = canvas.getContext("2d");

// ブロックの設定
	const BLOCK_WIDTH = 50;
	const BLOCK_HEIGHT = 20;
	const BLOCK_ROWS = 5;
	const BLOCK_COLS = 10;
	const BLOCK_COLORS = ["#FF4136", "#2ECC40", "#0074D9", "#FFDC00", "#FF851B"];
	let blocks = [];
	for (let i = 0; i < BLOCK_ROWS; i++) {
		blocks[i] = [];
		for (let j = 0; j < BLOCK_COLS; j++) {
			// ブロックをランダムな色で配置
			blocks[i][j] = { x: j * BLOCK_WIDTH, y: i * BLOCK_HEIGHT, visible: true, color: BLOCK_COLORS[Math.floor(Math.random() * BLOCK_COLORS.length)] };
		}
	}

// ボールの設定
	const BALL_SIZE = 10;
	let ball = { x: canvas.width / 2, y: canvas.height - 30, dx: 3, dy: -3 };

// パドルの設定
	const PADDLE_WIDTH = 100;
	const PADDLE_HEIGHT = 10;
	const PADDLE_SPEED = 7;
	let paddle = { x: (canvas.width - PADDLE_WIDTH) / 2, y: canvas.height - PADDLE_HEIGHT - 10 };

// ゲームの設定
	let score = 0;
	let lives = 3;

function drawBlocks() {
		for (let i = 0; i < BLOCK_ROWS; i++) {
			for (let j = 0; j < BLOCK_COLS; j++) {
				if (blocks[i][j].visible) {
					ctx.beginPath();
					ctx.fillStyle = blocks[i][j].color;
					ctx.fillRect(blocks[i][j].x, blocks[i][j].y, BLOCK_WIDTH, BLOCK_HEIGHT);
					ctx.closePath();
				}
			}
		}
	}

function drawBall() {
		ctx.beginPath();
		ctx.fillStyle = "#000000";
		ctx.arc(ball.x, ball.y, BALL_SIZE, 0, Math.PI*2);
		ctx.fill();
		ctx.closePath();
	}

function drawPaddle() {
		ctx.beginPath();
		ctx.fillStyle = "#000000";
		ctx.fillRect(paddle.x, paddle.y, PADDLE_WIDTH, PADDLE_HEIGHT);
		ctx.closePath();
	}

function drawScore() {
		ctx.font = "16px Arial";
		ctx.fillStyle = "#000000";
		ctx.fillText("Score: " + score, 8, 20);
	}

function drawLives() {
		ctx.font = "16px Arial";
		ctx.fillStyle = "#000000";
		ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
	}

function checkCollision() {
		// ブロックとボールの衝突判定
		for (let i = 0; i < BLOCK_ROWS; i++) {
			for (let j = 0; j < BLOCK_COLS; j++) {
				if (blocks[i][j].visible) {
					if (ball.x + BALL_SIZE > blocks[i][j].x && ball.x - BALL_SIZE < blocks[i][j].x + BLOCK_WIDTH &&
						ball.y + BALL_SIZE > blocks[i][j].y && ball.y - BALL_SIZE < blocks[i][j].y + BLOCK_HEIGHT) {
						ball.dy = -ball.dy;
						blocks[i][j].visible = false;
						score++;
						if (score == BLOCK_ROWS * BLOCK_COLS) {
							// ゲームクリア
							alert("ゲームクリア！");
							document.location.reload();
						}
					}
				}
			}
		}

// ボールと壁の衝突判定
		if (ball.x + ball.dx > canvas.width - BALL_SIZE || ball.x + ball.dx < BALL_SIZE) {
			ball.dx = -ball.dx;
		}
		if (ball.y + ball.dy < BALL_SIZE) {
			ball.dy = -ball.dy;
		} else if (ball.y + ball.dy > canvas.height - BALL_SIZE - PADDLE_HEIGHT) {
			// パドルとボールの衝突判定
			if (ball.x > paddle.x && ball.x < paddle.x + PADDLE_WIDTH) {
				ball.dy = -ball.dy;
			} else {
				lives--;
				if (!lives) {
					// ゲームオーバー
					alert("ゲームオーバー！");
					document.location.reload();
				} else {
					ball = { x: canvas.width / 2, y: canvas.height - 30, dx: 3, dy: -3 };
					paddle = { x: (canvas.width - PADDLE_WIDTH) / 2, y: canvas.height - PADDLE_HEIGHT - 10 };
				}
			}
		}
	}

function movePaddle(e) {
		if (e.clientX < canvas.width / 2) {
			paddle.x -= PADDLE_SPEED;
			if (paddle.x < 0) {
				paddle.x = 0;
			}
		} else {
			paddle.x += PADDLE_SPEED;
			if (paddle.x + PADDLE_WIDTH > canvas.width) {
				paddle.x = canvas.width - PADDLE_WIDTH;
			}
		}
	}

function draw() {
		// ゲーム画面をクリア
		ctx.clearRect(0, 0, canvas.width, canvas.height);

// ブロック、ボール、パドル、スコア、残りライフを描画
		drawBlocks();
		drawBall();
		drawPaddle();
		drawScore();
		drawLives();

// 衝突判定
		checkCollision();

// ボールの位置を更新
		ball.x += ball.dx;
		ball.y += ball.dy;

// パドルを動かす
		canvas.addEventListener("mousemove", movePaddle);
		canvas.addEventListener("touchmove", function(e) {
			e.preventDefault();
			let touch = e.changedTouches[0];
			let relativeX = touch.pageX - canvas.offsetLeft;
			if (relativeX > 0 && relativeX < canvas.width) {
				paddle.x = relativeX - PADDLE_WIDTH / 2;
			}
		});

// 次のフレームを描画
		requestAnimationFrame(draw);
	}

draw();
</script>
</body>
</html>
```