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

No:1532

3361

←

Prev Next

→

game creation
Developer anonymous｜Date and time 70/1/1 9:36:56
Build time unknown sec｜Game capacity 2.216KB｜

Script

ゲームクリエイト

円をタップしてスコアを稼ごう！

スコア: 0

ゲームの概要：中央に表示される黄色い円をタップしてスコアを稼ぎましょう。タップされると円の位置が変わり、スコアが1加算されます。スコアは画面上部に表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>ゲームクリエイト</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body {
		background-color: #f5f5f5;
		font-family: "Arial", sans-serif;
		text-align: center;
	}
	#canvas {
		margin: 10px auto;
		border: 1px solid #ccc;
		width: 90vw;
		height: 60vh;
		background-color: #fff;
	}
	#score {
		font-size: 1.2rem;
		padding: 10px;
		background-color: #fff;
	}
	</style>
</head>
<body>
	<h1>ゲームクリエイト</h1>
	<p>円をタップしてスコアを稼ごう！</p>
	<div id="canvas"></div>
	<div id="score">スコア: 0</div>
	<script>
		// ゲーム変数
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var score = 0;
		var circle = {
			x: canvas.width/2,
			y: canvas.height/2,
			radius: 50,
			color: "yellow"
		};

// 円を描く関数
		function drawCircle() {
			ctx.beginPath();
			ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2);
			ctx.fillStyle = circle.color;
			ctx.fill();
		}

// スコアを更新する関数
		function updateScore() {
			score++;
			document.getElementById("score").innerHTML = "スコア: " + score;
		}

// タップされた座標が円内か判定する関数
		function isInsideCircle(x, y) {
			return Math.sqrt((x-circle.x)**2 + (y-circle.y)**2) <= circle.radius;
		}

// クリックイベント処理
		canvas.addEventListener("click", function(event) {
			var rect = canvas.getBoundingClientRect();
			var x = event.clientX - rect.left;
			var y = event.clientY - rect.top;
			if (isInsideCircle(x, y)) {
				circle.x = Math.floor(Math.random() * (canvas.width-circle.radius*2)) + circle.radius;
				circle.y = Math.floor(Math.random() * (canvas.height-circle.radius*2)) + circle.radius;
				updateScore();
			}
		});

// ゲームループ
		setInterval(function() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawCircle();
		}, 10);
	</script>
</body>
</html>