AI game creator

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

No:3811

853

←

Prev Next

→

RPG
Developer User3740｜Date and time 23/6/26 17:40:01
Build time 30.143 sec｜Game capacity 2.888KB｜

Script

タイプのゲームを作成しました。以下のようなゲーム画面を実装しました。

このゲームでは、プレイヤーと敵の2人が対戦します。攻撃ボタンをクリックすると、ランダムなダメージが与えられます。プレイヤーが倒された場合は敗北となり、敵が倒された場合は勝利となります。両者とも倒された場合は引き分けとなります。また、プレイヤーのHPと敵のHPは画面上に表示されます。

←

Prev　Next

→ 　

Back　

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

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

タイプのゲームを作成しました。以下のようなゲーム画面を実装しました。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>RPGゲーム</title>
	<style>
	body {
		padding: 0;
		margin: 0;
		background-color: #0B610B;
		text-align: center;
		font-family: sans-serif;
		color: #FFFFFF;
	}
	#game-board {
		display: inline-block;
		position: relative;
		background-image: url("https://i.imgur.com/5JL3Dd1.png");
		background-size: cover;
		height: 500px;
		width: 500px;
		margin-top: 50px;
	}
	#player {
		position: absolute;
		top: 400px;
		left: 25px;
		height: 50px;
		width: 50px;
		background-image: url("https://i.imgur.com/b5tDJ9q.png");
		background-size: cover;
	}
	#enemy {
		position: absolute;
		top: 350px;
		right: 25px;
		height: 100px;
		width: 100px;
		background-image: url("https://i.imgur.com/t8Uc2KZ.png");
		background-size: cover;
	}
	#attack-button {
		background-color: #FFFFFF;
		color: #0B610B;
		font-size: 20px;
		border: none;
		padding: 10px 20px;
		margin-top: 20px;
		cursor: pointer;
	}
	#message {
		font-size: 30px;
		padding-top: 50px;
	}
	</style>
</head>
<body>
	<div id="game-board">
		<div id="player"></div>
		<div id="enemy"></div>
	</div>
	<button id="attack-button">攻撃</button>
	<div id="message"></div>
	<script>
		let playerHP = 100;
		let enemyHP = 100;
		const attackButton = document.querySelector("#attack-button");
		const message = document.querySelector("#message");
		const playerElement = document.querySelector("#player");
		const enemyElement = document.querySelector("#enemy");
		function attack() {
			const playerAttack = Math.floor(Math.random() * 10) + 1;
			const enemyAttack = Math.floor(Math.random() * 10) + 1;
			enemyHP -= playerAttack;
			playerHP -= enemyAttack;
			playerElement.style.left = parseInt(playerElement.style.left) + 25 + "px";
			enemyElement.style.top = parseInt(enemyElement.style.top) - 25 + "px";
			if (playerHP <= 0 && enemyHP <= 0) {
				message.textContent = "引き分け";
				attackButton.disabled = true;
			} else if (playerHP <= 0) {
				message.textContent = "あなたの負け";
				attackButton.disabled = true;
			} else if (enemyHP <= 0) {
				message.textContent = "あなたの勝ち";
				attackButton.disabled = true;
			} else {
				message.textContent = `あなたの攻撃 -${playerAttack}, エネミーの攻撃 -${enemyAttack}`;
			}
		}
		attackButton.addEventListener("click", attack);
	</script>
</body>
</html>