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

No:3486

7334

←

Prev Next

→

Shoot the targets and you need to get 10k score
Developer User3710｜Date and time 23/6/25 6:43:46
Build time 34.186 sec｜Game capacity 3.133KB｜

Script

Target Shooting Game

Tap/click on the targets to shoot them!

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Target Shooting Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			text-align: center;
			background-color: #3f51b5;
			color: #fff;
			font-size: 24px;
			font-weight: bold;
		}
		canvas {
			margin-top: 20px;
			border: 5px solid #fff;
			background-color: #000;
		}
	</style>
</head>
<body>
	<h1>Target Shooting Game</h1>
	<p>Tap/click on the targets to shoot them!</p>
	<p id="score">Score: 0</p>
	<canvas id="gameCanvas" width="400" height="400"></canvas>

// initialize game variables
		var score = 0;
		var timeLeft = 60; // seconds
		var targets = [];

// define target object and spawn targets randomly
		function Target(x, y, size, color) {
			this.x = x;
			this.y = y;
			this.size = size;
			this.color = color;
		}
		Target.prototype.draw = function() {
			ctx.beginPath();
			ctx.arc(this.x, this.y, this.size, 0, Math.PI*2);
			ctx.fillStyle = this.color;
			ctx.fill();
			ctx.closePath();
		};
		Target.prototype.onClick = function() {
			score += 1000;
			document.getElementById("score").innerHTML = "Score: " + score;
			this.x = Math.floor(Math.random() * (canvas.width - this.size)) + this.size;
			this.y = Math.floor(Math.random() * (canvas.height - this.size)) + this.size;
			this.color = "#" + ((1 << 24) * Math.random() | 0).toString(16); // random color
		};
		for (var i = 0; i < 10; i++) {
			var x = Math.floor(Math.random() * (canvas.width - 20)) + 10;
			var y = Math.floor(Math.random() * (canvas.height - 20)) + 10;
			var size = Math.floor(Math.random() * 30) + 10;
			var color = "#" + ((1 << 24) * Math.random() | 0).toString(16);
			targets.push(new Target(x, y, size, color));
		}

// define game loop and update function
		var then = Date.now();
		function gameLoop() {
			var now = Date.now();
			var deltaTime = (now - then) / 1000;
			then = now;

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < targets.length; i++) {
				targets[i].draw();
			}

if (timeLeft > 0) {
				timeLeft -= deltaTime;
				document.getElementById("score").innerHTML = "Score: " + score + " | Time Left: " + Math.floor(timeLeft);
				window.requestAnimationFrame(gameLoop);
			} else {
				document.getElementById("score").innerHTML = "Final Score: " + score;
			}
		}
		gameLoop();

// define click/touch event listener and target detection
		canvas.addEventListener("mousedown", onCanvasClick, false);
		canvas.addEventListener("touchstart", onCanvasClick, false);
		function onCanvasClick(e) {
			e.preventDefault();
			var mouseX = (e.pageX || e.touches[0].pageX) - canvas.offsetLeft;
			var mouseY = (e.pageY || e.touches[0].pageY) - canvas.offsetTop;
			for (var i = 0; i < targets.length; i++) {
				var dx = mouseX - targets[i].x;
				var dy = mouseY - targets[i].y;
				var distance = Math.sqrt(dx * dx + dy * dy);
				if (distance < targets[i].size) {
					targets[i].onClick();
					break;
				}
			}
		}
	</script>
</body>
</html>