Kindly designed racing game's game

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

No:3710

1914

←

Prev Next

→

Kindly designed racing game
Developer AI絵師｜Date and time 23/6/26 10:08:45
Build time 40.958 sec｜Game capacity 3.636KB｜

Script

を作ってみました。以下が実装したHTMLファイルになります。

このレースゲームでは、プレイヤーは車を操作して、障害物を避けながらスコアを稼ぎます。車は矢印キーを使用して操作します。ゲームオーバーになると、スコアが表示されてアラートが表示されます。また、スマホでもプレイ可能なように、レスポンシブデザインに対応しています。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

を作ってみました。以下が実装したHTMLファイルになります。

```
<!DOCTYPE html>
<html>
<head>
	<title>レースゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			padding: 0;
			margin: 0;
			background: #7d9099;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 18px;
			font-family: Arial, sans-serif;
		}

canvas {
			border: 2px solid black;
		}

.score {
			color: white;
			font-size: 30px;
			margin-bottom: 20px;
		}

@media only screen and (max-width: 600px) {
			.score {
				font-size: 20px;
			}
		}
	</style>
</head>
<body>
	<p class="score">0</p>
	<canvas id="canvas" width="500" height="500"></canvas>
	<script>
	// 障害物と車のクラスを定義
	class Obstacle {
		constructor(x, y, width, height, speed) {
			this.x = x;
			this.y = y;
			this.width = width;
			this.height = height;
			this.speed = speed;
		}

draw(ctx) {
			ctx.fillStyle = "red";
			ctx.fillRect(this.x, this.y, this.width, this.height);
		}

move() {
			this.y += this.speed;
		}

collidesWith(car) {
			return this.y + this.height >= car.y &&
				this.y <= car.y + car.height &&
				this.x + this.width >= car.x &&
				this.x <= car.x + car.width;
		}
	}

class Car {
		constructor(x, y, width, height) {
			this.x = x;
			this.y = y;
			this.width = width;
			this.height = height;
			this.speed = 10;
		}

draw(ctx) {
			ctx.fillStyle = "blue";
			ctx.fillRect(this.x, this.y, this.width, this.height);
		}

moveLeft() {
			this.x -= this.speed;
		}

moveRight() {
			this.x += this.speed;
		}

moveUp() {
			this.y -= this.speed;
		}

moveDown() {
			this.y += this.speed;
		}
	}

// ゲームの初期化
	let canvas = document.getElementById("canvas");
	let ctx = canvas.getContext("2d");

let score = 0;
	
	let car = new Car(225, 450, 50, 50);

let obstacle1 = new Obstacle(100, 0, 50, 50, 5);
	let obstacle2 = new Obstacle(200, -100, 50, 50, 10);
	let obstacle3 = new Obstacle(300, -200, 50, 50, 7);
	let obstacles = [obstacle1, obstacle2, obstacle3];

// ゲームループ
	function gameLoop() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);

// 障害物を描画し移動させる
		obstacles.forEach(function(obstacle) {
			obstacle.draw(ctx);
			obstacle.move();

if (obstacle.collidesWith(car)) {
				alert("ゲームオーバー！スコアは" + score + "です。");
				clearInterval(gameInterval);
			}

// 画面外に出た場合、再利用する
			if (obstacle.y > canvas.height) {
				obstacle.y = -50;
				obstacle.speed += 1;
				score += 1;
			}
		});

// 車を描画する
		car.draw(ctx);

// スコアを更新する
		document.querySelector(".score").innerHTML = score;
	}

// イベントリスナーを追加する
	window.addEventListener("keydown", function(event) {
		if (event.key === "ArrowLeft") {
			car.moveLeft();
		}

if (event.key === "ArrowRight") {
			car.moveRight();
		}

if (event.key === "ArrowUp") {
			car.moveUp();
		}

if (event.key === "ArrowDown") {
			car.moveDown();
		}
	});

// ゲームループを開始する
	let gameInterval = setInterval(gameLoop, 1000 / 60);
	</script>
</body>
</html>
```