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

No:4017

2165

Beautiful screen with rainbow colors
Developer もちきなこ｜Date and time 23/6/27 2:10:32
Build time 40.613 sec｜Game capacity 3.238KB｜

を持つシンプルなタップゲームを作ります。画面上に出てくる虹色の球をタップし、スコアを稼ぎます。球は画面上を自動で動いており、タイミングを見計らってタップする必要があります。球を連続でタップするとコンボが加算され、より高いスコアを獲得することができます。スマホのタッチ操作に対応し、絵文字を使用して直感的に操作できるようにします。また、タイトル画面とリザルト画面も用意し、ゲーム全体をより楽しいものにします。JavaScriptのコードは以下のようになるでしょう。

虹色ボールタップゲーム

スコア：0

実際にこのコードをブラウザで開くと、虹色のボールが画面上を動き、タップすることでスコアが加算されるタップゲームが遊べます。これをスマホ上で操作すると、より直感的な操作が可能になるでしょう。

→ 　

2　

1　

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

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

(C)2023 HisashiApp

を持つシンプルなタップゲームを作ります。画面上に出てくる虹色の球をタップし、スコアを稼ぎます。球は画面上を自動で動いており、タイミングを見計らってタップする必要があります。球を連続でタップするとコンボが加算され、より高いスコアを獲得することができます。スマホのタッチ操作に対応し、絵文字を使用して直感的に操作できるようにします。また、タイトル画面とリザルト画面も用意し、ゲーム全体をより楽しいものにします。JavaScriptのコードは以下のようになるでしょう。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>虹色ボールタップゲーム</title>
	<style>
		html, body {
			margin: 0;
			padding: 0;
			height: 100%;
			background-color: #f2f2f2;
		}
		#game {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.ball {
			font-size: 2.5rem;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="game">
		<h1>虹色ボールタップゲーム</h1>
		<p>スコア：<span id="score">0</span></p>
		<div class="ball"></div>
	</div>
	<script>
		// ボールオブジェクトの作成
		const ball = {
			speed: 5,
			interval: null,
			init: function() {
				// ボールを作成し、画面に表示する
				const div = document.querySelector('.ball');
				div.style.color = this.getColor();
				div.innerText = this.getEmoji();
				div.style.top = Math.random() * 80 + '%';
				// ボールを動かす
				this.interval = setInterval(function() {
					const x = parseFloat(div.style.left) || 0;
					const nextX = x + ball.speed;
					// 画面端まで来たら消去する
					if (nextX >= 100) {
						ball.reset();
						ball.addScore();
					} else {
						div.style.left = nextX + '%';
					}
				}, 100);
				// ボールをタップしたときの処理
				div.addEventListener('click', function() {
					ball.reset();
					ball.addScore();
				});
			},
			getColor: function() {
				const colors = ['#ff1f67', '#48dbfb', '#00b894', '#feca57', '#ff7675', '#a29bfe'];
				return colors[Math.floor(Math.random() * colors.length)];
			},
			getEmoji: function() {
				const emojis = ['🌈', '🎉', '⚽️', '🍔', '👑', '🎧'];
				return emojis[Math.floor(Math.random() * emojis.length)];
			},
			reset: function() {
				// ボールを消去し、新たに作成する
				const div = document.querySelector('.ball');
				div.style.display = 'none';
				clearInterval(this.interval);
				setTimeout(function() {
					div.style.display = 'block';
					ball.init();
				}, 500);
			},
			addScore: function() {
				// スコアを加算する
				const score = document.querySelector('#score');
				score.innerText = parseInt(score.innerText) + 1;
			}
		};
		// ゲーム開始
		ball.init();
	</script>
</body>
</html>
```

実際にこのコードをブラウザで開くと、虹色のボールが画面上を動き、タップすることでスコアが加算されるタップゲームが遊べます。これをスマホ上で操作すると、より直感的な操作が可能になるでしょう。