無双ゲーム

開発者ひさしを倒そう！

クリックして攻撃！

※画像は適当に挿入したものです。また、実装によって動作が変わる可能性があるため、予めご了承ください。

←

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.0">
	<style>
		body {
			background-color: black;
			color: white;
			font-size: 3rem;
			text-align: center;
		}
		button {
			font-size: 1.5rem;
			padding: 1rem 2rem;
			margin: 1rem;
			border-radius: 10px;
			color: white;
			background-color: red;
			border: none;
			cursor: pointer;	
		}
		img {
			width: 30%;
			margin: 2rem;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<h1>無双ゲーム</h1>
	<p>開発者ひさしを倒そう！</p>
	<img src="hisashi.jpg" alt="開発者ひさしの画像">
	<p>クリックして攻撃！</p>
	<button id="attack">攻撃する</button>
	<p id="message"></p>
	<script>
		let hisashiHP = 100;
		let playerHP = 100;
		
		document.getElementById("attack").addEventListener("click", function() {
			const damage = Math.floor(Math.random() * 20) + 10;
			hisashiHP -= damage;
			const hisashiAttack = Math.floor(Math.random() * 15) + 5;
			playerHP -= hisashiAttack;
			document.getElementById("message").innerHTML = `開発者ひさしが${hisashiAttack}のダメージを与えた！`;
			document.getElementById("message").innerHTML += `あなたが${damage}のダメージを受けた！`;
			if (hisashiHP <= 0) {
				document.getElementById("message").innerHTML = "おめでとう！あなたは開発者ひさしを倒した！";
				document.getElementById("attack").disabled = true;
			} else if (playerHP <= 0) {
				document.getElementById("message").innerHTML = "残念！あなたは開発者ひさしに倒されてしまった・・・";
				document.getElementById("attack").disabled = true;
			}
		});
	</script>
</body>
</html>

※画像は適当に挿入したものです。また、実装によって動作が変わる可能性があるため、予めご了承ください。