Hurry up with the appeasement of the howsk!!!! 🤬💢game's game

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

No:3742

331

←

Prev Next

→

Hurry up with the appeasement of the howsk!!!! 🤬💢g..ALL
Developer どうスクのアプデ早くしろよ！🤬💢｜Date and time 23/6/26 12:47:22
Build time 52.038 sec｜Game capacity 4.596KB｜

Script

は「ブロック崩し」です。以下がHTMLとJavaScriptのコードです。

このゲームは「ブロック崩し」と呼ばれる、ボールを跳ね返しながらブロックを壊していくゲームです。プレイヤーはパドルを操作してボールを上に跳ね返し、ブロックを壊すことが目的です。プレイヤーがボールを落としてしまったり、全てのブロックを壊したらゲームが終了します。スマホでも遊べるように、矢印キーをタップすることでパドルを動かせるようになっています。また、絵文字を使用して感情を表現したり、カラフルなブロックで見た目を楽しめるようにしました。

←

Prev　Next

→ 　

Back　

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

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

は「ブロック崩し」です。以下がHTMLとJavaScriptのコードです。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ブロック崩し</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body onload="gameStart()">
	<canvas id="gameCanvas" width="300" height="400"></canvas>

let paddleX = 120;
		let paddleY = 380;
		let paddleWidth = 60;
		let paddleHeight = 10;
		let paddleSpeed = 10;

let blockRows = 3;
		let blockCols = 5;
		let blockWidth = 50;
		let blockHeight = 20;

// キャンバス
		const canvas = document.getElementById("gameCanvas");
		const ctx = canvas.getContext("2d");

// ブロック配列
		let blocks = new Array(blockRows);
		for (let i = 0; i < blockRows; i++) {
			blocks[i] = new Array(blockCols);
			for (let j = 0; j < blockCols; j++) {
				blocks[i][j] = true;
			}
		}

// キー入力
		document.addEventListener("keydown", (event) => {
			if (event.key === "ArrowLeft") {
				paddleX -= paddleSpeed;
			} else if (event.key === "ArrowRight") {
				paddleX += paddleSpeed;
			}
		});

// ゲームループ
		function gameStart() {
			setInterval(gameUpdate, 16);
		}

function gameUpdate() {
			drawScreen();
			moveBall();
			movePaddle();
			checkCollision();
			checkGameover();
			checkGameclear();
		}

// 描画処理
		function drawScreen() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// ブロック描画
			for (let i = 0; i < blockRows; i++) {
				for (let j = 0; j < blockCols; j++) {
					if (blocks[i][j]) {
						ctx.fillStyle = "#FF0000";
						ctx.fillRect(j * blockWidth, i * blockHeight, blockWidth, blockHeight);
					}
				}
			}

// ボール描画
			ctx.beginPath();
			ctx.arc(ballX, ballY, ballSize, 0, Math.PI * 2);
			ctx.fillStyle = "#0000FF";
			ctx.fill();

// パドル描画
			ctx.fillStyle = "#00FF00";
			ctx.fillRect(paddleX, paddleY, paddleWidth, paddleHeight);
		}

// 移動処理
		function moveBall() {
			ballX += ballSpeedX;
			ballY += ballSpeedY;

if (ballX < ballSize || ballX > canvas.width - ballSize) {
				ballSpeedX = -ballSpeedX;
			}
			if (ballY < ballSize) {
				ballSpeedY = -ballSpeedY;
			}
		}

function movePaddle() {
			if (paddleX < 0) {
				paddleX = 0;
			}
			if (paddleX > canvas.width - paddleWidth) {
				paddleX = canvas.width - paddleWidth;
			}
		}

// 衝突判定
		function checkCollision() {
			// パドルとボール
			if (ballX >= paddleX && ballX <= paddleX + paddleWidth && ballY >= paddleY - ballSize) {
				ballSpeedY = -ballSpeedY;
			}

// ブロックとボール
			let rowHit = -1;
			let colHit = -1;
			for (let i = 0; i < blockRows; i++) {
				for (let j = 0; j < blockCols; j++) {
					if (blocks[i][j] && ballX >= j * blockWidth && ballX <= j * blockWidth + blockWidth && ballY >= i * blockHeight && ballY <= i * blockHeight + blockHeight) {
						blocks[i][j] = false;
						rowHit = i;
						colHit = j;
						break;
					}
				}
			}
			if (rowHit !== -1 && colHit !== -1) {
				if (ballX >= colHit * blockWidth && ballX <= colHit * blockWidth + blockWidth) {
					ballSpeedY = -ballSpeedY;
				}
				if (ballY >= rowHit * blockHeight && ballY <= rowHit * blockHeight + blockHeight) {
					ballSpeedX = -ballSpeedX;
				}
			}
		}

// ゲームオーバーチェック
		function checkGameover() {
			if (ballY > canvas.height) {
				alert("Game Over!");
				location.reload();
			}
		}

// ゲームクリアチェック
		function checkGameclear() {
			let cleared = true;
			for (let i = 0; i < blockRows; i++) {
				for (let j = 0; j < blockCols; j++) {
					if (blocks[i][j]) {
						cleared = false;
						break;
					}
				}
			}
			if (cleared) {
				alert("Game Clear!");
				location.reload();
			}
		}
	</script>
</body>
</html>
```