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

No:3361

658

←

Prev Next

→

Crab Fried Rice
Developer sayaensm｜Date and time 23/6/24 16:42:49
Build time 34.465 sec｜Game capacity 3.052KB｜

Script

カニチャーハンゲーム

あなたはカニを操作してチャーハンを作るシェフです。

画面をタップするとカニがジャンプします。

ご飯や野菜に当たるとスコアが加算されます。

でも、カニや焦げた食材に当たるとゲームオーバーです。

スコア: 0

←

Prev　Next

→ 　

Back　

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

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 {
			background-color: #ffe6cc;
			text-align: center;
			font-family: sans-serif;
		}
		h1 {
			color: #d9534f;
			font-size: 3em;
			margin-top: 50px;
		}
		button {
			background-color: #f0ad4e;
			color: white;
			border: none;
			border-radius: 5px;
			font-size: 1.5em;
			padding: 10px 20px;
			margin-top: 20px;
			cursor: pointer;
		}
		img {
			max-width: 100%;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<h1>カニチャーハンゲーム</h1>
	<p>あなたはカニを操作してチャーハンを作るシェフです。</p>
	<p>画面をタップするとカニがジャンプします。</p>
	<p>ご飯や野菜に当たるとスコアが加算されます。</p>
	<p>でも、カニや焦げた食材に当たるとゲームオーバーです。</p>
	<button onclick="start()">スタート</button>
	<script>
		let score = 0;
		let gameStatus = false;
		let interval;
		
		function start() {
			if (!gameStatus) {
				gameStatus = true;
				score = 0;
				document.addEventListener("click", jump);
				interval = setInterval(update, 50);
			}
		}
		
		function jump() {
			let crab = document.getElementById("crab");
			let height = parseInt(crab.style.top) || 0;
			if (height > -200) {
				crab.style.top = (height - 100) + "px";
			}
		}
		
		function update() {
			let rice = document.getElementById("rice");
			let vegetable = document.getElementById("vegetable");
			let burning = document.getElementById("burning");
			let crab = document.getElementById("crab");
			if (hit(rice, crab) || hit(vegetable, crab)) {
				score += 10;
			} else if (hit(burning, crab) || parseInt(crab.style.top) >= window.innerHeight) {
				gameOver();
			}
			document.getElementById("score").textContent = score;
			move(rice, -10);
			move(vegetable, -15);
			move(burning, -13);
		}
		
		function move(element, speed) {
			let left = parseInt(element.style.left) || 0;
			if (left < -100) {
				element.style.left = "100%";
			} else {
				element.style.left = (left + speed) + "%";
			}
		}
		
		function hit(a, b) {
			let leftA = parseInt(a.style.left) || 0;
			let topA = parseInt(a.style.top) || 0;
			let leftB = parseInt(b.style.left) || 0;
			let topB = parseInt(b.style.top) || 0;
			if (Math.abs(leftA - leftB) < 100 && Math.abs(topA - topB) < 100) {
				return true;
			}
			return false;
		}
		
		function gameOver() {
			gameStatus = false;
			clearInterval(interval);
			document.removeEventListener("click", jump);
			alert("スコア: " + score);
			let crab = document.getElementById("crab");
			crab.style.top = "calc(50% - 64px)";
		}
	</script>
	<img id="crab" src="🦀.png">
	<img id="rice" src="🍚.png" style="left: 90%; top: 50%;">
	<img id="vegetable" src="🥕.png" style="left: 80%; top: 30%;">
	<img id="burning" src="🔥.png" style="left: 70%; top: 70%;">
	<p>スコア: <span id="score">0</span></p>
</body>
</html>