Make an interesting game.'s game

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

No:728

183

←

Prev Next

→

Make an interesting game.
Developer User3111｜Date and time 23/6/17 15:13:52
Build time 52.928 sec｜Game capacity 4.06KB｜

Script

HTML5とJavaScriptを使用して、スマホで遊べる「エモジシューティングゲーム」を作成しました。ゲームの概要：プレイヤーは、画面上に出現するエモジをショットガンで撃ち落とすゲームです。エモジは画面上から右から左へ進み、一度でもプレイヤーの位置に触れるとゲームオーバーとなります。ショットガンにはリロード時間があり、弾切れを起こすと一時的に無防備になってしまいます。高得点を目指して、エモジをどんどん落としましょう！以下が実際のプログラムです。

ゲームを遊ぶには、HTMLファイルをスマホのブラウザで開くだけで遊べます。プレイヤーは「↑」キーと「↓」キーで移動し、スワイプ操作でも操作可能です。楽しんでプレイしてください！

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

HTML5とJavaScriptを使用して、スマホで遊べる「エモジシューティングゲーム」を作成しました。

ゲームの概要：
プレイヤーは、画面上に出現するエモジをショットガンで撃ち落とすゲームです。エモジは画面上から右から左へ進み、一度でもプレイヤーの位置に触れるとゲームオーバーとなります。ショットガンにはリロード時間があり、弾切れを起こすと一時的に無防備になってしまいます。高得点を目指して、エモジをどんどん落としましょう！

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

```html
<!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;
			overflow: hidden;
		}
		canvas {
			display: block;
			background-color: #222;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		// ゲームオブジェクト
		var game = {
			canvas: null,
			ctx: null,
			width: window.innerWidth,
			height: window.innerHeight,
			score: 0,
			player: {
				x: 50,
				y: window.innerHeight / 2,
				reload: 0
			},
			emojis: []
		};

// キーボード操作
		window.addEventListener("keydown", function(e) {
			if (e.key === "ArrowUp") {
				game.player.y -= 25;
			}
			if (e.key === "ArrowDown") {
				game.player.y += 25;
			}
		});

// ゲーム初期化
		function init() {
			// キャンバス作成
			game.canvas = document.getElementById("canvas");
			game.canvas.width = game.width;
			game.canvas.height = game.height;
			game.ctx = game.canvas.getContext("2d");
			// エモジ作成
			setInterval(function() {
				var emoji = {
					x: game.width,
					y: Math.floor(Math.random() * game.height),
					size: Math.floor(Math.random() * 40) + 40,
					speed: Math.floor(Math.random() * 5) + 5
				};
				game.emojis.push(emoji);
			}, 2000);
			// メインループ
			setInterval(function() {
				// ショットガンのリロード
				if (game.player.reload > 0) {
					game.player.reload--;
				}
				// エモジ移動
				for (var i = 0; i < game.emojis.length; i++) {
					game.emojis[i].x -= game.emojis[i].speed;
					if (game.emojis[i].x < 0) {
						game.emojis.splice(i, 1);
						i--;
					}
				}
				// エモジとプレイヤーの衝突判定
				for (var i = 0; i < game.emojis.length; i++) {
					if (
						game.emojis[i].x < game.player.x + 30 &&
						game.emojis[i].x + game.emojis[i].size > game.player.x &&
						game.emojis[i].y < game.player.y + 30 &&
						game.emojis[i].y + game.emojis[i].size > game.player.y
					) {
						game.emojis.splice(i, 1);
						i--;
						game.player.reload = 50;
						game.score++;
					}
				}
				// 描画
				game.ctx.clearRect(0, 0, game.width, game.height);
				game.ctx.fillStyle = "#fff";
				game.ctx.font = "30px Arial";
				game.ctx.fillText("Score: " + game.score, 10, 40);
				game.ctx.fillStyle = "#f00";
				game.ctx.fillRect(game.player.x, game.player.y, 30, 30);
				game.ctx.lineWidth = 3;
				game.ctx.strokeStyle = "#f00";
				game.ctx.beginPath();
				game.ctx.moveTo(game.player.x, game.player.y + 15);
				game.ctx.lineTo(game.player.x - 30, game.player.y + 15);
				game.ctx.stroke();
				if (game.player.reload > 0) {
					game.ctx.fillStyle = "#f00";
					game.ctx.fillText("RELOADING...", game.player.x + 40, game.player.y + 20);
				}
				for (var i = 0; i < game.emojis.length; i++) {
					game.ctx.font = game.emojis[i].size + "px Arial";
					game.ctx.fillText("🤔", game.emojis[i].x, game.emojis[i].y + game.emojis[i].size);
				}
			}, 1000 / 60);
		}

window.onload = function() {
			init();
		};
	</script>
</body>
</html>
```