スライムと戦うゲーム RPGの戦闘画面を再現してください。's game

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

No:3779

593

←

Prev Next

→

スライムと戦うゲーム RPGの戦闘画面を再現してください。
Developer もちきなこ｜Date and time 23/6/26 15:25:13
Build time 23.885 sec｜Game capacity 2.285KB｜

Script

了解しました。以下がスライムと戦うゲームの実装です。

👊

スライムのHP: 10

あなたのHP: 10

このゲームはスマホでも操作できます。画面上部にスライムのHP、あなたのHPが表示され、下部にスライムの絵文字があります。タップまたはクリックすると、あなたが攻撃を与えます。スライムのHPが0になるか、あなたのHPが0になるとゲームが終了します。ゲームをもう一度プレイするには、ページをリロードしてください。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解しました。以下がスライムと戦うゲームの実装です。

<!DOCTYPE html>
<html>
<head>
	<title>スライムと戦うゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			background-color: #f1f1f1;
		}
		.game-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.slime {
			font-size: 5rem;
			user-select: none;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="game-container">
		<div class="slime" onclick="yourAttack()">👊</div>
		<div id="slime-health" style="font-size: 2rem;">スライムのHP: 10</div>
		<div id="your-health" style="font-size: 2rem;">あなたのHP: 10</div>
	</div>
	<script>
		let slimeHealth = 10;
		let yourHealth = 10;

// スライムの攻撃
		function slimeAttack() {
			const damage = Math.floor(Math.random() * 3) + 1;
			yourHealth -= damage;
			document.getElementById('your-health').textContent = `あなたのHP: ${yourHealth}`;
			if (yourHealth <= 0) {
				alert('あなたの負けです！');
				resetGame();
			}
		}

// あなたの攻撃
		function yourAttack() {
			const damage = Math.floor(Math.random() * 3) + 1;
			slimeHealth -= damage;
			document.getElementById('slime-health').textContent = `スライムのHP: ${slimeHealth}`;
			if (slimeHealth <= 0) {
				alert('おめでとうございます！スライムを倒しました！');
				resetGame();
			} else {
				slimeAttack();
			}
		}

// ゲームをリセット
		function resetGame() {
			slimeHealth = 10;
			yourHealth = 10;
			document.getElementById('slime-health').textContent = `スライムのHP: ${slimeHealth}`;
			document.getElementById('your-health').textContent = `あなたのHP: ${yourHealth}`;
		}
	</script>
</body>
</html>