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

No:2260

570

←

Prev Next

→

Dragon Quest
Developer User3528｜Date and time 23/6/20 19:03:42
Build time 51.57 sec｜Game capacity 4.161KB｜

Script

のモンスターバトルゲームを作成しました。

モンスターバトル

🧑

🐲

このゲームは、プレイヤーとドラゴンが戦うモンスターバトルゲームです。プレイヤーは攻撃または回復を選択することができます。攻撃すると、攻撃力に応じたダメージが与えられます。回復すると、ランダムな数値の回復が行われますが、ドラゴンも攻撃してくるため、注意が必要です。どちらかのHPが0になるまで戦い続けます。

←

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>
			body {
				background-color: #7FFFD4;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 100vh;
				font-size: 20px;
			}
		
			button {
				background-color: #6495ED;
				color: white;
				border: none;
				padding: 10px 20px;
				border-radius: 5px;
				font-size: 20px;
				margin: 10px;
				cursor: pointer;
			}
			
			#message {
				background-color: white;
				padding: 10px;
				border-radius: 5px;
				margin: 10px;
				text-align: center;
				width: 300px;
			}
			
			#player {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 10px;
				font-size: 30px;
			}
			
			#enemy {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 10px;
				font-size: 30px;
			}
			
			#battle-log {
				background-color: white;
				padding: 10px;
				border-radius: 5px;
				margin: 10px;
				height: 200px;
				overflow: scroll;
				width: 300px;
			}
		</style>
	</head>
	<body>
		<h1>モンスターバトル</h1>
		<div id="player">🧑</div>
		<div id="enemy">🐲</div>
		<div id="battle-log"></div>
		<div id="message"></div>
		<button onclick="attack()">攻撃する</button>
		<button onclick="heal()">回復する</button>
		
		<script>
			let player = {
				name: '主人公',
				hp: 30,
				maxHp: 30,
				attack: 5,
				defense: 3
			};
			
			let enemy = {
				name: 'ドラゴン',
				hp: 20,
				maxHp: 20,
				attack: 7,
				defense: 2
			};
			
			function attack() {
				let damage = calculateDamage(player, enemy);
				enemy.hp -= damage;
				log(`${player.name}の攻撃！${enemy.name}に${damage}のダメージ！`);
				if (enemy.hp <= 0) {
					endBattle(`${enemy.name}を倒した！`);
					return;
				}
				damage = calculateDamage(enemy, player);
				player.hp -= damage;
				log(`${enemy.name}の攻撃！${player.name}に${damage}のダメージ！`);
				if (player.hp <= 0) {
					endBattle(`${player.name}は倒れた！`);
					return;
				}
				updateStats();
			}
			
			function heal() {
				let amount = getRandomInt(3, 8);
				player.hp += amount;
				if (player.hp > player.maxHp) {
					player.hp = player.maxHp;
				}
				log(`${player.name}の回復！${amount}のHP回復！`);
				damage = calculateDamage(enemy, player);
				player.hp -= damage;
				log(`${enemy.name}の攻撃！${player.name}に${damage}のダメージ！`);
				if (player.hp <= 0) {
					endBattle(`${player.name}は倒れた！`);
					return;
				}
				updateStats();
			}
			
			function calculateDamage(attacker, defender) {
				let damage = Math.floor(attacker.attack * (1 - defender.defense / 10));
				if (damage < 1) {
					damage = 1;
				}
				return damage;
			}
			
			function endBattle(message) {
				log(message);
				document.querySelector('#message').textContent = message;
				document.querySelector('button[onclick="attack()"]').disabled = true;
				document.querySelector('button[onclick="heal()"]').disabled = true;
			}
			
			function log(message) {
				document.querySelector('#battle-log').innerHTML += `${message}<br>`;
			}
			
			function updateStats() {
				document.querySelector('#player').innerHTML = `${player.name} HP:${player.hp}/${player.maxHp}`;
				document.querySelector('#enemy').innerHTML = `${enemy.name} HP:${enemy.hp}/${enemy.maxHp}`;
			}
			
			function getRandomInt(min, max) {
				min = Math.ceil(min);
				max = Math.floor(max);
				return Math.floor(Math.random() * (max - min)) + min;
			}
			
			updateStats();
		</script>
	</body>
</html>