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

No:3482

3001

←

Prev Next

→

Kill the bad guys
Developer User3710｜Date and time 23/6/25 6:39:32
Build time 24.186 sec｜Game capacity 2.453KB｜

Script

Kill the bad guys

←

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>Kill the bad guys</title>
	<style>
		body {
			background-color: black;
			color: white;
			font-family: Arial;
			text-align: center;
		}
		
		canvas {
			border: 2px solid white;
		}		
	</style>
</head>
<body>
	<h1>Kill the bad guys</h1>
	<canvas id="myCanvas"></canvas>
	
	<script>
		// Set up canvas
		var canvas = document.getElementById("myCanvas");
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		var ctx = canvas.getContext("2d");
		
		// Set up player
		var playerWidth = 50;
		var playerHeight = 50;
		var playerX = canvas.width/2 - playerWidth/2;
		var playerY = canvas.height - playerHeight * 2;
		var playerSpeed = 10;
		
		// Set up enemy
		var enemyWidth = 50;
		var enemyHeight = 50;
		var numEnemies = 10;
		var enemySpeed = 5;
		var enemies = [];
		for (var i = 0; i < numEnemies; i++) {
			var enemyX = Math.random() * (canvas.width - enemyWidth);
			var enemyY = Math.random() * (-canvas.height);
			enemies.push({x: enemyX, y: enemyY});
		}
		
		// Set up score
		var score = 0;
		
		// Move player
		document.addEventListener("keydown", movePlayer);
		
		function movePlayer(event) {
			if (event.keyCode == 37) { // left arrow
				playerX -= playerSpeed;
				if (playerX < 0) {
					playerX = 0;
				}
			} else if (event.keyCode == 39) { // right arrow
				playerX += playerSpeed;
				if (playerX > canvas.width - playerWidth) {
					playerX = canvas.width - playerWidth;
				}
			}
		}
		
		// Move enemy and detect collision
		setInterval(function() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillRect(playerX, playerY, playerWidth, playerHeight);
			for (var i = 0; i < numEnemies; i++) {
				ctx.fillRect(enemies[i].x, enemies[i].y, enemyWidth, enemyHeight);
				enemies[i].y += enemySpeed;
				if (enemies[i].y > canvas.height) { // enemy reached bottom of screen
					enemies[i].y = Math.random() * (-canvas.height);
					enemies[i].x = Math.random() * (canvas.width - enemyWidth);
				}
				if (enemies[i].y + enemyHeight > playerY && enemies[i].y < playerY + playerHeight && enemies[i].x + enemyWidth > playerX && enemies[i].x < playerX + playerWidth) { // collision detected
					score--;
					enemies[i].y = Math.random() * (-canvas.height);
					enemies[i].x = Math.random() * (canvas.width - enemyWidth);
				}
			}
			ctx.fillText("Score: " + score, 10, 50);
			score++;
		}, 50);
	</script>
</body>
</html>