Fill it with bluebirds.'s game

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

No:9484

282

←

Prev Next

→

Fill it with bluebirds.
Developer User4369｜Date and time 23/7/25 15:20:45
Build time 24.981 sec｜Game capacity 2.163KB｜

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>
</head>
<body>
	<div id="gameboard" style="width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;"></div>
	<script>
		// ゲームボードの要素を取得
		const gameboard = document.getElementById('gameboard');

// ゲームの定義
		const game = {
			score: 0,
			birds: [],
			start() {
				// ゲーム実行時の処理を記述
				gameboard.innerHTML = `<h1>青い鳥で埋め尽くせ</h1>
									  <p>スマホの画面をタップして鳥を追加しましょう！</p>
									  <p>スコア: ${game.score}</p>`;

// スマホのタップイベントを監視
				gameboard.addEventListener('click', game.addBird);
			},
			addBird() {
				// 新しい鳥の要素を作成
				const bird = document.createElement('span');
				bird.style.fontSize = '100px';
				bird.innerHTML = '🐦';
				bird.style.position = 'absolute';
				bird.style.left = `${Math.random() * 80 + 10}%`;
				bird.style.top = `${Math.random() * 80 + 10}%`;

// タップされた時のイベントを設定
				bird.addEventListener('click', game.removeBird);

// 鳥をゲームボードに追加
				gameboard.appendChild(bird);
				game.birds.push(bird);

// スコアを更新
				game.score++;
				gameboard.innerHTML = `<h1>青い鳥で埋め尽くせ</h1>
									  <p>スマホの画面をタップして鳥を追加しましょう！</p>
									  <p>スコア: ${game.score}</p>`;
			},
			removeBird(event) {
				// クリックされた鳥をゲームボードから削除
				const bird = event.target;
				bird.remove();

// 配列からも削除
				const index = game.birds.indexOf(bird);
				game.birds.splice(index, 1);

// スコアを更新
				game.score--;
				gameboard.innerHTML = `<h1>青い鳥で埋め尽くせ</h1>
									  <p>スマホの画面をタップして鳥を追加しましょう！</p>
									  <p>スコア: ${game.score}</p>`;
			}
		};

// ゲームを開始
		game.start();
	</script>
</body>
</html>