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

No:460

198

←

Prev Next

→

Tap position accuracy checker
Developer User3044｜Date and time 23/6/14 17:32:57
Build time 36.863 sec｜Game capacity 2.268KB｜

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>
	<p>このゲームでは、指定された場所をなるべく正確にタップしてください。</p>
	<p>途中でタイムアップになった場合や、誤った場所をタップした場合はゲームオーバーになります。</p>
	
	<canvas id="gameCanvas" width="300" height="300"></canvas>
	
	<script>
		var canvas = document.getElementById("gameCanvas");
		var ctx = canvas.getContext("2d");
		
		// ゲームの変数
		var targetX;
		var targetY;
		var targetRadius;
		var score;
		var timeLeft;
		var gameInterval;
		
		// ゲームの初期化
		function initGame() {
			score = 0;
			timeLeft = 10;
			targetRadius = 20;
			newTarget();
			drawTarget();
			gameInterval = setInterval(updateGame, 1000);
		}
		
		// 新しいターゲットの作成
		function newTarget() {
			targetX = Math.floor(Math.random() * canvas.width);
			targetY = Math.floor(Math.random() * canvas.height);
		}
		
		// ターゲットの描画
		function drawTarget() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.beginPath();
			ctx.arc(targetX, targetY, targetRadius, 0, Math.PI * 2);
			ctx.fillStyle = "red";
			ctx.fill();
		}
		
		// ゲームの更新
		function updateGame() {
			timeLeft--;
			if (timeLeft < 0) {
				gameOver();
			} else {
				drawTarget();
			}
		}
		
		// ゲームオーバーの処理
		function gameOver() {
			clearInterval(gameInterval);
			alert("ゲームオーバー！スコアは" + score + "です。");
			initGame();
		}
		
		// タッチイベントの処理
		canvas.addEventListener('touchstart', function(event) {
			var touchX = event.touches[0].clientX - canvas.offsetLeft;
			var touchY = event.touches[0].clientY - canvas.offsetTop;
			
			var distance = Math.sqrt(Math.pow(targetX - touchX, 2) + Math.pow(targetY - touchY, 2));
			if (distance < targetRadius) {
				score++;
				timeLeft++;
				targetRadius = Math.max(5, targetRadius - 1);
				newTarget();
				drawTarget();
			} else {
				gameOver();
			}
		});
		
		initGame();
	</script>
</body>
</html>