極悪非道の開発者ひさしを倒せ！

👿

敵の体力：100

ゲームオーバー！

このゲームは「ひさし」という悪役開発者を倒すゲームです。ゲームが開始されると、敵の体力ゲージが表示されます。攻撃ボタンをクリックすると、ランダムにダメージが算出されます。同時に、敵もプレイヤーの体力バーを攻撃します。プレイヤーの体力が0になるか、敵の体力が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: #f5f5f5;
			font-family: sans-serif;
			text-align: center;
		}
		h1 {
			font-size: 3rem;
			text-align: center;
			margin-top: 2rem;
			margin-bottom: 1rem;
		}
		#enemy {
			font-size: 5rem;
			margin-top: 4rem;
			margin-bottom: 3rem;
		}
		#attack-btn {
			font-size: 2rem;
			padding: 0.5rem 1rem;
			background-color: #f44336;
			color: white;
			border: none;
			border-radius: 0.5rem;
			margin-bottom: 2rem;
			cursor: pointer;
		}
		#hp-bar {
			background-color: #ddd;
			height: 1rem;
			border-radius: 0.5rem;
			margin: 0 auto;
			width: 80%;
			max-width: 20rem;
			overflow: hidden;
		}
		#hp {
			background-color: #4caf50;
			height: 100%;
			border-radius: 0.5rem;
			width: 100%;
			transform: translateX(-100%);
			transition: transform 0.5s ease;
		}
		#enemy-hp {
			font-size: 1.5rem;
			text-align: center;
			margin-bottom: 2rem;
		}
		#game-over {
			font-size: 2rem;
			color: #f44336;
			display: none;
		}
	</style>
</head>
<body>
	<h1>極悪非道の開発者ひさしを倒せ！</h1>
	<div id="enemy">👿</div>
	<button id="attack-btn">攻撃する！</button>
	<div id="hp-bar"><div id="hp"></div></div>
	<div id="enemy-hp">敵の体力：100</div>
	<div id="game-over">ゲームオーバー！</div>
	<script>
		let enemy = document.getElementById("enemy");
		let attackBtn = document.getElementById("attack-btn");
		let hpBar = document.getElementById("hp-bar");
		let hp = document.getElementById("hp");
		let enemyHp = document.getElementById("enemy-hp");
		let gameOver = document.getElementById("game-over");
		let enemyHpValue = 100;
		let playerHpValue = 100;
		enemyHp.textContent = "敵の体力：" + enemyHpValue;

attackBtn.addEventListener("click", function() {
			let damage = Math.floor(Math.random() * 20) + 1;
			enemy.classList.add("shake");
			setTimeout(function() {
				enemy.classList.remove("shake");
			}, 500);
			enemyHpValue -= damage;
			if (enemyHpValue < 0) {
				enemyHpValue = 0;
			}
			enemyHp.textContent = "敵の体力：" + enemyHpValue;
			let hpPercentage = (enemyHpValue / 100) * 100;
			hp.style.transform = "translateX(-" + hpPercentage + "%)";
			if (enemyHpValue <= 0) {
				gameOver.style.display = "block";
				attackBtn.disabled = true;
			}
			damage = Math.floor(Math.random() * 20) + 1;
			playerHpValue -= damage;
			if (playerHpValue < 0) {
				playerHpValue = 0;
			}
			let playerHpPercentage = (playerHpValue / 100) * 100;
			document.body.style.backgroundColor = "rgb(" + playerHpPercentage * 2.55 + "," + playerHpPercentage * 2.55 + ",255)";
			if (playerHpValue <= 0) {
				gameOver.style.display = "block";
				attackBtn.disabled = true;
			}
		});
	</script>
</body>
</html>