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

No:1880

202

←

Prev Next

→

Create a character butler! First you decide on a n..ALL
Developer AI絵師｜Date and time 23/6/19 11:09:16
Build time 41.174 sec｜Game capacity 3.435KB｜

Script

キャラバトラー

Name:

HP:

Attack:

Defense:

Level:

Exp:

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>キャラバトラー</title>
	<style>
		body {
			background-color: #f5f5f5;
			color: #444;
			font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
			text-align: center;
		}
		.container {
			margin: 0 auto;
			max-width: 400px;
		}
		h1 {
			margin-top: 20px;
		}
		.status {
			margin-bottom: 30px;
		}
		.button {
			display: inline-block;
			padding: 10px;
			background-color: #4CAF50;
			color: #fff;
			border-radius: 5px;
			margin: 10px;
			cursor: pointer;
		}
		.button:hover {
			background-color: #3e8e41;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>キャラバトラー</h1>
		<div class="status">
			<div>Name: <span id="name"></span></div>
			<div>HP: <span id="hp"></span></div>
			<div>Attack: <span id="attack"></span></div>
			<div>Defense: <span id="defense"></span></div>
			<div>Level: <span id="level"></span></div>
			<div>Exp: <span id="exp"></span></div>
		</div>
		<div class="buttons">
			<button id="fight" class="button">戦う</button>
			<button id="heal" class="button">回復する</button>
		</div>
	</div>
	<script>
		// 初期ステータスの設定
		var name = prompt("キャラクター名を入力してください。");
		var hp = 100;
		var attack = 10;
		var defense = 5;
		var level = 1;
		var exp = 0;

document.getElementById('name').textContent = name;
		document.getElementById('hp').textContent = hp;
		document.getElementById('attack').textContent = attack;
		document.getElementById('defense').textContent = defense;
		document.getElementById('level').textContent = level;
		document.getElementById('exp').textContent = exp;

// 戦うボタンのクリックイベント
		document.getElementById('fight').addEventListener('click', function() {
			// ランダムな敵の選択
			var enemies = ['ゴブリン', 'スライム', 'オオカミ', '生体ロボ', 'ワイバーン', 'クラーケン'];
			var selectedEnemy = enemies[Math.floor(Math.random() * enemies.length)];
			alert(selectedEnemy + 'が現れた！');

// 戦闘
			var playerAttack = Math.floor(Math.random() * attack);
			var enemyAttack = Math.floor(Math.random() * 10);
			if (playerAttack > enemyAttack) {
				// 勝利した場合
				exp += 10;
				hp += 5;
				if (exp >= 30 * level) {
					// レベルアップした場合
					level++;
					attack += 5;
					defense += 3;
					hp += 20;
					exp = 0;
					alert('レベルアップ！ステータスが上昇しました。');
				}
				document.getElementById('hp').textContent = hp;
				document.getElementById('exp').textContent = exp;
				alert(selectedEnemy + 'を倒した！経験値を獲得した。');
			} else {
				// 敗北した場合
				hp -= enemyAttack - defense;
				if (hp <= 0) {
					// ゲームオーバー
					alert('あなたは敗北しました。ゲームオーバー。');
					window.location.reload();
				}
				document.getElementById('hp').textContent = hp;
				alert(selectedEnemy + 'に負けた！ダメージを受けた。');
			}
		});

// 回復するボタンのクリックイベント
		document.getElementById('heal').addEventListener('click', function() {
			hp += 20;
			if (hp > 100) {
				hp = 100;
			}
			document.getElementById('hp').textContent = hp;
			alert('HPが回復した。');
		});
	</script>
</body>
</html>