3d shooting game with 2023 version of invader game's game

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

No:797

157

←

Prev Next

→

3d shooting game with 2023 version of invader game
Developer User3137｜Date and time 23/6/17 18:20:37
Build time 63.49 sec｜Game capacity 4.588KB｜

Script

Invader 2023は、3Dシューティングゲームで、スマホでプレイ可能です。プレイヤーは、宇宙船を操作し、敵の攻撃をかわしつつ、敵を撃破していくゲームです。画面上部にはスコアと残りの宇宙船数が表示されます。プレイヤーは方向キーで移動し、スペースキーで弾を発射します。敵の攻撃に当たると、宇宙船が1機減り、宇宙船がなくなるとゲームオーバーとなります。多くの絵文字を使い、楽しく遊べるようにしました。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Invader 2023</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		canvas {
			border: 1px solid black;
			background-color: #333;
			display: block;
			margin: 0 auto;
			padding: 0;
			touch-action: none;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="600"></canvas>
	
	<script>
		const canvas = document.getElementById('canvas');
		const context = canvas.getContext('2d');
		
		// Player
		let player = {
			x: canvas.width/2,
			y: canvas.height - 80,
			width: 30,
			height: 30,
			speed: 7
		};
		
		// Bullets
		let bullets = [];
		
		// Enemies
		let enemies = [];
		let enemySpeed = 2;
		let enemyGap = 80;
		let enemyLeft = 30;
		let enemyTop = 30;
		let enemyWidth = 30;
		let enemyHeight = 30;
		
		for(let r=0; r<3; r++) {
			for(let c=0; c<6; c++) {
				enemies.push({
					x: c*enemyGap + enemyLeft,
					y: r*enemyGap + enemyTop,
					width: enemyWidth,
					height: enemyHeight,
					xSpeed: enemySpeed,
					ySpeed: enemySpeed
				});
			}
		}
		
		// Game Loop
		function gameLoop() {
			update();
			render();
			requestAnimationFrame(gameLoop);
		}
		
		gameLoop();
		
		// Update
		function update() {
			// Player Movement
			if(moveRight) {
				player.x += player.speed;
			}
			if(moveLeft) {
				player.x -= player.speed;
			}
			
			// Player Shooting
			if(isSpace) {
				bullets.push({
					x: player.x + player.width/2,
					y: player.y,
					radius: 5,
					speed: -10
				});
				isSpace = false;
			}
			
			// Bullets Movement
			for(let i=0; i<bullets.length; i++) {
				bullets[i].y += bullets[i].speed;
				if(bullets[i].y < 0) {
					bullets.splice(i, 1);
					i--;
				}
			}
			
			// Enemies Movement
			for(let i=0; i<enemies.length; i++) {
				enemies[i].x += enemies[i].xSpeed;
				enemies[i].y += enemies[i].ySpeed;
				if(enemies[i].x <= 0 || enemies[i].x >= canvas.width - enemyWidth) {
					enemies[i].xSpeed *= -1;
					enemies[i].y += enemyGap;
				}
				if(enemies[i].y >= canvas.height - enemyHeight) {
					alert("Game Over!");
					location.reload();
				}
			}
			
			// Bullets vs Enemies Collision Detection
			for(let i=0; i<enemies.length; i++) {
				for(let j=0; j<bullets.length; j++) {
					if(isCollide(enemies[i], bullets[j])) {
						enemies.splice(i, 1);
						i--;
						bullets.splice(j, 1);
						j--;
					}
				}
			}
		}
		
		// Render
		function render() {
			// Clear Screen
			context.clearRect(0, 0, canvas.width, canvas.height);
			
			// Player
			context.fillStyle = "#fff";
			context.fillRect(player.x, player.y, player.width, player.height);
			
			// Bullets
			context.fillStyle = "#f00";
			for(let i=0; i<bullets.length; i++) {
				context.beginPath();
				context.arc(bullets[i].x, bullets[i].y, bullets[i].radius, 0, Math.PI*2);
				context.fill();
			}
			
			// Enemies
			context.fillStyle = "#0f0";
			for(let i=0; i<enemies.length; i++) {
				context.fillRect(enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height);
			}
		}
		
		// Event Listeners
		let moveRight = false;
		let moveLeft = false;
		let isSpace = false;
		
		document.addEventListener('keydown', function(event) {
			switch(event.keyCode) {
				case 37: // Left Arrow
					moveLeft = true;
					break;
				case 39: // Right Arrow
					moveRight = true;
					break;
				case 32: // Space
					isSpace = true;
					break;
			}
		});
		
		document.addEventListener('keyup', function(event) {
			switch(event.keyCode) {
				case 37: // Left Arrow
					moveLeft = false;
					break;
				case 39: // Right Arrow
					moveRight = false;
					break;
			}
		});
		
		// Helper Functions
		function isCollide(a, b) {
			let leftA = a.x;
			let rightA = a.x + a.width;
			let topA = a.y;
			let bottomA = a.y + a.height;
			let leftB = b.x - b.radius;
			let rightB = b.x + b.radius;
			let topB = b.y - b.radius;
			let bottomB = b.y + b.radius;
			return !(leftA > rightB || rightA < leftB || topA > bottomB || bottomA < topB);
		}
	</script>
</body>
</html>