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

No:3770

606

Warlord simulation game
Developer User3737｜Date and time 23/6/26 14:58:17
Build time 53.475 sec｜Game capacity 5.119KB｜

こんにちは！私はAIアシスタントです。戦国武将シミュレーションゲームを作成します。以下が実装内容です。 1. 画面に表示される武将の名前、画像、戦闘力をランダムに生成します。 2. 武将同士の戦闘が行われます。勝者と敗者が決定します。 3. 勝者は画面上部に表示され、その戦闘力が更新されます。 4. ユーザーは画面下部に表示される武将をタップして戦闘力を上げることができます。 5. 特定の条件（例：ある武将の戦闘力が一定以上になったら）勝利条件が解放されます。 6. 勝利条件を達成すると、画面に「おめでとう！」というメッセージが表示されます。以下が必要なコードです。

戦国武将シミュレーションゲーム

画面下部の武将をタップして戦闘力を上げよう！

このコードを使って、スマホで戦国武将シミュレーションゲームをお楽しみください！

→ 　

3　

3　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

こんにちは！私はAIアシスタントです。

戦国武将シミュレーションゲームを作成します。

以下が実装内容です。

1. 画面に表示される武将の名前、画像、戦闘力をランダムに生成します。
2. 武将同士の戦闘が行われます。勝者と敗者が決定します。
3. 勝者は画面上部に表示され、その戦闘力が更新されます。
4. ユーザーは画面下部に表示される武将をタップして戦闘力を上げることができます。
5. 特定の条件（例：ある武将の戦闘力が一定以上になったら）勝利条件が解放されます。
6. 勝利条件を達成すると、画面に「おめでとう！」というメッセージが表示されます。

以下が必要なコードです。

```html
<!DOCTYPE html>
<html>
<head>
	<title>戦国武将シミュレーションゲーム</title>
	<meta charset="UTF-8">
	<style>
		body {
			background-color: #e6a4ff;
		}
		h1 {
			text-align: center;
			font-size: 36px;
			color: #333333;
		}
		.outer {
			display: flex;
			flex-wrap: wrap;	
			justify-content: center;
			align-items: center;
			margin: 20px;
		}
		.inner {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 10px;
			background-color: #ffffff;
			padding: 20px;
			border-radius: 20px;
			box-shadow: 5px 5px 10px #333333;
			transition: all .2s;
			cursor: pointer;
			user-select: none;
		}
		.inner:hover {
			transform: scale(1.05);
			box-shadow: 10px 10px 20px #333333;
		}
		.name {
			font-size: 24px;
			color: #333333;
			margin-bottom: 10px;
		}
		.image {
			width: 150px;
			height: 150px;
			background-color: #cccccc;
			border-radius: 50%;
			margin-bottom: 10px;
		}
		.power {
			font-size: 18px;
			color: #333333;
			margin-bottom: 10px;
		}
		.message {
			display: none;
			font-size: 24px;
			color: #ffffff;
			background-color: #333333;
			padding: 10px;
			border-radius: 10px;
			position: absolute;
			top: calc(50vh - 50px);
			left: calc(50vw - 150px);
			z-index: 100;
		}
		.tap {
			font-size: 18px;
			color: #333333;
			margin: 20px;
		}
	</style>
</head>
<body>
	<h1>戦国武将シミュレーションゲーム</h1>
	<div class="outer"></div>
	<div class="message"></div>
	<div class="tap">画面下部の武将をタップして戦闘力を上げよう！</div>
	<script>
		let generals = [
			{name: "織田信長", image: "😈", power: 100},
			{name: "豊臣秀吉", image: "🐦", power: 90},
			{name: "徳川家康", image: "👑", power: 80},
			{name: "上杉謙信", image: "🐲", power: 70},
			{name: "武田信玄", image: "🐴", power: 60},
			{name: "伊達政宗", image: "🦊", power: 50},
			{name: "真田幸村", image: "🐻", power: 40},
			{name: "石田三成", image: "🐰", power: 30},
			{name: "直江兼続", image: "🐷", power: 20},
			{name: "佐々成政", image: "🐶", power: 10},
		];
		let win = null;
		let lose = null;
		let result = document.querySelector(".message");
		let tap = document.querySelector(".tap");
		let outer = document.querySelector(".outer");
		let tapped = false;
		function randomInt(max) {
			return Math.floor(Math.random() * max);
		}
		function shuffle(array) {
			for (let i = array.length - 1; i > 0; i--) {
				let j = randomInt(i + 1);
				[array[i], array[j]] = [array[j], array[i]];
			}
			return array;
		}
		function update() {
			outer.innerHTML = "";
			shuffle(generals);
			for (let i = 0; i < generals.length; i++) {
				let general = generals[i];
				let inner = document.createElement("div");
				inner.classList.add("inner");
				inner.addEventListener("click", function() {
					if (!tapped) {
						tapped = true;
						general.power += 10;
						this.querySelector(".power").textContent = "戦闘力：" + general.power;
						setTimeout(() => tapped = false, 1000);
					}
				});
				let name = document.createElement("div");
				name.classList.add("name");
				name.textContent = general.name;
				let image = document.createElement("div");
				image.classList.add("image");
				image.textContent = general.image;
				let power = document.createElement("div");
				power.classList.add("power");
				power.textContent = "戦闘力：" + general.power;
				inner.appendChild(name);
				inner.appendChild(image);
				inner.appendChild(power);
				outer.appendChild(inner);
			}
			setTimeout(() => battle(), 5000);
		}
		function battle() {
			win = generals[randomInt(generals.length)];
			do {
				lose = generals[randomInt(generals.length)];
			} while (win === lose);
			result.textContent = win.name + "が" + lose.name + "を倒した！";
			result.style.display = "block";
			win.power += 10;
			setTimeout(() => result.style.display = "none", 3000);
			update();
			if (win.power >= 200) {
				result.textContent = "おめでとう！勝利条件を達成しました！";
				result.style.display = "block";
				tap.style.display = "none";
			}
		}
		update();
	</script>
</body>
</html>
```

このコードを使って、スマホで戦国武将シミュレーションゲームをお楽しみください！