Game in which a rabbit eats a carrot's game

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
Game in which a rabbit eats a carrot's game | AI game creator

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

No:917

312

←

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]現在の欲しいゲームランキング

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>

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

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

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

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