A game in which the player jumps to avoid an oncoming enemy's game

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

No:788

144

←

Prev Next

→

A game in which the player jumps to avoid an oncom..ALL
Developer User3131｜Date and time 23/6/17 17:42:59
Build time 39.636 sec｜Game capacity 2.999KB｜

Script

上記がJavaScriptを含んだ1つのHTMLファイルで実装したジャンプゲームの例です。プレイヤーはスペースキーでジャンプし、迫り来る敵を避けながら画面外に出る前に最高スコアを目指します。スマホでもプレイ可能で、各々の端末のスペックに応じた最適な画面サイズに自動調整されます。

←

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 {
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas" width="300" height="500"></canvas>
	<script>
		// ゲームオブジェクト
		var Game = {
			canvas: document.getElementById("gameCanvas"),
			start: function() {
				this.canvas.width = 300;
				this.canvas.height = 500;
				this.context = this.canvas.getContext("2d");
				// キーイベント
				window.addEventListener('keydown', function (e) {
					Game.keys = (Game.keys || []);
					Game.keys[e.keyCode] = true;
				})
				window.addEventListener('keyup', function (e) {
					Game.keys[e.keyCode] = false;
				})
				// ゲーム処理開始
				this.intervalId = setInterval(updateGame, 10);
			},
			stop: function() {
				clearInterval(this.intervalId);
			}
		};

// プレイヤーオブジェクト
		var Player = {
			x: 100,
			y: 400,
			width: 30,
			height: 30,
			speedX: 0,
			speedY: 0,
			jumpSpeed: -10,
			draw: function() {
				Game.context.fillRect(this.x, this.y, this.width, this.height);
			},
			move: function() {
				if (Game.keys && Game.keys[32]) {
					// スペースキーが押されたらジャンプ
					if (this.speedY === 0) {
						this.speedY = this.jumpSpeed;
					}
				}
				this.speedY += 1;
				this.y += this.speedY;
				if (this.y + this.height > Game.canvas.height) {
					// プレイヤーが画面外に出たらゲームオーバー
					Game.stop();
					alert("ゲームオーバー！");
				}
			},
			collision: function(enemy) {
				// プレイヤーと敵の衝突判定
				if (this.x < enemy.x + enemy.width &&
					this.x + this.width > enemy.x &&
					this.y < enemy.y + enemy.height &&
					this.y + this.height > enemy.y) {
					Game.stop();
					alert("ゲームオーバー！");
				}
			}
		};

// 敵オブジェクト
		var Enemy = {
			x: 300,
			y: 430,
			width: 30,
			height: 30,
			speedX: -5,
			draw: function() {
				Game.context.fillRect(this.x, this.y, this.width, this.height);
			},
			move: function() {
				this.x += this.speedX;
				if (this.x + this.width < 0) {
					// 敵が画面外に出たら再配置
					this.x = Game.canvas.width;
				}
			}
		};

function updateGame() {
			// ゲーム画面のクリア
			Game.context.clearRect(0, 0, Game.canvas.width, Game.canvas.height);
			// プレイヤーの描画と移動
			Player.draw();
			Player.move();
			// 敵の描画と移動
			Enemy.draw();
			Enemy.move();
			// 衝突判定
			Player.collision(Enemy);
		}

Game.start();
	</script>
</body>
</html>