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

No:3326

1264

←

Prev Next

→

Four-person party RPG
Developer User3655｜Date and time 23/6/24 14:00:13
Build time 74.753 sec｜Game capacity 5.654KB｜

Script

4人パーティのRPG

魔法使い

最強の魔法を使いこなす

戦士

強力な武器で敵をなぎ倒す

エルフ

素早い動きで敵をかわす

騎士

盾で身を守り、敵を圧倒する

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>4人パーティのRPG</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #9ebbc3;
			font-family: Arial, sans-serif;
		}

h1 {
			text-align: center;
			color: #fff;
			padding-top: 50px;
			font-size: 48px;
			text-shadow: 2px 2px 4px #000;
		}

.container {
			margin-top: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

.card {
			background-color: #e3d3bf;
			border-radius: 10px;
			width: 200px;
			height: 250px;
			margin: 10px;
			padding: 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			box-shadow: 2px 2px 4px #000;
			cursor: pointer;
		}

.card:hover {
			transform: translateY(-5px);
			box-shadow: 5px 5px 10px #000;
		}

.card img {
			width: 150px;
			height: 150px;
			object-fit: cover;
			border-radius: 50%;
		}

.card h2 {
			color: #342820;
			text-align: center;
			font-size: 24px;
			text-shadow: 2px 2px 4px #fff;
		}

.card p {
			color: #342820;
			font-size: 18px;
			text-align: center;
			text-shadow: 1px 1px 2px #fff;
		}

.modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.8);
			z-index: 100;
			opacity: 0;
			transition: all 0.3s ease-in-out;
			pointer-events: none;
		}

.modal.active {
			opacity: 1;
			pointer-events: all;
		}

.modal-content {
			background-color: #fff;
			border-radius: 10px;
			width: 500px;
			padding: 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-shadow: 2px 2px 4px #000;
		}

.modal h2 {
			color: #342820;
			font-size: 32px;
			text-align: center;
			margin-bottom: 30px;
			text-shadow: 2px 2px 4px #fff;
		}

.modal img {
			width: 300px;
			height: 300px;
			object-fit: cover;
			border-radius: 50%;
			margin-bottom: 30px;
		}

.modal p {
			color: #342820;
			font-size: 24px;
			text-align: center;
			margin-bottom: 30px;
			text-shadow: 1px 1px 2px #fff;
		}

.modal button {
			background-color: #d1c0a8;
			color: #342820;
			border: none;
			padding: 10px 20px;
			font-size: 18px;
			border-radius: 5px;
			cursor: pointer;
			box-shadow: 2px 2px 4px #000;
		}

.modal button:hover {
			transform: translateY(-5px);
			box-shadow: 5px 5px 10px #000;
		}
	</style>
</head>
<body>
	<h1>4人パーティのRPG</h1>

<div class="container">
		<div class="card" onclick="openModal(1)">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/man-mage_1f9d9-200d-2642-fe0f.png" alt="mage">
			<h2>魔法使い</h2>
			<p>最強の魔法を使いこなす</p>
		</div>
		<div class="card" onclick="openModal(2)">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/woman-warrior_1f469-200d-1f3f9.png" alt="warrior">
			<h2>戦士</h2>
			<p>強力な武器で敵をなぎ倒す</p>
		</div>
		<div class="card" onclick="openModal(3)">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/man-elf_1f9dd-200d-2642-fe0f.png" alt="elf">
			<h2>エルフ</h2>
			<p>素早い動きで敵をかわす</p>
		</div>
		<div class="card" onclick="openModal(4)">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/man-knight_1f468-200d-1f3f9-200d-1f3eb.png" alt="knight">
			<h2>騎士</h2>
			<p>盾で身を守り、敵を圧倒する</p>
		</div>
	</div>

modal.classList.add("active");

switch (id) {
				case 1:
					name.textContent = "魔法使い";
					img.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/man-mage_1f9d9-200d-2642-fe0f.png";
					desc.textContent = "最強の魔法を使いこなす。MPを管理しながら、味方を回復することもできる。";
					break;
				case 2:
					name.textContent = "戦士";
					img.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/woman-warrior_1f469-200d-1f3f9.png";
					desc.textContent = "強力な武器を装備し、敵をなぎ倒すことができる。HPも高く、耐久力に優れる。";
					break;
				case 3:
					name.textContent = "エルフ";
					img.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/man-elf_1f9dd-200d-2642-fe0f.png";
					desc.textContent = "素早い動きで敵をかわしながら攻撃する。回避力が高く、遠距離攻撃も得意。";
					break;
				case 4:
					name.textContent = "騎士";
					img.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/man-knight_1f468-200d-1f3f9-200d-1f3eb.png";
					desc.textContent = "盾を装備し、敵の攻撃を受け止める。攻撃力はやや低めだが、防御力が高く、味方を守ることができる。";
					break;
			}
		}

const closeModal = () => {
			const modal = document.getElementById("modal");
			modal.classList.remove("active");
		}
	</script>
</body>
</html>