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

No:1356

318

←

Prev Next

→

I was told that in the
Developer User3235｜Date and time 23/6/18 12:01:00
Build time 46.742 sec｜Game capacity 4.423KB｜

Script

Yes, sir.、Noted! Below is an example of an online shooter implementation.

online shooting game

Tap the screen to fire bullets. You can move it left and right.

Score: 0

In this game, the player fires bullets and、Score points while defeating enemies. The game is over when the player collides with an enemy. I use a lot of pictograms.、If you are in a Japanese environment, it should display without problems. To be able to play on a smartphone as well.、It is operated by tapping, not by keyboard.

←

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>
		canvas {
			border: 1px solid #000;
		}
		#score {
			font-size: 20px;
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<h1>オンラインシューティングゲーム</h1>
	<p>画面をタップすると弾を発射します。左右に動かすことができます。</p>
	<canvas id="game" width="320" height="480"></canvas>
	<div id="score">得点: 0</div>
	<script>
		// ゲーム
		var score = 0;
		var canvas = document.getElementById("game");
		var ctx = canvas.getContext("2d");
		var bullets = [];
		var enemies = [];

// 弾
		function Bullet(x, y) {
			this.x = x;
			this.y = y;
			this.speed = 5;
			this.width = 5;
			this.height = 10;
			this.update = function() {
				this.y -= this.speed;
				ctx.fillStyle = "#f00";
				ctx.fillRect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height);
			};
		}

// 敵
		function Enemy(x, y) {
			this.x = x;
			this.y = y;
			this.speed = 2;
			this.width = 30;
			this.height = 30;
			this.update = function() {
				this.y += this.speed;
				ctx.fillStyle = "#00f";
				ctx.fillRect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height);
			};
		}

// プレイヤー
		var player = {
			x: canvas.width / 2,
			y: canvas.height - 50,
			speed: 5,
			width: 30,
			height: 30,
			update: function() {
				if (leftDown) {
					this.x -= this.speed;
				}
				if (rightDown) {
					this.x += this.speed;
				}
				if (this.x - this.width / 2 < 0) {
					this.x = this.width / 2;
				}
				if (this.x + this.width / 2 > canvas.width) {
					this.x = canvas.width - this.width / 2;
				}
				ctx.fillStyle = "#0f0";
				ctx.fillRect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height);
			}
		};

// キーボード
		var leftDown = false;
		var rightDown = false;
		document.addEventListener("keydown", function(event) {
			if (event.keyCode === 37) {
				leftDown = true;
			} else if (event.keyCode === 39) {
				rightDown = true;
			}
		});
		document.addEventListener("keyup", function(event) {
			if (event.keyCode === 37) {
				leftDown = false;
			} else if (event.keyCode === 39) {
				rightDown = false;
			}
		});

// 敵生成
		setInterval(function() {
			var x = Math.floor(Math.random() * (canvas.width - 40)) + 20;
			var y = -30;
			enemies.push(new Enemy(x, y));
		}, 1000);

// 描画
		setInterval(function() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			player.update();
			score++;
			document.getElementById("score").innerHTML = "得点: " + score;
			for (var i = 0; i < bullets.length; i++) {
				bullets[i].update();
				if (bullets[i].y + bullets[i].height / 2 < 0) {
					bullets.splice(i, 1);
					i--;
				}
			}
			for (var i = 0; i < enemies.length; i++) {
				enemies[i].update();
				if (enemies[i].y - enemies[i].height / 2 > canvas.height) {
					enemies.splice(i, 1);
					i--;
				}
				for (var j = 0; j < bullets.length; j++) {
					if (Math.abs(bullets[j].x - enemies[i].x) < (bullets[j].width + enemies[i].width) / 2 && Math.abs(bullets[j].y - enemies[i].y) < (bullets[j].height + enemies[i].height) / 2) {
						score += 100;
						document.getElementById("score").innerHTML = "得点: " + score;
						bullets.splice(j, 1);
						j--;
						enemies.splice(i, 1);
						i--;
						break;
					}
				}
				if (Math.abs(player.x - enemies[i].x) < (player.width + enemies[i].width) / 2 && Math.abs(player.y - enemies[i].y) < (player.height + enemies[i].height) / 2) {
					alert("ゲームオーバー！得点: " + score);
					location.reload();
				}
			}
		}, 50);

// クリック
		canvas.addEventListener("click", function(event) {
			var x = event.clientX - canvas.offsetLeft;
			var y = event.clientY - canvas.offsetTop;
			bullets.push(new Bullet(x, player.y));
		});
	</script>
</body>
</html>

このゲームではプレイヤーが弾を発射して、敵を倒しながら得点を稼ぎます。プレイヤーが敵と衝突するとゲームオーバーになります。絵文字を多めに使っていますが、日本語環境であれば問題なく表示されるはずです。スマホでも遊べるように、キーボードではなくタップで操作します。