自動車運転シミュレーター

アクセル：↑
ブレーキ：↓
ステアリング：←→
逮捕されるとゲームオーバーです
います。車の種類やコースも複数用意して楽しめます。また、危険運転をした場合は警察から追跡が始まり、逃げ切って終わるか逮捕されるかはプレイヤー次第です。ただし、当アプリは交通ルールを守ってプレイしてください。ジョークとしては、「このアプリで留年する人は交通安全のため、もう一年自転車通学しましょう」というメッセージを表示することにしました。

以下が実装例です。車の種類とコースはあくまでサンプルのため、プレイヤーが作成してもらう形となります。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>自動車運転シミュレーター</title>
	<style type="text/css">
		#game-screen {
			background-color: black;
			color: white;
			border: 2px solid white;
			padding: 10px;
			width: 80%;
			margin: 0 auto;
			text-align: center;
			font-size: 30px;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<div id="game-screen">
		<h1>自動車運転シミュレーター</h1>
		<p>アクセル：↑</p>
		<p>ブレーキ：↓</p>
		<p>ステアリング：←→</p>
		<p>逮捕されるとゲームオーバーです</p>
		<p id="message"></p>
		<canvas id="canvas" width="600" height="400"></canvas>
	</div>

	<script type="text/javascript">

		// メッセージを表示する関数
		function setMessage(msg) {
			document.getElementById("message").innerHTML = msg;
		}

		// 車の情報
		var car = {
			x: 250, // 初期座標
			y: 350,
			speed: 0,
			angle: 0,
			img: new Image(),
			width: 80,
			height: 40
		};
		car.img.src = "car.png";

		// コースの情報
		var course = {
			img: new Image(),
			width: 600,
			height: 400
		};
		course.img.src = "course.png";

		// 描画関数
		function draw() {
			var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");

			// 背景を描画
			ctx.drawImage(course.img, 0, 0, course.width, course.height);

			// 車を描画
			ctx.save();
			ctx.translate(car.x, car.y);
			ctx.rotate(car.angle);
			ctx.drawImage(car.img, -car.width/2, -car.height/2, car.width, car.height);
			ctx.restore();
		}

		// ステップ関数
		function step() {

			// 速度を更新
			car.speed += 0.1;
			if (car.speed > 10) car.speed = 10;

			// 角度を更新
			if (keys.left) {
				car.angle -= 0.05;
			}
			if (keys.right) {
				car.angle += 0.05;
			}

			// 座標を更新
			car.x += Math.sin(car.angle) * car.speed;
			car.y -= Math.cos(car.angle) * car.speed;

			// 衝突判定
			if (car.x < car.width/2 || car.x > course.width - car.width/2 ||
				car.y < car.height/2 || car.y > course.height - car.height/2) {
				setMessage("衝突しました。ゲームオーバー");
				clearInterval(gameLoop);
			}

			// 描画
			draw();
		}

		// キーの状態を保存するオブジェクト
		var keys = {
			up: false,
			left: false,
			right: false,
			down: false
		};

		// キーを押したときの処理
		window.addEventListener("keydown", function(e) {
			switch(e.keyCode) {
				case 37: // left
					keys.left = true;
					break;
				case 39: // right
					keys.right = true;
					break;
				case 38: // up
					keys.up = true;
					setMessage("");
					break;
				case 40: // down
					keys.down = true;
					break;
			}
		});

		// キーを離したときの処理
		window.addEventListener("keyup", function(e) {
			switch(e.keyCode) {
				case 37: // left
					keys.left = false;
					break;
				case 39: // right
					keys.right = false;
					break;
				case 38: // up
					keys.up = false;
					break;
				case 40: // down
					keys.down = false;
					break;
			}
		});

		// ゲームループを開始
		var gameLoop = setInterval(step, 16);

	</script>
</body>
</html>
```