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

No:2206

194

←

Prev Next

→

Action Puzzle RPG
Developer User3194｜Date and time 23/6/20 15:19:03
Build time 115.818 sec｜Game capacity 9.153KB｜

Script

Action Puzzle RPG

プレイヤーを操作して、宝石を集めて、敵と戦って、目的の場所までたどり着こう！

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Action Puzzle RPG</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			background-color: #f1f1f1;
			font-family: Arial, Helvetica, sans-serif;
		}

.container {
			width: 100%;
			max-width: 800px;
			margin: auto;
			padding: 10px;
			box-sizing: border-box;
		}

h1 {
			text-align: center;
			font-size: 36px;
			margin-top: 30px;
			margin-bottom: 20px;
		}

p {
			font-size: 18px;
			line-height: 1.5;
			margin-bottom: 20px;
		}

button {
			font-size: 24px;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			background-color: #4CAF50;
			color: white;
			cursor: pointer;
			transition: 0.3s;
		}

button:hover {
			background-color: #3e8e41;
		}

.game-board {
			width: 100%;
			max-width: 600px;
			height: 600px;
			background-color: white;
			margin: auto;
			margin-top: 20px;
			padding: 10px;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
		}

.game-tile {
			width: calc(100%/6);
			height: calc(100%/6);
			box-sizing: border-box;
			border: 2px solid black;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 48px;
			cursor: pointer;
			transition: 0.3s;
		}

.game-tile:nth-child(6n+1) {
			clear: left;
		}

.game-tile.invalid {
			background-color: grey;
		}

.game-tile.active {
			background-color: yellow;
		}

.game-tile.empty {
			background-color: white;
		}

.game-tile.rock {
			background-color: #666;
		}

.game-tile.gem {
			background-color: #0E6BA8;
		}

.game-tile.enemy {
			background-color: #D64541;
			color: white;
			font-size: 24px;
		}

.game-tile.player {
			background-color: #F89F21;
			color: white;
			font-size: 24px;
		}

