AI game creator

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

No:3485

3469

←

Prev Next

→

Shoot the targets
Developer User3710｜Date and time 23/6/25 6:42:22
Build time 25.071 sec｜Game capacity 2.67KB｜

Script

Here's a simple shooting game implemented in a single HTML file using JavaScript:

To play the game, just click on the red targets as they appear on the canvas. You earn 10 points for each target hit, and the game ends when you reach a score of 100. You can also adjust the canvas size (320x480) and the target speed (controlled by the `vx` and `vy` variables in the `Target` constructor) to make the game easier or harder.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Here's a simple shooting game implemented in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Shoot the Targets!</title>
	<style type="text/css">
		canvas { border: 1px solid black; }
	</style>
</head>
<body>
	<canvas id="canvas" width="320" height="480"></canvas>

var score = 0;
		var timer = null;
		var targets = [];

function startGame() {
			score = 0;
			targets = [];
			canvas.addEventListener("click", onCanvasClick);
			timer = setInterval(update, 1000/30);
		}

function endGame() {
			canvas.removeEventListener("click", onCanvasClick);
			clearInterval(timer);
			alert("Game Over! Your score is " + score);
		}

function Target(x, y) {
			this.x = x;
			this.y = y;
			this.radius = 30;
			this.vx = Math.random()*10-5;
			this.vy = Math.random()*10-5;

this.update = function() {
				this.x += this.vx;
				this.y += this.vy;
				if (this.x < this.radius || this.x > canvas.width-this.radius) {
					this.vx *= -1;
				}
				if (this.y < this.radius || this.y > canvas.height-this.radius) {
					this.vy *= -1;
				}
			}

this.contains = function(x, y) {
				var dx = x - this.x;
				var dy = y - this.y;
				return dx*dx + dy*dy <= this.radius*this.radius;
			}

this.draw = function(context) {
				context.beginPath();
				context.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
				context.fill();
			}
		}

startGame();
	</script>
</body>
</html>
```