Make a game that someone shoots and you need 's game

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

No:3477

3772

←

Prev Next

→

Make a game that someone shoots and you need
Developer anonymous｜Date and time 70/1/1 9:36:43
Build time unknown sec｜Game capacity 2.203KB｜

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>Dodge Game</title>
	<style>
		canvas {
			border: 1px solid black;
			background-color: #eee;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas"></canvas>
	
	<script>
		// Define the canvas and context variables
		var canvas = document.getElementById('gameCanvas');
		var context = canvas.getContext('2d');
		
		// Define variables for the player, bullet, and score
		var playerX = canvas.width/2;
		var playerY = canvas.height-30;
		
		var bulletX = Math.floor(Math.random() * canvas.width);
		var bulletY = 0;
		
		var score = 0;
		
		// Define the keydown event listener to move the player left and right
		document.addEventListener('keydown', function(event) {
			if (event.keyCode == 37) { // Left arrow key
				if (playerX > 0) {
					playerX -= 10;
				}
			} else if (event.keyCode == 39) { // Right arrow key
				if (playerX < canvas.width-20) {
					playerX += 10;
				}
			}
		});
		
		// Define the draw function to draw the player, bullet, and score to the canvas
		function draw() {
			// Clear the canvas
			context.clearRect(0, 0, canvas.width, canvas.height);
			
			// Draw the player
			context.beginPath();
			context.arc(playerX, playerY, 10, 0, Math.PI*2);
			context.fillStyle = "black";
			context.fill();
			context.closePath();
			
			// Draw the bullet
			context.beginPath();
			context.arc(bulletX, bulletY, 5, 0, Math.PI*2);
			context.fillStyle = "red";
			context.fill();
			context.closePath();
			
			// Update the bullet position
			bulletY += 5;
			if (bulletY > canvas.height) {
				bulletX = Math.floor(Math.random() * canvas.width);
				bulletY = 0;
			}
			
			// Check if the player has been hit by the bullet
			var dx = playerX - bulletX;
			var dy = playerY - bulletY;
			var distance = Math.sqrt(dx*dx + dy*dy);
			if (distance < 15) {
				alert("Game over! Final score: " + score);
				clearInterval(interval);
			}
			
			// Update the score
			score += 1;
			context.font = "20px Arial";
			context.fillStyle = "black";
			context.fillText("Score: " + score, 10, 30);
		}
		
		// Define the game loop with the draw function
		var interval = setInterval(draw, 20);
	</script>
</body>
</html>