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

No:4253

2482

game similar to Risemara in which the aim is to wi..ALL
Developer User3768｜Date and time 23/6/27 15:57:45
Build time 30.146 sec｜Game capacity 2.801KB｜

HTMLファイルには以下のようなコードを記述します。

リセマラゲーム

目指せ最高のステータス！

ここにゲーム画面が表示されます。

ボタンを押してステータスを上げよう！

このHTMLファイルに、JavaScriptコードを追加していきます。まずは、変数を宣言して、初期値を設定します。
let status = { atk: 1, def: 1, hp: 10 };
この場合、攻撃力、防御力、体力を表す変数を宣言しています。それぞれの初期値を1、10としています。次に、ボタンを押したときの処理を定義します。
let rollBtn = document.getElementById('rollBtn'); rollBtn.addEventListener('click', function() { let newStatus = roll(); updateStatus(newStatus); }); function roll() { let newAtk = Math.floor(Math.random() * 3) + 1; let newDef = Math.floor(Math.random() * 3) + 1; let newHp = Math.floor(Math.random() * 6) + 5; let newStatus = { atk: newAtk, def: newDef, hp: newHp }; return newStatus; } function updateStatus(newStatus) { status.atk += newStatus.atk; status.def += newStatus.def; status.hp += newStatus.hp; let gameDiv = document.getElementById('game'); gameDiv.innerHTML = '

攻撃力: ' + status.atk + '

' + '

防御力: ' + status.def + '

' + '

体力: ' + status.hp + '

' + ''; let newBtn = document.getElementById('rollBtn'); newBtn.addEventListener('click', function() { let newStatus = roll(); updateStatus(newStatus); }); }
このJavaScriptコードでは、次のような処理を行っています。 - ボタンを押したときに、`roll`関数で新しいステータスを生成する。 - `updateStatus`関数で、新しいステータスを元に、現在のステータスを更新する。 - 更新後のステータスを画面に表示する。ゲーム画面は、`updateStatus`関数内で更新しています。新しいステータスを元に、攻撃力、防御力、体力を表示しています。また、リセマラ用の新しいボタンも再度生成しています。以上のコードで、シンプルなリセマラゲームが作成できます。ボタンを押すたびにランダムなステータスが生成され、現在のステータスと合算して表示されます。最高のステータスを目指して、何度もリセマラを繰り返しましょう！

→ 　

0　

0　

[PR]現在の欲しいゲームランキング

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

(C)2023 HisashiApp

HTMLファイルには以下のようなコードを記述します。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>リセマラゲーム</title>
</head>
<body>
	<h1>リセマラゲーム</h1>
	<p>目指せ最高のステータス！</p>

<div id="game">
		<p>ここにゲーム画面が表示されます。</p>
		<p>ボタンを押してステータスを上げよう！</p>

<button id="rollBtn">リセマラ</button>
	</div>

<script>
		// JavaScriptコードをここに記述する
	</script>
</body>
</html>
```

このHTMLファイルに、JavaScriptコードを追加していきます。

まずは、変数を宣言して、初期値を設定します。

```
let status = {
	atk: 1,
	def: 1,
	hp: 10
};
```

この場合、攻撃力、防御力、体力を表す変数を宣言しています。それぞれの初期値を1、10としています。

次に、ボタンを押したときの処理を定義します。

```
let rollBtn = document.getElementById('rollBtn');
rollBtn.addEventListener('click', function() {
	let newStatus = roll();
	updateStatus(newStatus);
});

function roll() {
	let newAtk = Math.floor(Math.random() * 3) + 1;
	let newDef = Math.floor(Math.random() * 3) + 1;
	let newHp = Math.floor(Math.random() * 6) + 5;

let newStatus = {
		atk: newAtk,
		def: newDef,
		hp: newHp
	};

return newStatus;
}

function updateStatus(newStatus) {
	status.atk += newStatus.atk;
	status.def += newStatus.def;
	status.hp += newStatus.hp;

let gameDiv = document.getElementById('game');
	gameDiv.innerHTML = '<p>攻撃力: ' + status.atk + '</p>' +
						'<p>防御力: ' + status.def + '</p>' +
						'<p>体力: ' + status.hp + '</p>' +
						'<button id="rollBtn">リセマラ</button>';

let newBtn = document.getElementById('rollBtn');
	newBtn.addEventListener('click', function() {
		let newStatus = roll();
		updateStatus(newStatus);
	});
}
```

このJavaScriptコードでは、次のような処理を行っています。

- ボタンを押したときに、`roll`関数で新しいステータスを生成する。
- `updateStatus`関数で、新しいステータスを元に、現在のステータスを更新する。
- 更新後のステータスを画面に表示する。

ゲーム画面は、`updateStatus`関数内で更新しています。新しいステータスを元に、攻撃力、防御力、体力を表示しています。また、リセマラ用の新しいボタンも再度生成しています。

以上のコードで、シンプルなリセマラゲームが作成できます。ボタンを押すたびにランダムなステータスが生成され、現在のステータスと合算して表示されます。最高のステータスを目指して、何度もリセマラを繰り返しましょう！