AI game creator

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

No:4294

7854

←

Prev Next

→

rainbow road
Developer もちきなこ｜Date and time 23/6/27 19:12:13
Build time 21.769 sec｜Game capacity 2.235KB｜

Script

レインボーロードは、スマホで遊べるゲームです。プレイヤーは虹色の道を歩いて、できるだけ長く進むことが目的です。転倒するとゲームオーバーになります。以下が実際のプログラムです。

このプログラムでは、虹色の道を#road要素で表現しています。プレイヤーは#player要素で表現され、画面下部に表示されます。プレイヤーの移動にはJavaScriptを利用し、mousedownイベントを拾って、タッチした位置に応じて左右に移動します。また、ゲームオーバー時にはアラートを表示して、ページをリロードしています。

←

Prev　Next

→ 　

Back　

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

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

レインボーロードは、スマホで遊べるゲームです。プレイヤーは虹色の道を歩いて、できるだけ長く進むことが目的です。転倒するとゲームオーバーになります。

以下が実際のプログラムです。

<!DOCTYPE html>
<html>
<head>
	<title>レインボーロード</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000;
		}
		#road {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 80%;
			background: linear-gradient(to top, red, orange, yellow, green, blue, indigo, violet);
		}
		#player {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			height: 5%;
			width: 10%;
			background-color: #fff;
			border-radius: 50%;
			box-shadow: 0 0 10px #fff;
		}
	</style>
	<script>
		document.addEventListener("DOMContentLoaded", function() {
			let player = document.getElementById("player");
			let road = document.getElementById("road");
			let score = document.getElementById("score");
			let distance = 0;
			let speed = 10;
			let direction = 1;
			let interval = setInterval(move, 50);
			
			function move() {
				distance += speed * direction;
				player.style.bottom = distance + "%";
				if (distance >= 80 || distance <= 0) {
					clearInterval(interval);
					alert("Game Over! Your score: " + Math.floor(distance) + "m");
					location.reload();
				}
			}
			
			document.addEventListener("touchstart", function(event) {
				if (event.touches[0].clientX < window.innerWidth / 2) {
					direction = -1;
				} else {
					direction = 1;
				}
			});
		});
	</script>
</head>
<body>
	<div id="road"></div>
	<div id="player"></div>
</body>
</html>

このプログラムでは、虹色の道を#road要素で表現しています。プレイヤーは#player要素で表現され、画面下部に表示されます。プレイヤーの移動にはJavaScriptを利用し、touchstartイベントを拾って、タッチした位置に応じて左右に移動します。

また、ゲームオーバー時にはアラートを表示して、ページをリロードしています。