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

No:1486

237

←

Prev Next

→

fishing
Developer sayaensm｜Date and time 23/6/18 17:26:53
Build time 22.387 sec｜Game capacity 1.626KB｜

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>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h1>魚釣り</h1>
	<canvas id="canvas" width="400" height="400"></canvas>
	<p>画面をタップして魚を釣ろう！</p>
	<script>
		// 魚の種類
		var fishTypes = [
			{name: "タイマサコ", score: 10, image: "🐟"},
			{name: "クロマグロ", score: 30, image: "🐠"},
			{name: "シーラカンス", score: 50, image: "🦕"},
		];

// 魚の位置
		var fishX = Math.random() * 380;
		var fishY = Math.random() * 380;

// キャンバスの準備
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

// 魚を描画する
		function drawFish() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.font = "48px serif";
			ctx.fillText(fishTypes[0].image, fishX, fishY);
		}

// 魚を釣る
		canvas.addEventListener("click", function(event) {
			var x = event.offsetX;
			var y = event.offsetY;
			if (x >= fishX && x <= fishX + 40 && y >= fishY - 40 && y <= fishY) {
				alert("おめでとう！釣り上げた魚は「" + fishTypes[0].name + "」でした！得点は" + fishTypes[0].score + "点です。");
				// 新しい魚の準備
				fishX = Math.random() * 380;
				fishY = Math.random() * 380;
				fishTypes = fishTypes.slice(1); // 魚の種類を1つ減らす
				if (fishTypes.length === 0) {
					alert("すべての魚を釣り上げました！お疲れ様でした。");
				}
			}
			drawFish();
		});

// 最初の魚を描画する
		drawFish();
	</script>
</body>
</html>