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

No:2075

2336

←

Prev Next

→

A game in which a brave man defeats the Demon King
Developer もちきなこ｜Date and time 23/6/20 1:21:14
Build time 54.532 sec｜Game capacity 3.765KB｜

Script

Brave man vs. Demon king

The heroes are on their way to the Demon Kings castle. Various monsters are waiting for him on the way. Lets operate the hero to defeat the Demon King!

←

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>勇者 vs 魔王</title>
	<style>
		body {
			font-size: 24px;
			text-align: center;
			margin-top: 50px;
			background-color: #cfe8f4;
		}
		h1 {
			margin-bottom: 50px;
		}
		button {
			background-color: #ec407a;
			color: #fff;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			margin: 20px;
			cursor: pointer;
		}
		img {
			max-width: calc(100% - 40px);
			margin: 20px;
		}
	</style>
</head>
<body>
	<h1>勇者 vs 魔王</h1>
	<p>勇者は魔王の城に向かっています。途中で様々なモンスターが待ち受けています。勇者を操作して魔王を倒しましょう！</p>
	<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/crossed-swords_2694-fe0f.png" alt="">
	<button id="attackBtn">攻撃する</button>
	<button id="healBtn">回復する</button>
	<p id="message"></p>
	
	<script>
		let hero = {
			name: "勇者",
			hp: 100,
			mp: 50,
			attack: 10,
			defense: 5
		}
		let boss = {
			name: "魔王",
			hp: 200,
			mp: 100,
			attack: 15,
			defense: 10
		}
		let monsters = [
			{name: "ゴブリン", hp: 30, attack: 5, defense: 2},
			{name: "スライム", hp: 20, attack: 3, defense: 1},
			{name: "ドラゴン", hp: 100, attack: 20, defense: 15}
		]
		let currentMonster = null
		
		function getRandomMonster() {
			let index = Math.floor(Math.random() * monsters.length)
			return monsters[index]
		}
		
		function showMessage(msg) {
			let messageElem = document.getElementById("message")
			messageElem.innerText = msg
		}
		
		function showHeroStatus() {
			showMessage(`${hero.name}のHP:${hero.hp} MP:${hero.mp}`)
		}
		
		function showBossStatus() {
			showMessage(`${boss.name}のHP:${boss.hp} MP:${boss.mp}`)
		}
		
		function showMonsterStatus() {
			showMessage(`${currentMonster.name}の攻撃！`)
		}
		
		function attack() {
			if(currentMonster == null) {
				showMessage("モンスターが現れません")
				return
			}
			let damage = hero.attack - currentMonster.defense
			currentMonster.hp -= damage
			showMessage(`${hero.name}の攻撃！${currentMonster.name}に${damage}のダメージを与えた`)
			if(currentMonster.hp <= 0) {
				showMessage(`${currentMonster.name}を倒した！`)
				currentMonster = null
			} else {
				showMonsterStatus()
				damage = currentMonster.attack - hero.defense
				hero.hp -= damage
				showMessage(`${currentMonster.name}の攻撃！${hero.name}は${damage}のダメージを受けた`)
				if(hero.hp <= 0) {
					showMessage(`${hero.name}は倒れた...`)
					hero.hp = 0
					document.getElementById("attackBtn").disabled = true
					document.getElementById("healBtn").disabled = true
				} else {
					showHeroStatus()
				}
			}
		}
		
		function heal() {
			if(hero.mp <= 0) {
				showMessage(`${hero.name}のMPが足りません`)
				return
			}
			hero.mp -= 10
			hero.hp += 20
			if(hero.hp > 100) {
				hero.hp = 100
			}
			showMessage(`${hero.name}は回復した。HPが20回復した`)
			showHeroStatus()
		}
		
		document.getElementById("attackBtn").addEventListener("click", attack)
		document.getElementById("healBtn").addEventListener("click", heal)
		
		let startBtn = document.createElement("button")
		startBtn.innerText = "冒険を始める"
		startBtn.style.display = "block"
		document.body.appendChild(startBtn)
		
		startBtn.addEventListener("click", function() {
			currentMonster = getRandomMonster()
			this.style.display = "none"
			showMessage(`${currentMonster.name}が現れた！`)
			showMonsterStatus()
			showHeroStatus()
			showBossStatus()
			document.getElementById("attackBtn").disabled = false
			document.getElementById("healBtn").disabled = false
		})
	</script>
</body>
</html>