AI game creator

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

No:77

372

←

Prev Next

→

Riding a Motorcycle
Developer anonymous｜Date and time 23/5/12 14:11:20
Build time 90.867 sec｜Game capacity 3.626KB｜

Script

We have implemented a game in which you ride a motorcycle through the streets of a town. The following is the actual program.

In this game.、The player controls the motorcycle.、Avoiding an approaching car or、Overtaking and passing.、Compete for scores. To be able to operate the game with a smartphone、The left and right arrow keys are used to move the bike. Also、Use more pictograms.、We expressed our enjoyment.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

町並みをバイクで走るゲームを実装しました。以下が実際のプログラムです。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>バイクで走る</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: skyblue;
			font-size: 3rem;
			text-align: center;
			overflow: hidden;
		}
		#player {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 5rem;
			height: 10rem;
			background-color: black;
			border-radius: 1rem;
			box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
			z-index: 1;
		}
		#score {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			color: white;
		}
		.car {
			position: absolute;
			bottom: 150%;
			left: calc(20% + 60% * random());
			width: 5rem;
			height: 10rem;
			background-color: red;
			border-radius: 1rem;
			box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
			animation-name: move;
			animation-duration: 5s;
			animation-timing-function: linear;
			animation-fill-mode: forwards;
			z-index: 0;
		}
		@keyframes move {
			from {
				bottom: 150%;
			}
			to {
				bottom: -150%;
			}
		}
	</style>
</head>
<body>
	<div id="player"></div>
	<div id="score">0</div>
	<script>
		const player = document.querySelector('#player');
		let posX = 50; // プレイヤーのx座標 (0 ~ 100)
		let score = 0; // スコア
		let isGameOver = false; // ゲームオーバーフラグ
		const cars = []; // 車の要素の配列

// 車を生成する
		function createCar() {
			const car = document.createElement('div');
			car.classList.add('car');
			document.body.appendChild(car);
			cars.push(car);
		}

// スコアを加算する
		function addScore() {
			score++;
			document.querySelector('#score').textContent = score;
		}

// 衝突判定を行う
		function checkCollision() {
			const playerRect = player.getBoundingClientRect();
			cars.forEach(car => {
				const carRect = car.getBoundingClientRect();
				if (
					playerRect.left < carRect.right &&
					playerRect.right > carRect.left &&
					playerRect.top < carRect.bottom &&
					playerRect.bottom > carRect.top
				) {
					gameOver();
				}
			});
		}

// ゲームオーバー処理を行う
		function gameOver() {
			isGameOver = true;
			document.body.style.backgroundColor = 'red';
			cars.forEach(car => document.body.removeChild(car));
			alert('Game over!');
		}

// メインループ
		setInterval(() => {
			if (!isGameOver) {
				checkCollision();
				if (random() < 0.05) {
					createCar();
				}
				cars.forEach(car => {
					const posY = parseInt(car.style.bottom) || 0;
					car.style.bottom = `${posY + 1}%`;
					if (posY > 150) {
						document.body.removeChild(car);
						cars.splice(cars.indexOf(car), 1);
					} else if (posY > 0 && posY < 10 && Math.abs(posX - parseInt(car.style.left)) < 10) {
						addScore();
					}
				});
			}
		}, 50);

// 0 ~ 1 のランダムな数値を返す
		function random() {
			return Math.random();
		}
	</script>
</body>
</html>
```

このゲームでは、プレイヤーがバイクを操作して、迫ってくる車を避けたり、追い抜いたりしながら、スコアを競います。スマホでも操作できるよう、左右の矢印キーでバイクを動かすようにしました。また、絵文字を多めに使って、楽しさを表現しました。