1pxブロック崩し *1ピクセル単位のブロック崩しです。 *ブロックは1ピクセルであり、ボールは100ピクセルです。 *ブロックは虹色のグラデーションをしています。 *ボールはブロックを貫通します。 *ボールに触れたブロックは、美しくパラパラと下に落ちます。's game | AI game creator

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

No:4368

2119

1pxブロック崩し *1ピクセル単位のブロック崩しです。 *ブロックは1ピクセルであり、ボールは..ALL
Developer もちきなこ｜Date and time 23/6/27 20:47:20
Build time 43.511 sec｜Game capacity 3.987KB｜

HTMLコード：

JavaScriptコードについての説明：この1pxブロック崩しは、HTML5のCanvasを使用しています。ゲーム画面は、ブラウザのウィンドウサイズに動的に合わせられます。 `ballX`、`ballY`、`ballSpeedX`、`ballSpeedY`は、それぞれボールの位置と速度を意味します。`ballSize`には、ボールの半径を設定します。 `blockWidth`と`blockHeight`は、それぞれブロックの幅と高さを表します。`numCols`と`numRows`には、ブロックの列数と行数を設定します。 `blocks`は、二次元配列のブロックを保持します。各ブロックには、その位置情報と生死状態を示す`x`、`y`、`alive`プロパティがあります。 `drawBall()`関数は、白いボールを描画します。 `drawBlocks()`関数は、虹色のグラデーションがかかったブロックを描画します。`blocks`配列をループし、`alive`が`true`の場合にのみ、ブロックを描画します。 `collisionDetection()`関数は、ボールがブロックに当たったかどうかを判定します。`blocks`配列をループし、ボールがブロックに当たる場合は、ブロックを`alive`から`false`に変更し、ボールの`ballSpeedY`を反転させます。 `moveBall()`関数は、ボールを移動します。ボールがウィンドウの外に出る場合は、対応する速度を反転させます。 `draw()`関数は、ループを実行し、ゲーム画面を描画します。ループは、`requestAnimationFrame()`メソッドで呼び出されます。最後に、`draw()`関数の呼び出しで、ゲームの実行が開始されます。

→ 　

3　

1　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

HTMLコード：

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>1pxブロック崩し</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: black;
		}
		canvas {
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		const canvas = document.getElementById("canvas");
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

const ctx = canvas.getContext("2d");

let ballX = canvas.width/2;
		let ballY = canvas.height-100;
		let ballSpeedX = 5;
		let ballSpeedY = -5;
		const ballSize = 100;

const blockWidth = 1;
		const blockHeight = 1;
		const numCols = canvas.width;
		const numRows = canvas.height/2;

let blocks = [];

for (let i = 0; i < numCols; i++) {
			blocks[i] = [];
			for (let j = 0; j < numRows; j++) {
				blocks[i][j] = { x: i*blockWidth, y: j*blockHeight, alive: true };
			}
		}

function drawBall() {
			ctx.beginPath();
			ctx.arc(ballX, ballY, ballSize/2, 0, Math.PI*2);
			ctx.fillStyle = "white";
			ctx.fill();
			ctx.closePath();
		}

function drawBlocks() {
			for (let i = 0; i < numCols; i++) {
				for (let j = 0; j < numRows; j++) {
					if (blocks[i][j].alive) {
						ctx.fillStyle = `hsl(${i/numCols*360}, 100%, 50%)`;
						ctx.fillRect(blocks[i][j].x, blocks[i][j].y, blockWidth, blockHeight);
					}
				}
			}
		}

function collisionDetection() {
			for (let i = 0; i < numCols; i++) {
				for (let j = 0; j < numRows; j++) {
					let b = blocks[i][j];
					if (b.alive) {
						if (ballX > b.x && ballX < b.x+blockWidth && ballY > b.y && ballY < b.y+blockHeight) {
							b.alive = false;
							ballSpeedY = -ballSpeedY;
						}
					}
				}
			}
		}

function moveBall() {
			ballX += ballSpeedX;
			ballY += ballSpeedY;
			if (ballX < ballSize/2 || ballX > canvas.width-ballSize/2) {
				ballSpeedX = -ballSpeedX;
			}
			if (ballY < ballSize/2) {
				ballSpeedY = -ballSpeedY;
			} else if (ballY > canvas.height-ballSize/2) {
				alert("Game Over");
				document.location.reload();
			}
		}

function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBall();
			drawBlocks();
			collisionDetection();
			moveBall();
			requestAnimationFrame(draw);
		}

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

JavaScriptコードについての説明：

この1pxブロック崩しは、HTML5のCanvasを使用しています。ゲーム画面は、ブラウザのウィンドウサイズに動的に合わせられます。

`ballX`、`ballY`、`ballSpeedX`、`ballSpeedY`は、それぞれボールの位置と速度を意味します。`ballSize`には、ボールの半径を設定します。

`blockWidth`と`blockHeight`は、それぞれブロックの幅と高さを表します。`numCols`と`numRows`には、ブロックの列数と行数を設定します。

`blocks`は、二次元配列のブロックを保持します。各ブロックには、その位置情報と生死状態を示す`x`、`y`、`alive`プロパティがあります。

`drawBall()`関数は、白いボールを描画します。

`drawBlocks()`関数は、虹色のグラデーションがかかったブロックを描画します。`blocks`配列をループし、`alive`が`true`の場合にのみ、ブロックを描画します。

`collisionDetection()`関数は、ボールがブロックに当たったかどうかを判定します。`blocks`配列をループし、ボールがブロックに当たる場合は、ブロックを`alive`から`false`に変更し、ボールの`ballSpeedY`を反転させます。

`moveBall()`関数は、ボールを移動します。ボールがウィンドウの外に出る場合は、対応する速度を反転させます。

`draw()`関数は、ループを実行し、ゲーム画面を描画します。ループは、`requestAnimationFrame()`メソッドで呼び出されます。

最後に、`draw()`関数の呼び出しで、ゲームの実行が開始されます。