A ball will fall from above. The player wins if he hits back by pressing the button at the right time.'s game

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

No:1455

134

←

Prev Next

→

A ball will fall from above. The player wins if he..ALL
Developer User3329｜Date and time 23/6/18 16:47:40
Build time 69.082 sec｜Game capacity 4.397KB｜

Script

ます。ボタンを押し続けることで力を溜めて強く打てますが、力を溜め過ぎるとミスしてしまうので注意が必要です。また、壁や障害物に当たるとミスになってしまいます。ハイスコアを目指して挑戦しましょう！以下が、1枚のhtmlファイルとして実装されたゲームのコードです。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

ます。ボタンを押し続けることで力を溜めて強く打てますが、力を溜め過ぎるとミスしてしまうので注意が必要です。また、壁や障害物に当たるとミスになってしまいます。ハイスコアを目指して挑戦しましょう！

以下が、1枚のhtmlファイルとして実装されたゲームのコードです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>落ちてくる球ゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}
		canvas {
			display: block;
			border: 1px solid #000;
		}
		button {
			font-size: 1.5rem;
			padding: 1rem 2rem;
			background-color: #0095DD;
			color: #fff;
			border: none;
			border-radius: 5px;
			margin-top: 1rem;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="600"></canvas>
	<button id="button">パワーチャージ！</button>

// ゲーム開始ボタンの設定
				document.querySelector("#button").addEventListener("click", () => {
					if (this.isPlaying) {
						return;
					}
					this.start();
				});

// プレイヤーオブジェクトの初期化
				this.player.power = 0;

// スコアの初期化
				this.score = 0;

// ゲームループの開始
				window.requestAnimationFrame(() => {
					this.update();
				});
			},
			start() {
				this.isPlaying = true;

// ボールの初期化
				this.ball.x = Math.random() * (this.canvas.width - this.ball.radius * 2) + this.ball.radius;
				this.ball.y = 50;
				this.ball.speedX = (Math.random() - 0.5) * 10;

// プレイヤーオブジェクトの初期化
				this.player.power = 0;

// スコアの初期化
				this.score = 0;
			},
			update() {
				// キー入力の取得
				window.addEventListener("keydown", (e) => {
					if (e.code === "Space") {
						this.player.power += 1;
					}
				});
				window.addEventListener("keyup", (e) => {
					if (e.code === "Space") {
						// 打ち出す
						this.ball.speedY = -5 * this.player.power;
						this.ball.speedX = (Math.random() - 0.5) * 10;

// 力をリセット
						this.player.power = 0;
					}
				});

// ボールの移動
				this.ball.x += this.ball.speedX;
				this.ball.y += this.ball.speedY;

// 壁に当たったら跳ね返る
				if (this.ball.x + this.ball.radius > this.canvas.width || this.ball.x - this.ball.radius < 0) {
					this.ball.speedX = -this.ball.speedX;
				}
				if (this.ball.y - this.ball.radius < 0) {
					this.ball.speedY = -this.ball.speedY;
				}

// プレイヤーに当たったら跳ね返る
				if (this.ball.y + this.ball.radius > this.player.y && this.ball.x > this.player.x && this.ball.x < this.player.x + this.player.width) {
					this.ball.speedY = -this.ball.speedY;
					this.score += 1;
				}

// ゲームオーバー
				if (this.ball.y + this.ball.radius > this.canvas.height) {
					this.isPlaying = false;
					alert(`GameOver!\nScore: ${this.score}`);
				}

// ゲームの画面の描画
				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
				this.ctx.beginPath();
				this.ctx.arc(this.ball.x, this.ball.y, this.ball.radius, 0, Math.PI*2);
				this.ctx.fillStyle = "#f44336";
				this.ctx.fill();
				this.ctx.closePath();

this.ctx.beginPath();
				this.ctx.rect(this.player.x, this.player.y, this.player.width, this.player.height);
				this.ctx.fillStyle = "#0095DD";
				this.ctx.fill();
				this.ctx.closePath();

// スコアの表示
				this.ctx.font = "bold 24px Arial";
				this.ctx.fillStyle = "#000";
				this.ctx.fillText(`Score: ${this.score}`, 20, 30);

// ゲームループの再開
				if (this.isPlaying) {
					window.requestAnimationFrame(() => {
						this.update();
					});
				}
			},
		};

// ゲームの初期化
		game.init();
	</script>
</body>
</html>