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

No:2101

2311

←

Prev Next

→

A game where you shoot soldiers with a gun
Developer User3496｜Date and time 23/6/20 5:05:19
Build time 30.317 sec｜Game capacity 2.361KB｜

Script

Soldiers shooting

Use your gun to hit the enemy soldiers before they hit you!

30 seconds remaining

Number of soldiers hit: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Soldaten schieten</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 2em;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>Soldaten schieten</h1>
	<p>Gebruik je pistool om de vijandelijke soldaten te raken voordat ze jou raken!</p>
	<div>
		<span id="timer">30</span>
		<span> seconden resterend</span>
	</div>
	<div>
		<p>Aantal geraakte soldaten: <span id="score">0</span></p>
	</div>
	<canvas id="canvas" width="450" height="300"></canvas>
	<script>
		const canvas = document.getElementById("canvas");
		const ctx = canvas.getContext("2d");
		const timerEl = document.getElementById("timer");
		const scoreEl = document.getElementById("score");
		let timer = 30;
		let score = 0;
		let soldiers = [];

// Soldaat klasse
		class Soldier {
			constructor(x, y) {
				this.x = x;
				this.y = y;
				this.radius = 25;
				this.color = "green";
			}

draw() {
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
				ctx.fillStyle = this.color;
				ctx.fill();
				ctx.closePath();
			}
		}

// Nieuwe soldaten toevoegen aan de array
		function addSoldiers() {
			const x = Math.random() * canvas.width;
			const y = Math.random() * canvas.height;
			const newSoldier = new Soldier(x, y);
			soldiers.push(newSoldier);
		}

// Klik event functie om de soldaat te raken
		canvas.addEventListener("click", function(event) {
			const mouseX = event.clientX - canvas.offsetLeft;
			const mouseY = event.clientY - canvas.offsetTop;

soldiers.forEach((soldier, index) => {
				const dist = Math.hypot(mouseX - soldier.x, mouseY - soldier.y);
				if (dist <= soldier.radius) {
					soldiers.splice(index, 1);
					score++;
				}
			});
		});

function gameLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

soldiers.forEach((soldier, index) => {
				soldier.draw();
			});

// Timer
			timer--;
			timerEl.innerHTML = timer;

// Score
			scoreEl.innerHTML = score;

// Timer check
			if (timer <= 0) {
				clearInterval(intervalId);
				alert(`Game over! Je score is: ${score}`);
			}
		}

// Nieuwe soldaat elke seconde toevoegen
		setInterval(addSoldiers, 1000);

const intervalId = setInterval(gameLoop, 1000 / 60); // 60 frames per seconde
	</script>
</body>
</html>