Shooting down drones to keep the peace's game

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

No:2727

4178

←

Prev Next

→

Shooting down drones to keep the peace
Developer User3592｜Date and time 23/6/22 13:10:01
Build time 33.659 sec｜Game capacity 3.211KB｜

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>ドローン撃墜ゲーム</title>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
			background-color: #87ceeb;
			font-size: 0;
		}
		canvas {
			display: block;
			margin: 0 auto;
			background-color: #fff;
		}
		button {
			display: block;
			margin: 20px auto;
			padding: 10px 20px;
			font-size: 24px;
			border: none;
			border-radius: 5px;
			background-color: #ff6347;
			color: #fff;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="375" height="667"></canvas>
	<button id="start">スタート</button>
	<script type="text/javascript">
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		var score = 0;
		var drone = {
			x: canvas.width/2,
			y: canvas.height/2,
			r: 50,
			speed: 10,
			draw: function() {
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
				ctx.fillStyle = '#ff6347';
				ctx.fill();
				ctx.closePath();
			}
		};
		var missiles = [];
		var missileSpeed = 20;

function drawScore() {
			ctx.font = 'bold 24px Arial';
			ctx.textAlign = 'right';
			ctx.fillStyle = '#000';
			ctx.fillText(score, canvas.width-20, 40);
		}

function drawMissiles() {
			for (var i=0; i<missiles.length; i++) {
				var missile = missiles[i];
				ctx.fillStyle = '#000';
				ctx.fillRect(missile.x-missile.r/2, missile.y-missile.r/2, missile.r, missile.r);

missile.y -= missileSpeed;
				if (missile.y < 0) {
					missiles.splice(i, 1);
					i--;
				} else {
					if (isHit(drone, missile)) {
						score++;
						missiles.splice(i, 1);
						i--;
					}
				}
			}
		}

function isHit(a, b) {
			var d = Math.sqrt(Math.pow(a.x-b.x, 2) + Math.pow(a.y-b.y, 2));
			if (d <= a.r+b.r) {
				return true;
			} else {
				return false;
			}
		}

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

drone.draw();
			drawMissiles();
			drawScore();

if (Math.random() < 0.1) {
				var missileX = Math.random() * canvas.width;
				missiles.push({
					x: missileX,
					y: canvas.height,
					r: 20
				});
			}

if (score < 10) {
				drone.speed = 10;
			} else if (score < 20) {
				drone.speed = 15;
			} else {
				drone.speed = 20;
			}

if (keys.ArrowUp) {
				drone.y -= drone.speed;
			}
			if (keys.ArrowDown) {
				drone.y += drone.speed;
			}
			if (keys.ArrowLeft) {
				drone.x -= drone.speed;
			}
			if (keys.ArrowRight) {
				drone.x += drone.speed;
			}

if (drone.x < drone.r) {
				drone.x = drone.r;
			}
			if (drone.x > canvas.width-drone.r) {
				drone.x = canvas.width-drone.r;
			}
			if (drone.y < drone.r) {
				drone.y = drone.r;
			}
			if (drone.y > canvas.height-drone.r) {
				drone.y = canvas.height-drone.r;
			}

requestAnimationFrame(gameLoop);
		}

window.addEventListener('keydown', function(e) {
			keys[e.code] = true;
		});
		window.addEventListener('keyup', function(e) {
			keys[e.code] = false;
		});

var keys = {};
		document.getElementById('start').addEventListener('click', function() {
			score = 0;
			drone.x = canvas.width/2;
			drone.y = canvas.height/2;
			missiles = [];
			gameLoop();
		});
	</script>
</body>
</html>