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

No:179

259

←

Prev Next

→

A game where you can catch all kinds of fish
Developer User2754｜Date and time 23/6/3 22:16:25
Build time 85.815 sec｜Game capacity 3.005KB｜

Script

Fishing Games

Click on the fish to get points!

Score: 0

←

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 {
			font-size: 2em;
			text-align: center;
			background-color: #ade6d8;
		}
		#game {
			display: inline-block;
			background-color: #fff;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 5px 5px 10px #666;
		}
		.fish {
			font-size: 3em;
			cursor: pointer;
		}
		#score {
			font-size: 1.5em;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<h1>釣りゲーム</h1>
	<p>魚をクリックしてポイントをゲット！</p>
	<div id="game"></div>
	<div id="score">Score: 0</div>
	<script>
		// 魚の絵文字を配列で用意
		var fishes = ["🐟", "🐠", "🐡", "🦈", "🐙"];
		// ゲームの時間を設定
		var gameLength = 30;
		// スコアを初期化
		var score = 0;
		// タイマーを初期化
		var timer = gameLength;
		// スコア表示の要素を取得
		var scoreElement = document.getElementById("score");
		// ゲーム画面の要素を取得
		var gameElement = document.getElementById("game");
		// ゲーム画面の幅を取得
		var gameWidth = gameElement.offsetWidth;
		// ゲーム画面の高さを取得
		var gameHeight = gameElement.offsetHeight;
		
		// クリックした時の処理を定義する関数
		function clickFish() {
			// スコアを加算
			score++;
			// スコア表示を更新
			scoreElement.textContent = "Score: " + score;
			// 魚をランダムに配置
			var fish = document.createElement("span");
			fish.className = "fish";
			fish.textContent = fishes[Math.floor(Math.random() * fishes.length)];
			fish.style.position = "absolute";
			fish.style.top = Math.floor(Math.random() * (gameHeight - 100)) + "px";
			fish.style.left = Math.floor(Math.random() * (gameWidth - 100)) + "px";
			fish.addEventListener("click", clickFish);
			gameElement.appendChild(fish);
		}
		
		// カウントダウンの処理を定義する関数
		function countdown() {
			// 残り時間を減らす
			timer--;
			// タイマー表示を更新
			scoreElement.textContent = "Score: " + score + " / Time: " + timer + " s";
			if (timer == 0) {
				// ゲーム終了時の処理
				alert("Time's up! Your score is " + score + "!");
				gameElement.innerHTML = "";
				// スコアなどを初期化
				score = 0;
				timer = gameLength;
				scoreElement.textContent = "Score: " + score;
			} else {
				// タイムアウトせずに続ける場合
				setTimeout(countdown, 1000);
			}
		}
		
		// 最初の魚をランダムに配置
		var fish = document.createElement("span");
		fish.className = "fish";
		fish.textContent = fishes[Math.floor(Math.random() * fishes.length)];
		fish.style.position = "absolute";
		fish.style.top = Math.floor(Math.random() * (gameHeight - 100)) + "px";
		fish.style.left = Math.floor(Math.random() * (gameWidth - 100)) + "px";
		fish.addEventListener("click", clickFish);
		gameElement.appendChild(fish);
		
		// ゲームを開始する処理
		countdown();
	</script>
</body>
</html>