A game in which you make a living by picking up fallen leaves's game

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

No:1631

414

←

Prev Next

→

A game in which you make a living by picking up fa..ALL
Developer User3377｜Date and time 23/6/18 20:19:55
Build time 26.154 sec｜Game capacity 2.225KB｜

Script

👧

🍂

落ち葉を拾って生計を立てよう！ 🍂👧

スコア: 0 枚

このプログラムは、スマホで操作することを前提に、傾けることでキャラクターを移動させ、落ち葉を拾うゲームです。落ち葉はランダムに移動し、拾うとスコアが加算されます。スマートフォンの横向きで遊んでください。

←

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 {
			background-color: #a3c6ff;
			margin: 0;
			padding: 0;
			font-size: 20px;
			text-align: center;
		}
		#player {
			position: absolute;
			bottom: 50px;
			left: 50px;
		}
		#leaf {
			position: absolute;
			top: 100px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 30px;
		}
	</style>
</head>
<body>
	<div id="player">👧</div>
	<div id="leaf">🍂</div>
	<script>
		const player = document.getElementById("player");
		const leaf = document.getElementById("leaf");
		let score = 0;
		player.addEventListener("click", function() {
			score++;
			document.getElementById("score").innerHTML = score;
		});
		window.addEventListener("deviceorientation", function(event) {
			let x = event.gamma; // 傾きの角度
			x = Math.min(x, 30); // 右に倒し過ぎないように制限
			x = Math.max(x, -30); // 左に倒し過ぎないように制限
			player.style.left = (50 + x * 2) + "px"; // 傾きに応じて移動
			if (isCollided(player, leaf)) {
				score++;
				document.getElementById("score").innerHTML = score;
				moveLeaf();
			}
		});
		function isCollided(obj1, obj2) {
			let rect1 = obj1.getBoundingClientRect();
			let rect2 = obj2.getBoundingClientRect();
			let isHorizontalOverlap = (rect1.left <= rect2.right && rect2.left <= rect1.right);
			let isVerticalOverlap = (rect1.top <= rect2.bottom && rect2.top <= rect1.bottom);
			return isHorizontalOverlap && isVerticalOverlap;
		}
		function moveLeaf() {
			let width = window.innerWidth;
			let height = window.innerHeight;
			leaf.style.top = (Math.random() * (height - 300) + 100) + "px";
			leaf.style.left = (Math.random() * (width - 100) + 50) + "px";
		}
		moveLeaf();
	</script>
	<p>落ち葉を拾って生計を立てよう！ 🍂👧</p>
	<p>スコア: <span id="score">0</span> 枚</p>
</body>
</html>