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

No:1792

6582

←

Prev Next

→

Vegetable Feeding the Hills game
Developer User3025｜Date and time 23/6/19 1:52:52
Build time 25.265 sec｜Game capacity 1.946KB｜

Script

ヒルズ族ジャンプ！

あなたはヒルズ族のリーダーです。野菜を集めて仲間たちに食べさせましょう。

{🥕}

このゲームでは、「ヒルズ族」のリーダーとなり、画面をクリックしてヒルをジャンプさせながら、現れる野菜(🥕)を取り、仲間たちに食べさせるゲームです。野菜を取るたびに、スコアが1点加算されます。ゲームオーバーはありません。

←

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: #f7d9aa;
			font-size: 2rem;
			text-align: center;
		}
		#hill{
			width: 15%;
			position: relative;
			bottom: 0;
			animation: jump 0.3s linear infinite alternate;
			cursor: pointer;
		}
		@keyframes jump{
			from{
				bottom: 0;
			}
			to{
				bottom: 30px;
			}
		}
		#vege{
			position: absolute;
			top: 0;
			left: 0;
			animation: fall 3s linear forwards infinite;
		}
		@keyframes fall{
			from{
				top: 0;
			}
			to{
				top: 100%;
			}
		}
		.score{
			position: fixed;
			top: 0;
			right: 50%;
			transform: translateX(50%);
			font-size: 3rem;
		}
	</style>
</head>
<body>
	<h1>ヒルズ族ジャンプ！</h1>
	<p>あなたはヒルズ族のリーダーです。野菜を集めて仲間たちに食べさせましょう。</p>
	<div id="hill" onclick="jump()">
		<img src="hill.png" alt="hill">
		<div id="vege">{🥕}</div>
	</div>
	<div class="score">0</div>
	<script>
		let score = 0;
		function jump(){
			document.querySelector('#hill').style.animation = 'none';
			void document.querySelector('#hill').offsetWidth;
			document.querySelector('#hill').style.animation = 'jump 0.3s linear infinite alternate';
			score++;
			document.querySelector('.score').textContent = `Score: ${score}`;
			document.querySelector('#vege').style.animationDuration = `${Math.random()*2+3}s`;
			document.querySelector('#vege').style.left = `${Math.random()*85+5}%`;
			document.querySelector('#vege').style.animationDelay = `${Math.random()*2}s`;
		}
	</script>
</body>
</html>