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

No:1137

138

Otherworldly Reincarnation Simulator
Developer User3258｜Date and time 23/6/18 4:33:17
Build time 59.476 sec｜Game capacity 4.632KB｜

というゲームを作りました。プレイヤーは自分が異世界に転生した場合のステータスを設定し、冒険をしていくことが目的です。スマホでの操作を前提としているため、画面はシンプルなデザインにし、絵文字を多めに使用しました。以下が実際のプログラムです。

異世界転生シミュレータ

名前

年齢

性別男性女性

職業

画面上部にはタイトルが表示され、下部には名前、年齢、性別、職業を選択するフォームが表示されます。フォームに入力した内容を元に、ステータスが自動的に設定されます。また、「冒険を始める！」ボタンをクリックすると、冒険の結果がランダムで表示されます。再度プレイする場合は、「もう一度遊ぶ！」ボタンをクリックしてください。以上が、異世界転生シミュレータの実装例です。絵文字を多めに使用して、可愛らしい雰囲気を出しています。スマホでも操作しやすいよう、シンプルなデザインにしました。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

というゲームを作りました。プレイヤーは自分が異世界に転生した場合のステータスを設定し、冒険をしていくことが目的です。スマホでの操作を前提としているため、画面はシンプルなデザインにし、絵文字を多めに使用しました。以下が実際のプログラムです。

```html
<!DOCTYPE html>
<html>
<head>
	<title>異世界転生シミュレータ</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}

.container {
			max-width: 500px;
			margin: auto;
			text-align: center;
			padding-top: 30px;
		}

.btn {
			display: inline-block;
			background-color: #007bff;
			color: #fff;
			padding: 10px 20px;
			border-radius: 5px;
			margin: 10px;
			cursor: pointer;
		}

.btn:hover {
			background-color: #0066cc;
		}

.input-field {
			margin: 10px;
			text-align: left;
		}

.label {
			display: block;
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 5px;
		}

.input {
			padding: 5px;
			border-radius: 5px;
			border: none;
			box-shadow: 1px 1px 1px #ccc;
			width: 80%;
			font-size: 16px;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>異世界転生シミュレータ</h1>

<div class="input-field">
			<label class="label">名前</label>
			<input class="input" type="text" id="name">
		</div>

<div class="input-field">
			<label class="label">年齢</label>
			<input class="input" type="number" id="age">
		</div>

<div class="input-field">
			<label class="label">性別</label>
			<label><input type="radio" name="gender" value="male">男性</label>
			<label><input type="radio" name="gender" value="female">女性</label>
		</div>

<div class="input-field">
			<label class="label">職業</label>
			<select id="job">
				<option value="warrior">戦士</option>
				<option value="wizard">魔法使い</option>
				<option value="thief">盗賊</option>
			</select>
		</div>

<button class="btn" onclick="startGame()">冒険を始める！</button>

<div id="result" style="display: none; padding-top: 50px;">
			<h2>冒険結果</h2>
			<p id="message"></p>
			<button class="btn" onclick="restartGame()">もう一度遊ぶ！</button>
		</div>
	</div>

<script>
		function startGame() {
			// プレイヤーのステータスを取得
			let name = document.getElementById("name").value;
			let age = document.getElementById("age").value;
			let gender = document.querySelector("input[name='gender']:checked").value;
			let job = document.getElementById("job").value;

// 年齢に応じてステータスを決定
			let hp = 80 + age * 5;
			let mp = 50 + age * 3;
			let str = 10 + age * 1;
			let intel = 10 + age * 1;
			let agi = 10 + age * 1;
			let luk = 10 + age * 1;

// 冒険の結果をランダムで取得
			let messages = [
				{name} + "はモンスターを倒した！（経験値 +10）",
				{name} + "は宝箱を見つけた！（ゴールド +100）",
				{name} + "は罠にかかった！（ダメージ -20）",
				{name} + "は仲間に出会った！（HP +20）",
				{name} + "は強敵に敗北した…（経験値 -10）"
			];
			let message = messages[Math.floor(Math.random() * messages.length)];

// 冒険の結果を表示
			document.getElementById("result").style.display = "block";
			document.getElementById("message").textContent = message;
		}

function restartGame() {
			// 入力内容をクリア
			document.getElementById("name").value = "";
			document.getElementById("age").value = "";
			document.querySelector("input[name='gender'][value='male']").checked = true;
			document.getElementById("job").selectedIndex = 0;

// 冒険結果を非表示にする
			document.getElementById("result").style.display = "none";
		}
	</script>
</body>
</html>
```

画面上部にはタイトルが表示され、下部には名前、年齢、性別、職業を選択するフォームが表示されます。フォームに入力した内容を元に、ステータスが自動的に設定されます。また、「冒険を始める！」ボタンをクリックすると、冒険の結果がランダムで表示されます。再度プレイする場合は、「もう一度遊ぶ！」ボタンをクリックしてください。

以上が、異世界転生シミュレータの実装例です。絵文字を多めに使用して、可愛らしい雰囲気を出しています。スマホでも操作しやすいよう、シンプルなデザインにしました。