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

No:1089

133

←

Prev Next

→

Huxla
Developer User3243｜Date and time 23/6/18 2:47:35
Build time 62.525 sec｜Game capacity 4.65KB｜

Script

ハクスラ

敵を倒してレベルアップし、アイテムを集めよう！

操作方法：画面タップで攻撃、十字キーで移動

←

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">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ハクスラ</title>
	<style>
		body {
			font-size: 2em;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>ハクスラ</h1>
	<p>敵を倒してレベルアップし、アイテムを集めよう！</p>
	<p>操作方法：画面タップで攻撃、十字キーで移動</p>
	<div id="game"></div>
	<script>
		// ゲームのクラス定義
		class Game {
			constructor() {
				this.width = 10;
				this.height = 10;
				this.player = { x: 0, y: 0, level: 1 };
				this.items = [];
				this.enemies = [];
				this.grid = [];
				this.createGrid();
				this.generatePlayer();
				this.generateEnemies();
				this.generateItems();
				this.draw();
			}
			// ゲーム画面の初期化
			draw() {
				let html = "";
				for (let y = 0; y < this.height; y++) {
					for (let x = 0; x < this.width; x++) {
						let tile = "";
						if (this.grid[y][x] === 0) {
							tile = "　";
						} else if (this.grid[y][x] === 1) {
							tile = "🌳";
						} else if (this.grid[y][x] === 2) {
							tile = "🐉";
						} else if (this.grid[y][x] === 3) {
							tile = "🗡️";
						} else if (this.grid[y][x] === 4) {
							tile = "🛡️";
						} else if (this.grid[y][x] === 5) {
							tile = "🍎";
						}
						html += `<span>${tile}</span>`;
					}
					html += `<br>`;
				}
				document.getElementById("game").innerHTML = html;
			}
			// ゲームのグリッドの生成
			createGrid() {
				for (let y = 0; y < this.height; y++) {
					this.grid[y] = [];
					for (let x = 0; x < this.width; x++) {
						this.grid[y][x] = 1;
					}
				}
			}
			// プレイヤーの生成
			generatePlayer() {
				this.grid[this.player.y][this.player.x] = 3;
			}
			// エネミーの生成
			generateEnemies() {
				this.enemies.push({ x: 5, y: 5 });
				this.enemies.push({ x: 7, y: 7 });
				for (let enemy of this.enemies) {
					this.grid[enemy.y][enemy.x] = 2;
				}
			}
			// アイテムの生成
			generateItems() {
				this.items.push({ x: 2, y: 2, type: "sword" });
				this.items.push({ x: 8, y: 8, type: "shield" });
				this.items.push({ x: 5, y: 0, type: "apple" });
				for (let item of this.items) {
					if (item.type === "sword") {
						this.grid[item.y][item.x] = 3;
					} else if (item.type === "shield") {
						this.grid[item.y][item.x] = 4;
					} else if (item.type === "apple") {
						this.grid[item.y][item.x] = 5;
					}
				}
			}
			// 攻撃
			attack() {
				let enemyIndex = -1;
				for (let i = 0; i < this.enemies.length; i++) {
					let enemy = this.enemies[i];
					if (enemy.x === this.player.x && enemy.y === this.player.y) {
						enemyIndex = i;
						break;
					}
				}
				if (enemyIndex !== -1) {
					this.enemies.splice(enemyIndex, 1);
					this.player.level++;
					alert("レベルアップ！　現在のレベル：" + this.player.level);
				} else {
					alert("攻撃が外れた");
				}
			}
			// 移動
			move(x, y) {
				let newX = this.player.x + x;
				let newY = this.player.y + y;
				if (newX < 0 || newX >= this.width || newY < 0 || newY >= this.height) {
					return;
				}
				if (this.grid[newY][newX] === 1) {
					return;
				} else if (this.grid[newY][newX] === 2) {
					alert("敵だ！");
					return;
				} else if (this.grid[newY][newX] === 3) {
					alert("剣を手に入れた！");
					this.grid[newY][newX] = 0;
					return;
				} else if (this.grid[newY][newX] === 4) {
					alert("盾を手に入れた！");
					this.grid[newY][newX] = 0;
					return;
				} else if (this.grid[newY][newX] === 5) {
					alert("リンゴを手に入れた！");
					this.grid[newY][newX] = 0;
					return;
				}
				this.grid[this.player.y][this.player.x] = 0;
				this.player.x = newX;
				this.player.y = newY;
				if (this.player.x === 0 && this.player.y === 0) {
					alert("ゲームクリア！　レベル：" + this.player.level);
					this.player.level = 1;
				}
				this.grid[this.player.y][this.player.x] = 3;
				this.draw();
			}
		}
		// ゲーム開始
		let game = new Game();
		// 画面タップで攻撃
		document.addEventListener("click", () => {
			game.attack();
			game.draw();
		});
		// 十字キーで移動
		document.addEventListener("keydown", (event) => {
			event.preventDefault();
			switch (event.key) {
				case "ArrowUp":
					game.move(0, -1);
					break;
				case "ArrowDown":
					game.move(0, 1);
					break;
				case "ArrowLeft":
					game.move(-1, 0);
					break;
				case "ArrowRight":
					game.move(1, 0);
					break;
				default:
					break;
			}
		});
	</script>
</body>
</html>