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

No:1123

132

←

Prev Next

→

Mowing game
Developer User3251｜Date and time 23/6/18 3:49:34
Build time 26.876 sec｜Game capacity 2.113KB｜

Script

以下は草を刈るゲームの実装例です。

草刈りゲーム

スコア：0

このゲームは、スコアを競う簡単な草刈りゲームです。画面には20個までの草が生え、クリックすると草が消えてスコアが加算されます。草は3種類の画像がランダムに表示され、スコアが高いほど稀な画像が表示されます。スマホでもプレイ可能です。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

以下は草を刈るゲームの実装例です。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>草刈りゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background: #5EBD3E;
			text-align: center;
		}
		#game-board {
			display: inline-block;
			background: #C5E57D;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 0 0 10px #555;
			margin-top: 20px;
		}
		#score {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 10px;
		}
		#grass {
			height: 50px;
			margin: 5px;
			display: inline-block;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>草刈りゲーム</h1>
	<p>スコア：<span id="score">0</span></p>
	<div id="game-board"></div>
	<script>
		const maxGrass = 20; // 刈る草の最大数
		const grassImages = ['🌱','🌿','🎍']; // 草の画像
		let score = 0;
		let intervalID = 0;
		
		function startGame() {
			intervalID = setInterval(addGrass, 1000);
		}

function addGrass() {
			if (document.querySelectorAll('#game-board img').length < maxGrass) {
				const grassImg = document.createElement('img');
				grassImg.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="#C5E57D"/></svg>';
				const index = Math.floor(Math.random() * grassImages.length);
				grassImg.dataset.score = index + 1;
				grassImg.alt = grassImages[index];
				grassImg.title = grassImages[index];
				grassImg.addEventListener('click', mowGrass);
				document.querySelector('#game-board').appendChild(grassImg);
			}
		}

function mowGrass(event) {
			event.target.remove();
			score += parseInt(event.target.dataset.score);
			document.querySelector('#score').textContent = score;
		}

startGame();
	</script>
</body>
</html>