AI game creator

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

No:224

467

←

Prev Next

→

Jelly pulls on tap
Developer User2906｜Date and time 23/6/10 23:03:10
Build time 26.835 sec｜Game capacity 2.024KB｜

Script

という簡単なゲームです。画面上に表示されるゼリーをタップしてプルプルさせましょう。タップするたびに得点が加算されます。制限時間内にどれだけの得点を獲得できるか挑戦してみましょう。以下が実装例です（注：スタイリングは省略しています）。

このゲームはスマホでもプレイ可能で、絵文字を多用してユニークなUIになっています。ただし、スタイリングや各種エフェクトは省略しているため、デザイン性が低くややチープな印象を受けるかもしれません。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

という簡単なゲームです。画面上に表示されるゼリーをタップしてプルプルさせましょう。タップするたびに得点が加算されます。制限時間内にどれだけの得点を獲得できるか挑戦してみましょう。

以下が実装例です（注：スタイリングは省略しています）。

```html
<!DOCTYPE html>
<html>
<head>
	<title>ゼリープルプル</title>
	<meta charset="UTF-8">
</head>
<body>
	<p id="score">0</p>
	<p id="timer">30</p>
	<div id="jelly"></div>
	
	<script>
		// 得点
		let score = 0;
		const scoreElement = document.getElementById("score");
		
		// 制限時間
		let time = 30;
		const timerElement = document.getElementById("timer");
		const interval = setInterval(() => {
			time--;
			timerElement.textContent = time;
			if (time == 0) {
				clearInterval(interval);
				alert(`時間切れ！スコアは${score}点でした。もう一度プレイするには更新してください。`);
				jelly.removeEventListener("click", clickHandler);
			}
		}, 1000);
		
		// ゼリー
		const jelly = document.getElementById("jelly");
		jelly.addEventListener("click", clickHandler);
		
		function clickHandler() {
			score++;
			scoreElement.textContent = score;
			jelly.classList.toggle("jelly-pulse");
			setTimeout(() => {
				jelly.classList.toggle("jelly-pulse");
			}, 100);
			randomizePosition();
		}
		
		function randomizePosition() {
			const maxX = window.innerWidth - jelly.offsetWidth;
			const maxY = window.innerHeight - jelly.offsetHeight;
			jelly.style.left = Math.floor(Math.random() * maxX) + "px";
			jelly.style.top = Math.floor(Math.random() * maxY) + "px";
		}
		
		randomizePosition();
	</script>
</body>
</html>
```