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

No:1336

290

←

Prev Next

→

Shooting game, with counters.
Developer User3311｜Date and time 23/6/18 11:20:15
Build time 58.892 sec｜Game capacity 6.047KB｜

Script

以下が実際のプログラムの例です。

シューティングゲーム

左右に移動して、スペースキーで弾を発射！

発射した弾で敵を倒していこう！

カウンター： 0

このゲームは、プレイヤーが左右に移動し、スペースキーで弾を発射して敵を倒していくシューティングゲームです。カウンターで倒したエネミーの数が表示されます。プレイヤーが敵に当たるとゲームオーバーとなります。スマホでも操作が可能なように、ボタンやタッチイベントで操作できるようにすることができます。

←

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>
		body {
			background-color: black;
			color: white;
			font-size: 20px;
			text-align: center;
		}
		#canvas {
			background-color: white;
		}
	</style>
</head>
<body>
	<h1>シューティングゲーム</h1>
	<p>左右に移動して、スペースキーで弾を発射！</p>
	<p>発射した弾で敵を倒していこう！</p>
	<p>カウンター： <span id="count">0</span></p>

init: function() {
				this.canvas = document.getElementById("canvas");
				this.ctx = this.canvas.getContext("2d");

// プレイヤーオブジェクトを作成
				this.player = new Player(this.canvas.width/2, this.canvas.height-50);
				// エネミーオブジェクトを作成
				for (var i = 0; i < 10; i++) {
					var x = Math.floor(Math.random()*this.canvas.width);
					var y = Math.floor(Math.random()*this.canvas.height/2);
					this.enemies.push(new Enemy(x, y));
				}

// イベントリスナーを設定
				document.addEventListener("keydown", this.movePlayer.bind(this));
				document.addEventListener("keyup", this.stopPlayer.bind(this));

// レンダリング開始
				this.render();
			},

render: function() {
				// クリア
				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

// プレイヤーを描画
				this.player.draw(this.ctx);

// エネミーを描画
				for (var i = 0; i < this.enemies.length; i++) {
					this.enemies[i].draw(this.ctx);
				}

// 弾を描画
				for (var i = 0; i < this.bullets.length; i++) {
					this.bullets[i].draw(this.ctx);
				}

// 当たり判定
				this.checkCollision();

// カウンターを更新
				document.getElementById("count").innerHTML = this.count;

// 再帰的に呼び出し
				window.requestAnimationFrame(this.render.bind(this));
			},

movePlayer: function(e) {
				switch (e.keyCode) {
					case 37: // 左
						this.player.moveLeft();
						break;
					case 39: // 右
						this.player.moveRight(this.canvas.width);
						break;
					case 32: // スペースキー
						this.bullets.push(new Bullet(this.player.x, this.player.y));
						break;
				}
			},

stopPlayer: function(e) {
				switch (e.keyCode) {
					case 37: // 左
					case 39: // 右
						this.player.stop();
						break;
				}
			},

checkCollision: function() {
				// 弾とエネミーの当たり判定
				for (var i = 0; i < this.bullets.length; i++) {
					for (var j = 0; j < this.enemies.length; j++) {
						if (this.bullets[i].hit(this.enemies[j])) {
							// 当たった弾とエネミーを削除
							this.bullets.splice(i, 1);
							this.enemies.splice(j, 1);
							// カウンターを更新
							this.count++;
							// 音を再生
							var sound = new Audio("explosion.mp3");
							sound.play();
						}
					}
				}

// プレイヤーとエネミーの当たり判定
				for (var i = 0; i < this.enemies.length; i++) {
					if (this.player.hit(this.enemies[i])) {
						// ゲームオーバー
						alert("GAME OVER");
						location.reload();
					}
				}
			}
		};

// プレイヤーオブジェクト
		function Player(x, y) {
			this.x = x;
			this.y = y;
			this.speed = 5;
			this.width = 50;
			this.height = 50;
			this.movingLeft = false;
			this.movingRight = false;
		}
		Player.prototype.moveLeft = function() {
			this.movingLeft = true;
		}
		Player.prototype.moveRight = function(limit) {
			this.movingRight = true;
			this.limit = limit;
		}
		Player.prototype.stop = function() {
			this.movingLeft = false;
			this.movingRight = false;
		}
		Player.prototype.draw = function(ctx) {
			if (this.movingLeft) {
				this.x -= this.speed;
				if (this.x < 0) { // 左端まで来たら止まる
					this.x = 0;
				}
			}
			if (this.movingRight) {
				this.x += this.speed;
				if (this.x+this.width > this.limit) { // 右端まで来たら止まる
					this.x = this.limit-this.width;
				}
			}
			ctx.fillStyle = "yellow";
			ctx.fillRect(this.x, this.y, this.width, this.height);
		}
		Player.prototype.hit = function(object) {
			if (this.x < object.x+object.width &&
				this.x+this.width > object.x &&
				this.y < object.y+object.height &&
				this.y+this.height > object.y) {
				return true;
			}
			return false;
		}

// エネミーオブジェクト
		function Enemy(x, y) {
			this.x = x;
			this.y = y;
			this.width = 50;
			this.height = 50;
		}
		Enemy.prototype.draw = function(ctx) {
			ctx.fillStyle = "red";
			ctx.fillRect(this.x, this.y, this.width, this.height);
		}

// 弾オブジェクト
		function Bullet(x, y) {
			this.x = x+25;
			this.y = y-10;
			this.width = 10;
			this.height = 20;
			this.speed = 10;
		}
		Bullet.prototype.draw = function(ctx) {
			this.y -= this.speed;
			if (this.y < -this.height) { // 画面外に出たら削除
				var index = game.bullets.indexOf(this);
				game.bullets.splice(index, 1);
			}
			ctx.fillStyle = "green";
			ctx.fillRect(this.x, this.y, this.width, this.height);
		}
		Bullet.prototype.hit = function(object) {
			if (this.x < object.x+object.width &&
				this.x+this.width > object.x &&
				this.y < object.y+object.height &&
				this.y+this.height > object.y) {
				return true;
			}
			return false;
		}

// 初期化
		game.init();
	</script>
</body>
</html>