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

No:3648

1049

←

Prev Next

→

Ancient Martial Arts
Developer User3655｜Date and time 23/6/25 23:45:31
Build time 67.608 sec｜Game capacity 6.137KB｜

Script

を題材にしたカードバトルゲームを作りました。

古武術カードバトル

←

Prev　Next

→ 　

Back　

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

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

を題材にしたカードバトルゲームを作りました。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>古武術カードバトル</title>
	<style>
		body {
			text-align: center;
			background-color: #fadadd;
		}
		h1 {
			font-size: 2rem;
			color: #912f56;
			margin-top: 1.5rem;
		}
		#cards {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 2rem;
			margin-bottom: 2rem;
		}
		.card {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 6rem;
			height: 9rem;
			background-color: #f8cccc;
			border-radius: 1rem;
			margin: 0.5rem;
			font-size: 1.5rem;
			cursor: pointer;
		}
		.card:hover {
			background-color: #dadbda;
		}
		.selected {
			background-color: #912f56;
			color: #fadadd;
		}
		#battle {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 80%;
			margin: 0 auto;
			margin-top: 2rem;
			margin-bottom: 2rem;
		}
		#battle p {
			font-size: 1.5rem;
			margin-bottom: 1rem;
		}
		#attack {
			font-size: 2rem;
			color: #912f56;
			cursor: pointer;
			visibility: hidden;
		}
		#end {
			font-size: 1.5rem;
			color: #912f56;
			cursor: pointer;
			margin-top: 1rem;
			display: none;
		}
	</style>
</head>
<body>

<h1>古武術カードバトル</h1>

<div id="battle">
		<p id="player-card"></p>
		<p id="enemy-card"></p>
		<p>VS</p>
		<button id="attack">攻撃する</button>
		<p id="result"></p>
		<button id="end">もう一度遊ぶ</button>
	</div>

let playerCard;
		let enemyCard;
		let turn = 0;

const cardElements = document.getElementById('cards');
		const attackButton = document.getElementById('attack');
		const endButton = document.getElementById('end');

// カードをシャッフルする関数
		function shuffleCards(array) {
			for (let i = array.length - 1; i > 0; i--) {
				const j = Math.floor(Math.random() * (i + 1));
				[array[i], array[j]] = [array[j], array[i]];
			}
			return array;
		}

// カードを作成する関数
		function createCard(card) {
			const cardElement = document.createElement('div');
			cardElement.classList.add('card');
			cardElement.innerHTML = `
				<span>${card.img}</span>
				<p>${card.name}</p>
				<p>攻撃力:${card.attack}</p>
				<p>防御力:${card.defense}</p>
				<p>速度:${card.speed}</p>
			`;
			cardElement.addEventListener('click', () => {
				document.querySelectorAll('.card').forEach(element => {
					element.classList.remove('selected');
				});
				cardElement.classList.add('selected');
				playerCard = card;
				attackButton.style.visibility = 'visible';
			});
			cardElements.appendChild(cardElement);
		}

// カードを表示する関数
		function showCards() {
			cards.forEach(card => {
				createCard(card);
			});
		}

// カードを削除する関数
		function deleteCards() {
			cardElements.innerHTML = '';
		}

// バトル画面を表示する関数
		function showBattleScreen() {
			deleteCards();
			document.querySelectorAll('#battle p').forEach(element => {
				element.textContent = '';
			});
			document.querySelector('#result').style.color = '#912f56';
			document.querySelector('#result').textContent = 'カードを選んでください';
			attackButton.style.visibility = 'hidden';
			endButton.style.display = 'none';
			showCards();
		}

// 敵のカードを決定する関数
		function chooseEnemyCard() {
			enemyCard = shuffleCards(cards)[0];
			document.querySelector('#enemy-card').textContent = enemyCard.name;
		}

// 攻撃結果を判定する関数
		function judgeResult(playerAttack, enemyDefense, enemySpeed) {
			if (playerAttack === 0) {
				return '失敗！相手の攻撃を受けました';
			} else if (playerAttack > enemyDefense) {
				return '勝ち！相手にダメージを与えました';
			} else if (playerAttack < enemyDefense) {
				return '負け！相手の攻撃を防いだ';
			} else if (playerAttack === enemyDefense && playerCard.speed > enemySpeed) {
				return '勝ち！相手にダメージを与えました';
			} else if (playerAttack === enemyDefense && playerCard.speed < enemySpeed) {
				return '負け！相手の攻撃を防いだ';
			} else {
				return '引き分け！何も起こらなかった';
			}
		}

// ゲームオーバーを判定する関数
		function judgeGameOver() {
			if (turn === 3) {
				return true;
			} else {
				return false;
			}
		}

// ゲームを再開する関数
		function restartGame() {
			turn = 0;
			showBattleScreen();
		}

showBattleScreen();

attackButton.addEventListener('click', () => {
			deleteCards();
			document.querySelector('#player-card').textContent = playerCard.name;
			document.querySelector('#enemy-card').textContent = enemyCard.name;
			document.querySelector('#result').style.color = '#912f56';
			const result = judgeResult(playerCard.attack, enemyCard.defense, enemyCard.speed);
			document.querySelector('#result').textContent = result;
			attackButton.style.visibility = 'hidden';
			turn++;
			if (judgeGameOver()) {
				document.querySelector('#result').style.color = '#912f56';
				document.querySelector('#result').textContent = 'ゲームオーバー！';
				endButton.style.display = 'block';
			} else {
				document.querySelector('#result').style.color = '#912f56';
				document.querySelector('#result').textContent += ` [${turn}ターン目]`;
				setTimeout(() => {
					chooseEnemyCard();
					showCards();
				}, 1000);
			}
		});

endButton.addEventListener('click', restartGame);
	</script>

</body>
</html>