AI game creator

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

No:3146

7211

←

Prev Next

→

ionazen
Developer User3655｜Date and time 23/6/23 23:57:55
Build time 39.045 sec｜Game capacity 3.168KB｜

Script

イオナズンというゲームを1枚のhtmlファイルで実装しました。このゲームは、プレイヤーが魔法を使って敵を倒すという内容です。スマホで遊ぶことが前提で、画面はタップで操作できます。以下が実際のプログラムです。

以上がイオナズンというゲームのプログラムです。画面中央には、プレイヤーと敵が表示され、下には攻撃するボタンと回復するボタンがあります。プレイヤーと敵のHPが時々変化し、どちらかのHPが0になるとゲームが終了します。最後に、ゲームが終了するとその旨をポップアップ画面で表示し、ページをリロードします。Enjoy!

←

Prev　Next

→ 　

Back　

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

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

```
<!DOCTYPE html>
<html>
<head>
	<title>イオナズン</title>
	<style>
		body{
			background-color: black;
			color: white;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 3em;
			text-align: center;
		}
		button {
			padding: 10px;
			font-size: 1em;
			color: black;
			background-color: white;
			border: none;
			border-radius: 10px;
			cursor: pointer;
			margin: 10px;
		}
		button:hover{
			background-color: gray;
		}
		#player {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			height: 100px;
			width: 100px;
			background-color: yellow;
			border-radius: 50%;
		}
		#enemy {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			height: 100px;
			width: 100px;
			background-color: red;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div id="game">
		<div id="player"></div>
		<div id="enemy"></div>
	</div>
	<div id="buttons">
		<button onclick="attack()">攻撃する</button>
		<button onclick="heal()">回復する</button>
	</div>
	<script>
		let playerHP = 100;
		let enemyHP = 100;
		let enemyMaxHP = 100;

function heal() {
			const healAmount = Math.floor(Math.random() * 10) + 1;
			playerHP += healAmount;
			if (playerHP > 100) {
				playerHP = 100;
			}
			updateHP();
			enemyAttack();
		}

function updateHP() {
			const player = document.getElementById("player");
			const enemy = document.getElementById("enemy");
			player.style.width = (playerHP / 100 * 200) + "px";
			player.style.height = (playerHP / 100 * 200) + "px";
			player.innerText = "😀 " + playerHP;
			enemy.style.width = (enemyHP / enemyMaxHP * 200) + "px";
			enemy.style.height = (enemyHP / enemyMaxHP * 200) + "px";
			enemy.innerText = "👹 " + enemyHP;
		}

function endGame(win) {
			const message = win ? "You Win!" : "You Lose!"
			alert(message);
			location.reload();
		}

updateHP();
	</script>
</body>
</html>
```