シューティングゲーム

このゲームでは、画面上部から敵が降ってきて、プレイヤーは左右に移動しながら弾丸を撃って敵を倒すことが目的です。敵に当たってしまったらプレイヤーのライフが減ります。スコアは敵を倒すごとに100加算されます。プレイヤーは左右の矢印キーで移動し、スペースキーでショットします。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

はい、了解しました。

以下に示すのは、単純なシューティングゲームの例です。

<!DOCTYPE html>
<html>
<head>
	<title>シューティングゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body{
			margin: 0;
			padding: 0;
			background-color: #000;
			color: #fff;
			text-align: center;
			font-family: Arial, sans-serif;
		}
		canvas{
			display: block;
			margin: 0 auto;
			border: 2px solid #fff;
		}
	</style>
</head>
<body>
	<h1>シューティングゲーム</h1>
	<canvas id="canvas" width="400" height="600"></canvas>

// プレイヤーオブジェクト
		function Player(){
			this.x = gameWidth/2;
			this.y = gameHeight-50;
			this.width = 50;
			this.height = 50;
			this.color = "#fff";
			this.speed = 5;
			this.shootTimer = 0;

this.moveLeft = function(){
				if(this.x > 0){
					this.x -= this.speed;
				}
			};
			this.moveRight = function(){
				if(this.x < gameWidth-this.width){
					this.x += this.speed;
				}
			};
			this.shoot = function(){
				if(this.shootTimer <= 0){
					game.bulletList.push(new Bullet(this.x+(this.width/2), this.y, -10));
					this.shootTimer = 10; // 0.5秒
				}
			};
			this.update = function(){
				if(this.shootTimer > 0){
					this.shootTimer--;
				}
				if(leftArrowPressed){
					this.moveLeft();
				}
				if(rightArrowPressed){
					this.moveRight();
				}
				if(spaceBarPressed){
					this.shoot();
				}
			};
			this.draw = function(){
				ctx.fillStyle = this.color;
				ctx.fillRect(this.x, this.y, this.width, this.height);
			};
		}

// 敵オブジェクト
		function Enemy(x, y, vx, vy){
			this.x = x;
			this.y = y;
			this.width = 50;
			this.height = 50;
			this.color = "#f00";
			this.vx = vx;
			this.vy = vy;

this.update = function(){
				this.x += this.vx;
				this.y += this.vy;
				
				if(this.x < 0 || this.x > gameWidth-this.width){
					this.vx *= -1;
					this.y += 10;
				}
				if(this.y > gameHeight){
					// プレイヤーのライフを減らす処理など
					game.enemyList = game.enemyList.filter(function(enemy){
						return enemy !== this;
					}.bind(this));
				}

if(Math.random() < 0.1){
					game.bulletList.push(new Bullet(this.x+(this.width/2), this.y+this.height, 5));
				}
			};
			this.draw = function(){
				ctx.fillStyle = this.color;
				ctx.fillRect(this.x, this.y, this.width, this.height);
			};
		}

// 弾丸オブジェクト
		function Bullet(x, y, vy){
			this.x = x;
			this.y = y;
			this.width = 10;
			this.height = 20;
			this.color = "#fff";
			this.vy = vy;

this.update = function(){
				this.y += this.vy;
				if(this.y < 0 || this.y > gameHeight){
					game.bulletList = game.bulletList.filter(function(bullet){
						return bullet !== this;
					}.bind(this));
				}
			};
			this.draw = function(){
				ctx.fillStyle = this.color;
				ctx.fillRect(this.x, this.y, this.width, this.height);
			};
		}

// 入力処理
		var leftArrowPressed = false;
		var rightArrowPressed = false;
		var spaceBarPressed = false;
		document.addEventListener("keydown", function(e){
			if(e.key === "ArrowLeft"){
				leftArrowPressed = true;
			}
			if(e.key === "ArrowRight"){
				rightArrowPressed = true;
			}
			if(e.key === " "){
				spaceBarPressed = true;
			}
		});
		document.addEventListener("keyup", function(e){
			if(e.key === "ArrowLeft"){
				leftArrowPressed = false;
			}
			if(e.key === "ArrowRight"){
				rightArrowPressed = false;
			}
			if(e.key === " "){
				spaceBarPressed = false;
			}
		});

// ゲームループ
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var gameWidth = canvas.width;
		var gameHeight = canvas.height;
		game.player = new Player();
		setInterval(function(){
			// プレイヤーの更新
			game.player.update();

// 敵の更新と当たり判定
			game.enemyList.forEach(function(enemy){
				enemy.update();

// プレイヤーと敵の当たり判定
				if(enemy.x < game.player.x+game.player.width &&
					enemy.x+enemy.width > game.player.x &&
					enemy.y < game.player.y+game.player.height &&
					enemy.y+enemy.height > game.player.y){
					// プレイヤーのライフを減らす処理など
				}

// 弾丸と敵の当たり判定
				game.bulletList.forEach(function(bullet){
					if(enemy.x < bullet.x+bullet.width &&
						enemy.x+enemy.width > bullet.x &&
						enemy.y < bullet.y+bullet.height &&
						enemy.y+enemy.height > bullet.y){
						game.enemyList = game.enemyList.filter(function(enemy2){
							return enemy2 !== enemy;
						});
						game.bulletList = game.bulletList.filter(function(bullet2){
							return bullet2 !== bullet;
						});
						game.score += 100;
					}
				});
			});

// 弾丸の更新
			game.bulletList.forEach(function(bullet){
				bullet.update();
			});

// レンダリング
			ctx.clearRect(0, 0, gameWidth, gameHeight);
			game.player.draw();
			game.enemyList.forEach(function(enemy){
				enemy.draw();
			});
			game.bulletList.forEach(function(bullet){
				bullet.draw();
			});

// 敵の生成
			if(Math.random() < 0.01){
				var x = Math.random() * (gameWidth-50);
				var y = -50;
				var vx = (Math.random() < 0.5 ? -2 : 2);
				var vy = 1;
				game.enemyList.push(new Enemy(x, y, vx, vy));
			}
		}, 30);
	</script>
</body>
</html>