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

No:3458

7873

←

Prev Next

→

sin vs cos
Developer User3707｜Date and time 23/6/25 5:44:38
Build time 21.963 sec｜Game capacity 2.153KB｜

Script

Sin vs Cosゲーム

画面をタップしてsinとcosのどちらが大きいか当てよう！

←

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>Sin vs Cosゲーム</title>
</head>
<body>
	<h1>Sin vs Cosゲーム</h1>
	<p>画面をタップしてsinとcosのどちらが大きいか当てよう！</p>
	<canvas id="canvas" width="300" height="300"></canvas>

var score = 0;
			var timer = 60;

function draw() {
				// 背景の描画
				ctx.fillStyle = "#f0f0f0";
				ctx.fillRect(0, 0, canvas.width, canvas.height);

// sinとcosの値の計算
				var angle = Math.random() * 360;
				var sinValue = Math.sin(angle * Math.PI / 180);
				var cosValue = Math.cos(angle * Math.PI / 180);

// 円の描画
				ctx.beginPath();
				ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, Math.PI*2, false);
				ctx.strokeStyle = "#000000";
				ctx.stroke();
				ctx.closePath();

// sinの線の描画
				ctx.beginPath();
				ctx.moveTo(canvas.width / 2, canvas.height / 2);
				ctx.lineTo(canvas.width / 2 + sinValue * 100, canvas.height / 2);
				ctx.strokeStyle = "#ff0000";
				ctx.stroke();
				ctx.closePath();

// cosの線の描画
				ctx.beginPath();
				ctx.moveTo(canvas.width / 2, canvas.height / 2);
				ctx.lineTo(canvas.width / 2, canvas.height / 2 + cosValue * 100);
				ctx.strokeStyle = "#0000ff";
				ctx.stroke();
				ctx.closePath();

// 正解の判定
				canvas.addEventListener("click", function(event) {
					var x = event.offsetX;
					var y = event.offsetY;
					if (x >= canvas.width / 2 + sinValue * 100 && y <= canvas.height / 2) {
						score += 1;
					} else if (x <= canvas.width / 2 && y >= canvas.height / 2 + cosValue * 100) {
						score += 1;
					}
				});

// スコアの表示
				ctx.fillStyle = "#000000";
				ctx.fillText("Score: " + score, 10, 20);

// 残り時間の表示
				ctx.fillText("Time: " + timer, 10, 40);
				timer -= 1;

if (timer == 0) {
					clearInterval(interval);
					alert("Time's up! 最終スコア: " + score);
				}
			}

var interval = setInterval(draw, 1000);
		}
	</script>
</body>
</html>