AI game creator

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

No:3300

4757

←

Prev Next

→

end-stage monster
Developer User3662｜Date and time 23/6/24 12:21:14
Build time 38.786 sec｜Game capacity 3.749KB｜

Script

ラスボスバトル

これは、JavaScriptを用いたシンプルなラスボスバトルゲームです。ゲーム画面には、プレイヤーとラスボスのHPが表示され、攻撃、回復魔法、必殺技のボタンがあります。プレイヤーが行動すると、それに応じてラスボスも攻撃してきます。プレイヤーがラスボスを倒すことができれば勝利、逆にプレイヤーのHPが0になると敗北となります。最後に、スマホでも操作しやすいように、レイアウトを適切に調整しました。

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
	<title>ラスボスバトル</title>
</head>
<body onload="init()">
	<div id="startScreen">
		<h2>ラスボスバトル</h2>
		<button onclick="startGame()">ゲームスタート</button>
	</div>
	
	<div id="gameScreen" style="display:none;">
		<div id="player">
			<h3>プレイヤー</h3>
			<span class="emoji">😜</span>
			<br>
			HP: <span id="playerHp"></span>
		</div>
		<div id="boss">
			<h3>ラスボス</h3>
			<span class="emoji">😈</span>
			<br>
			HP: <span id="bossHp"></span>
		</div>
		<div id="actions">
			<button onclick="playerAttack()">攻撃！</button>
			<button onclick="heal()">回復魔法</button>
			<button onclick="specialAttack()">必殺技</button>
		</div>
		<div id="status"></div>
	</div>
	
	<script>
		var playerHp = 100;
		var bossHp = 200;
		var turn = 1;
		var gameRunning = false;
		
		function init() {
			document.getElementById("playerHp").innerHTML = playerHp;
			document.getElementById("bossHp").innerHTML = bossHp;
		}
		
		function startGame() {
			document.getElementById("startScreen").style.display = "none";
			document.getElementById("gameScreen").style.display = "block";
			gameRunning = true;
			playTurn("スタート！");
		}
		
		function endGame(result) {
			gameRunning = false;
			document.getElementById("actions").style.display = "none";
			if(result == "win") {
				playTurn("ラスボスを倒した！おめでとう！");
			}
			else {
				playTurn("プレイヤーは力尽きた…");
			}
		}
		
		function playTurn(text) {
			document.getElementById("status").innerHTML = "ターン" + turn + ": " + text;
			scrollToBottom();
			turn++;
		}
		
		function playerAttack() {
			if(gameRunning) {
				var damage = Math.floor(Math.random() * 10) + 1;
				bossHp -= damage;
				document.getElementById("bossHp").innerHTML = bossHp;
				playTurn("プレイヤーの攻撃！" + damage + "のダメージ！")
				if(bossHp <= 0) {
					endGame("win");
				}
				else {
					bossAttack();
				}
			}
		}
		
		function heal() {
			if(gameRunning) {
				var healAmount = Math.floor(Math.random() * 10) + 10;
				playerHp += healAmount;
				if(playerHp > 100) {
					playerHp = 100;
				}
				document.getElementById("playerHp").innerHTML = playerHp;
				playTurn("プレイヤーは回復魔法を唱えた！" + healAmount + "回復！")
				bossAttack();
			}
		}
		
		function specialAttack() {
			if(gameRunning) {
				var damage = Math.floor(Math.random() * 20) + 10;
				bossHp -= damage;
				document.getElementById("bossHp").innerHTML = bossHp;
				playTurn("プレイヤーの必殺技！" + damage + "のダメージ！")
				if(bossHp <= 0) {
					endGame("win");
				}
				else {
					bossAttack();
				}
			}
		}
		
		function bossAttack() {
			var damage = Math.floor(Math.random() * 20) + 1;
			playerHp -= damage;
			document.getElementById("playerHp").innerHTML = playerHp;
			playTurn("ラスボスの攻撃！" + damage + "のダメージを受けた！")
			if(playerHp <= 0) {
				endGame("lose");
			}
		}
		
		function scrollToBottom() {
  			var objDiv = document.getElementById("status");
  			objDiv.scrollTop = objDiv.scrollHeight;
		}
	</script>
</body>
</html>