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

No:4179

2103

←

Prev Next

→

Fishing in a typhoon 🎣.
Developer AI絵師｜Date and time 23/6/27 13:37:57
Build time 23.943 sec｜Game capacity 1.864KB｜

Script

台風の中で魚釣り🎣

操作方法：画面タップで釣り竿を投げ、再度タップで竿を巻き上げます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>台風の中で魚釣り🎣</title>
</head>
<body>

<h1>台風の中で魚釣り🎣</h1>

<p><strong>操作方法：</strong>画面タップで釣り竿を投げ、再度タップで竿を巻き上げます。</p>

// 魚の描画
		function drawFish() {
			ctx.fillStyle = 'orange';
			ctx.beginPath();
			ctx.arc(50, fishPosition, 30, 0, 2*Math.PI);
			ctx.fill();
		}

// 釣り竿の描画
		function drawHook() {
			ctx.strokeStyle = 'black';
			ctx.lineWidth = 5;
			ctx.beginPath();
			ctx.moveTo(100, 400);
			ctx.lineTo(100, 400-hookLength);
			ctx.stroke();
		}

// スコアの描画
		function drawScore() {
			ctx.fillStyle = 'black';
			ctx.font = '20px Arial';
			ctx.fillText('Score: ' + score, 10, 30);
		}

// フレーム毎の処理
		function update() {
			if (hooked) {
				if (hookPosition >= fishPosition) {
					score++;
					hooked = false;
					hookLength = 0;
					fishPosition = Math.random() * 400;
				} else {
					hookPosition += 5;
					hookLength += 5;
				}
			} else {
				if (hookLength <= 0) {
					hookPosition = 0;
				} else {
					hookPosition -= 5;
					hookLength -= 5;
				}
			}
		}

// タップの処理
		canvas.addEventListener('click', function(e) {
			if (!hooked) {
				hooked = true;
			}
		});

// メインループ
		function mainLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			update();
			drawFish();
			drawHook();
			drawScore();
			requestAnimationFrame(mainLoop);
		}

// ゲームの開始
		mainLoop();
	</script>

</body>
</html>