.stats {
			width: 100%;
			max-width: 600px;
			height: 100px;
			background-color: white;
			margin: auto;
			margin-top: 20px;
			padding: 10px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

.stats-item {
			font-size: 24px;
		}

@media (max-width: 600px) {
			.game-tile {
				font-size: 32px;
			}

.stats-item {
				font-size: 18px;
			}
		}
	</style>
	<script>
		// ゲームデータを用意する
		const boardSize = 6; // 盤面サイズ
		const numGems = 5; // 宝石の数
		const numRocks = 10; // 岩の数
		const numEnemies = 2; // 敵の数
		let playerHealth = 100; // プレイヤーの初期体力
		let playerAttack = 10; // プレイヤーの攻撃力
		let playerDefense = 5; // プレイヤーの防御力
		let playerRow = boardSize - 1; // プレイヤーの初期位置（最下行の真ん中）
		let playerCol = Math.floor(boardSize / 2);
		let board = []; // 盤面
		let inventory = []; // 手持ちのアイテム

// 盤面のタイルの種類
		const tileTypes = {
			EMPTY: 0,
			ROCK: 1,
			GEM: 2,
			ENEMY: 3,
			PLAYER: 4
		};

// 宝石の種類
		const gemTypes = {
			RED: '🔴',
			BLUE: '🔵',
			GREEN: '🟢',
			YELLOW: '🟡',
			PURPLE: '🟣'
		};

// 初期化処理
		function initialize() {
			// 盤面を初期化する
			board = [];
			for (let i = 0; i < boardSize; i++) {
				board.push([]);
				for (let j = 0; j < boardSize; j++) {
					board[i].push(tileTypes.EMPTY);
				}
			}

// 岩を配置する
			for (let i = 0; i < numRocks; i++) {
				let row = getRandomInt(0, boardSize);
				let col = getRandomInt(0, boardSize);
				while (board[row][col] !== tileTypes.EMPTY) {
					row = getRandomInt(0, boardSize);
					col = getRandomInt(0, boardSize);
				}
				board[row][col] = tileTypes.ROCK;
			}

// 宝石を配置する
			for (let i = 0; i < numGems; i++) {
				let row = getRandomInt(0, boardSize);
				let col = getRandomInt(0, boardSize);
				while (board[row][col] !== tileTypes.EMPTY) {
					row = getRandomInt(0, boardSize);
					col = getRandomInt(0, boardSize);
				}
				let gemType = Object.values(gemTypes)[getRandomInt(0, Object.values(gemTypes).length)];
				board[row][col] = tileTypes.GEM;
				board[row][col].gemType = gemType;
			}

// 敵を配置する
			for (let i = 0; i < numEnemies; i++) {
				let row = getRandomInt(0, boardSize);
				let col = getRandomInt(0, boardSize);
				while (board[row][col] !== tileTypes.EMPTY) {
					row = getRandomInt(0, boardSize);
					col = getRandomInt(0, boardSize);
				}
				let enemy = {
					name: 'Enemy ' + (i + 1),
					health: getRandomInt(50, 100),
					attack: getRandomInt(5, 10),
					defense: getRandomInt(3, 8)
				};
				board[row][col] = tileTypes.ENEMY;
				board[row][col].enemy = enemy;
			}

// プレイヤーを配置する
			board[playerRow][playerCol] = tileTypes.PLAYER;
			board[playerRow][playerCol].player = {
				health: playerHealth,
				attack: playerAttack,
				defense: playerDefense
			};

// 盤面を表示する
			renderBoard();
			renderStats();
		}

// ランダムな整数を返す関数
		function getRandomInt(min, max) {
			return Math.floor(Math.random() * (max - min) + min);
		}

// 盤面を表示する関数
		function renderBoard() {
			let gameBoard = document.getElementById('game-board');
			gameBoard.innerHTML = '';
			for (let i = 0; i < boardSize; i++) {
				for (let j = 0; j < boardSize; j++) {
					let tile = document.createElement('div');
					tile.classList.add('game-tile');
					if (board[i][j] === tileTypes.EMPTY) {
						tile.classList.add('empty');
					} else if (board[i][j] === tileTypes.ROCK) {
						tile.classList.add('rock');
					} else if (board[i][j] === tileTypes.GEM) {
						tile.classList.add('gem');
						tile.textContent = board[i][j].gemType;
					} else if (board[i][j] === tileTypes.ENEMY) {
						tile.classList.add('enemy');
						tile.textContent = '👹';
					} else if (board[i][j] === tileTypes.PLAYER) {
						tile.classList.add('player');
						tile.textContent = '😎';
					}
					tile.dataset.row = i;
					tile.dataset.col = j;
					tile.addEventListener('click', clickTile);
					gameBoard.appendChild(tile);
				}
			}
		}

// タイルをクリックした時の処理
		function clickTile(event) {
			if (inventory.length < 5) {
				let row = Number(event.target.dataset.row);
				let col = Number(event.target.dataset.col);
				if (isValidMove(row, col)) {
					let tileType = board[row][col];
					if (tileType === tileTypes.GEM) {
						inventory.push(board[row][col].gemType);
						board[row][col] = tileTypes.EMPTY;
					} else if (tileType === tileTypes.ENEMY) {
						let enemy = board[row][col].enemy;
						if (playerAttack > enemy.defense) {
							let damage = playerAttack - enemy.defense;
							enemy.health -= damage;
							if (enemy.health <= 0) {
								inventory.push('💰');
								board[row][col] = tileTypes.EMPTY;
							} else {
								let playerDamage = Math.max(0, enemy.attack - playerDefense);
								playerHealth -= playerDamage;
								if (playerHealth <= 0) {
									alert('GAME OVER');
									initialize();
								}
							}
						} else {
							let playerDamage = Math.max(0, enemy.attack - playerDefense);
							playerHealth -= playerDamage;
							if (playerHealth <= 0) {
								alert('GAME OVER');
								initialize();
							}
						}
					}
					board[playerRow][playerCol] = tileTypes.EMPTY;
					playerRow = row;
					playerCol = col;
					board[playerRow][playerCol] = tileTypes.PLAYER;
					board[playerRow][playerCol].player = {
						health: playerHealth,
						attack: playerAttack,
						defense: playerDefense
					};
					renderBoard();
					renderStats();
				}
			}
		}

// 移動可能かどうか判定する関数
		function isValidMove(row, col) {
			if (row < 0 || row >= boardSize || col < 0 || col >= boardSize) {
				return false;
			}
			let tileType = board[row][col];
			if (tileType === tileTypes.INVALID) {
				return false;
			}
			let rowDiff = Math.abs(row - playerRow);
			let colDiff = Math.abs(col - playerCol);
			if (rowDiff + colDiff > 1) {
				return false;
			}
			return true;
		}

// ステータスを表示する関数
		function renderStats() {
			let stats = document.getElementById('stats');
			stats.innerHTML = '';
			let inventoryString = 'Inventory: ';
			for (let i = 0; i < inventory.length; i++) {
				if (i > 0) {
					inventoryString += ', ';
				}
				inventoryString += inventory[i];
			}
			let playerString = 'Player: Health ' + playerHealth + ', Attack ' + playerAttack + ', Defense ' + playerDefense;
			let statsItems = {
				INVENTORY: inventoryString,
				PLAYER: playerString
			};
			for (let key in statsItems) {
				let statItem = document.createElement('div');
				statItem.classList.add('stats-item');
				statItem.textContent = statsItems[key];
				stats.appendChild(statItem);
			}
		}

// ゲームを開始する
		initialize();
	</script>
</head>
<body>
	<div class="container">
		<h1>Action Puzzle RPG</h1>
		<p>プレイヤーを操作して、宝石を集めて、敵と戦って、目的の場所までたどり着こう！</p>
		<div id="game-board" class="game-board"></div>
		<div id="stats" class="stats"></div>
		<button onclick="initialize()">New Game</button>
	</div>
</body>
</html>