Game in which a rabbit eats a carrot's game

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

No:917

154

←

Prev Next

→

Game in which a rabbit eats a carrot
Developer User3196｜Date and time 23/6/17 22:33:13
Build time 44.209 sec｜Game capacity 2.632KB｜

Script

🐰

🥕

このアプリは、「うさぎが人参を食べるゲーム」という名前のシンプルなゲームです。プレイヤーはマウスでクリックして、うさぎを移動させながらランダムに移動する人参を食べることが目的です。画面上には、うさぎを表す 🐰 絵文字と人参を表す 🥕 絵文字が表示されています。人参はランダムな位置に出現します。プログラムの中で、クリックしたときに、うさぎと人参が重なっているかどうかを判定し、重なっている場合にはスコアを加算します。また、人参を新たなランダムな位置に移動させます。スコアはウィンドウのタイトルバーに表示されます。また、スマホでも動作するように、スタイルを調整しています。楽しんでプレイしてください！

←

Prev　Next

→ 　

Back　

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

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: #f8e0b9;
			font-size: 2em;
			text-align: center;
		}
		#usagi {
			position: absolute;
			bottom: 0;
			left: 0;
			font-size: 3em;
		}
		#carrot {
			position: absolute;
			top: 0;
			right: 0;
			font-size: 3em;
		}
	</style>
</head>
<body>
	<div id="usagi">🐰</div>
	<div id="carrot">🥕</div>

// 人参をランダムな位置に移動
		function moveCarrot() {
			var x = Math.floor(Math.random() * (window.innerWidth - carrot.offsetWidth));
			var y = Math.floor(Math.random() * (window.innerHeight - carrot.offsetHeight));
			carrot.style.top = y + "px";
			carrot.style.left = x + "px";
		}

// クリックしたらうさぎが移動して人参を食べる
		function eatCarrot(event) {
			var x = event.clientX - (usagi.offsetWidth / 2);
			var y = event.clientY - (usagi.offsetHeight / 2);
			usagi.style.top = y + "px";
			usagi.style.left = x + "px";

// うさぎが人参に触れたらスコアが上がる
			if (isOverlap(usagi, carrot)) {
				score++;
				document.title = "Score: " + score;
				moveCarrot();
			}
		}

// 要素が重なっているかどうかを判定
		function isOverlap(e1, e2) {
			var rect1 = e1.getBoundingClientRect();
			var rect2 = e2.getBoundingClientRect();
			return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
		}

// 初期化
		moveCarrot();
		document.addEventListener("click", eatCarrot);
	</script>
</body>
</html>

このアプリは、「うさぎが人参を食べるゲーム」という名前のシンプルなゲームです。プレイヤーはマウスでクリックして、うさぎを移動させながらランダムに移動する人参を食べることが目的です。

画面上には、うさぎを表す 🐰 絵文字と人参を表す 🥕 絵文字が表示されています。人参はランダムな位置に出現します。

プログラムの中で、クリックしたときに、うさぎと人参が重なっているかどうかを判定し、重なっている場合にはスコアを加算します。また、人参を新たなランダムな位置に移動させます。

スコアはウィンドウのタイトルバーに表示されます。また、スマホでも動作するように、スタイルを調整しています。楽しんでプレイしてください！