Tezuka Osamu-style Dracula-like RPG's game

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

No:2225

171

←

Prev Next

→

Tezuka Osamu-style Dracula-like RPG
Developer User1006｜Date and time 23/6/20 15:59:31
Build time 76.714 sec｜Game capacity 4.653KB｜

Script

を作ってみました！

手塚治虫風RPGでは、プレイヤーが迷路を探索しながら、エンディングを目指すゲームです。プレイヤーの操作は簡単です。上下左右のキーを使って移動し、プレイヤーの向きはリアルタイムに変化します。木々と岩の柵を越えて、ゴールに近づいてください！

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

を作ってみました！

<!DOCTYPE html>
<html>
<head>
	<title>手塚治虫風RPG</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
			background-color: #5C5C5C;
			font-family: Arial, sans-serif;
		}
		canvas {
			display: block;
			margin: auto;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas" width="800" height="600"></canvas>
	<script type="text/javascript">
		// ゲームオブジェクト
		var Game = {
			canvas: null,
			ctx: null,
			mapSize: 16,
			tileSize: 32,
			map: [
				[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
				[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0],
				[1,0,1,1,1,1,1,1,1,0,0,0,0,0,1,0],
				[1,0,1,0,0,0,0,0,1,1,1,0,0,0,1,0],
				[1,0,1,0,1,1,1,0,0,0,1,0,1,0,1,0],
				[1,0,1,0,1,0,0,0,1,0,1,0,1,0,1,0],
				[1,0,1,0,1,0,1,1,1,0,1,0,1,0,1,0],
				[1,0,1,0,1,0,0,0,0,0,1,0,1,0,1,0],
				[1,0,1,0,1,0,1,1,1,0,1,0,1,0,1,0],
				[1,0,1,0,1,0,0,0,1,0,1,0,1,0,1,0],
				[1,0,1,1,1,1,1,0,0,0,1,0,1,0,1,0],
				[1,0,0,0,0,0,0,0,1,1,1,0,1,0,1,0],
				[1,1,1,1,1,1,1,1,1,0,0,0,1,0,1,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0],
				[0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1]
			],
			player: {
				x: 7,
				y: 4,
				dir: 0
			},
			init: function() {
				// キャンバスの設定
				this.canvas = document.getElementById("gameCanvas");
				this.ctx = this.canvas.getContext("2d");
				// マップの表示
				for (var y = 0; y < this.mapSize; y++) {
					for (var x = 0; x < this.mapSize; x++) {
						var tile = this.map[y][x];
						this.ctx.fillStyle = tile ? "#444444" : "#999999";
						this.ctx.fillRect(x * this.tileSize, y * this.tileSize, this.tileSize, this.tileSize);
					}
				}
				// プレイヤーの表示
				this.drawPlayer();
				// イベントリスナーの設定
				document.addEventListener("keydown", function(event) {
					Game.movePlayer(event.keyCode);
				});
			},
			drawPlayer: function() {
				this.ctx.fillStyle = "#FFD700";
				this.ctx.beginPath();
				this.ctx.arc((this.player.x + 0.5) * this.tileSize, (this.player.y + 0.5) * this.tileSize, this.tileSize / 3, 0, Math.PI * 2, false);
				this.ctx.fill();
				// プレイヤーの向きを表示
				var arrowX = (this.player.x + 0.5) * this.tileSize + Math.cos(this.player.dir * Math.PI / 180) * this.tileSize / 2;
				var arrowY = (this.player.y + 0.5) * this.tileSize + Math.sin(this.player.dir * Math.PI / 180) * this.tileSize / 2;
				this.ctx.fillStyle = "#FF0000";
				this.ctx.beginPath();
				this.ctx.moveTo((this.player.x + 0.5) * this.tileSize, (this.player.y + 0.5) * this.tileSize);
				this.ctx.lineTo(arrowX, arrowY);
				this.ctx.lineTo(arrowX + Math.cos((this.player.dir - 30) * Math.PI / 180) * this.tileSize / 4, arrowY + Math.sin((this.player.dir - 30) * Math.PI / 180) * this.tileSize / 4);
				this.ctx.lineTo(arrowX + Math.cos((this.player.dir + 30) * Math.PI / 180) * this.tileSize / 4, arrowY + Math.sin((this.player.dir + 30) * Math.PI / 180) * this.tileSize / 4);
				this.ctx.closePath();
				this.ctx.fill();
			},
			movePlayer: function(keyCode) {
				var newX = this.player.x;
				var newY = this.player.y;
				var newDir = this.player.dir;
				// 移動
				switch (keyCode) {
					case 37: // 左
						newDir = 270;
						newX--;
						break;
					case 38: // 上
						newDir = 0;
						newY--;
						break;
					case 39: // 右
						newDir = 90;
						newX++;
						break;
					case 40: // 下
						newDir = 180;
						newY++;
						break;
					default:
						return;
				}
				// 衝突判定
				if (newX < 0 || newY < 0 || newX >= this.mapSize || newY >= this.mapSize || this.map[newY][newX]) {
					return;
				}
				// 移動と向きの変更
				this.player.x = newX;
				this.player.y = newY;
				this.player.dir = newDir;
				// 再描画
				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
				for (var y = 0; y < this.mapSize; y++) {
					for (var x = 0; x < this.mapSize; x++) {
						var tile = this.map[y][x];
						this.ctx.fillStyle = tile ? "#444444" : "#999999";
						this.ctx.fillRect(x * this.tileSize, y * this.tileSize, this.tileSize, this.tileSize);
					}
				}
				this.drawPlayer();
			}
		};
		// ゲームの開始
		Game.init();
	</script>
</body>
</html>