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

No:864

185

Trump game to play Bubba Bubba.
Developer User3092｜Date and time 23/6/17 21:23:04
Build time 62.153 sec｜Game capacity 5.106KB｜

ババ抜き

🂡

🂡

🂢

🂢

🂣

🂣

🂤

🂤

🂥

🂥

🂦

🂦

🂧

🂧

🂨

🂨

🂩

🂩

🂪

🂪

🂫

🂫

🂭

🂭

🂮

🂮

このアプリは、トランプゲームの「ババ抜き」を再現したものです。htmlファイル一つで実装され、JavaScriptを含んでいます。スマートフォンでも遊べるよう、画面サイズに合わせて自動的に調整されます。ゲームのルールは、トランプのカードを全てめくらずに、同じ種類のカードを取り除いていくものです。カードを二枚めくって同じ種類だった場合は取り除き、同じ種類でなかった場合はカードを裏返し、次の人に回します。最終的にババ（🂾）を持っている人が負け、それ以外の人が勝ちです。アプリを起動して「スタート」を押すと、カードがランダムに並んで開始します。カードをクリックすると、クリックしたカードが選択されます。カードを二枚選んだ時点で、同じ種類のカードであれば取り除かれ、違う種類のカードであれば裏返されます。全ての同じ種類のカードを取り除いた場合は勝利です。

→ 　

0　

0　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
	<title>ババ抜き</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 2em;
			text-align: center;
		}
		.card {
			display: inline-block;
			background-color: white;
			border-radius: 10px;
			width: 150px;
			height: 210px;
			margin: 10px;
			box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
			cursor: pointer;
			transition: transform 0.3s;
		}
		.card:hover {
			transform: translate(0px, -10px);
		}
		.selected {
			background-color: yellow;
			border: 3px solid black;
			transform: translate(0px, -10px);
		}
		.btn {
			display: block;
			margin: 20px auto;
			padding: 20px;
			background-color: #FF6347;
			color: white;
			font-size: 1.5em;
			border: none;
			border-radius: 20px;
			box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
			cursor: pointer;
			transition: transform 0.3s;
		}
		.btn:hover {
			transform: translate(0px, -10px);
		}
		.result {
			font-size: 3em;
			margin-top: 20px;
			display: none;
		}
	</style>
</head>
<body>
	<h1>ババ抜き</h1>
	<div id="container">
		<div class="card" id="card01">🂡</div>
		<div class="card" id="card02">🂡</div>
		<div class="card" id="card03">🂢</div>
		<div class="card" id="card04">🂢</div>
		<div class="card" id="card05">🂣</div>
		<div class="card" id="card06">🂣</div>
		<div class="card" id="card07">🂤</div>
		<div class="card" id="card08">🂤</div>
		<div class="card" id="card09">🂥</div>
		<div class="card" id="card10">🂥</div>
		<div class="card" id="card11">🂦</div>
		<div class="card" id="card12">🂦</div>
		<div class="card" id="card13">🂧</div>
		<div class="card" id="card14">🂧</div>
		<div class="card" id="card15">🂨</div>
		<div class="card" id="card16">🂨</div>
		<div class="card" id="card17">🂩</div>
		<div class="card" id="card18">🂩</div>
		<div class="card" id="card19">🂪</div>
		<div class="card" id="card20">🂪</div>
		<div class="card" id="card21">🂫</div>
		<div class="card" id="card22">🂫</div>
		<div class="card" id="card23">🂭</div>
		<div class="card" id="card24">🂭</div>
		<div class="card" id="card25">🂮</div>
		<div class="card" id="card26">🂮</div>
	</div>
	<button class="btn" id="startBtn">スタート</button>
	<div class="result" id="result"></div>

<script>
		let cards = document.querySelectorAll('.card');
		let selectedCards = [];
		let result = document.getElementById('result');

function shuffleCards() {
			let i, j, temp;
			for (i = cards.length - 1; i >= 0; i--) {
				j = Math.floor(Math.random() * (i + 1));
				temp = cards[i].innerText;
				cards[i].innerText = cards[j].innerText;
				cards[j].innerText = temp;
			}
		}

function startGame() {
			selectedCards = [];
			cards.forEach(card => {
				card.classList.remove('selected');
				card.addEventListener('click', selectCard);
			});
			shuffleCards();
		}

function selectCard() {
			let currentCard = event.currentTarget;
			currentCard.classList.add('selected');
			selectedCards.push(currentCard);
			if (selectedCards.length === 2) {
				checkCards();
			}
		}

function checkCards() {
			if (selectedCards[0].innerText === selectedCards[1].innerText) {
				selectedCards.forEach(card => {
					let index = Array.prototype.indexOf.call(cards, card);
					cards[index].removeEventListener('click', selectCard);
				});
				selectedCards = [];
				checkWin();
			} else {
				selectedCards.forEach(card => {
					card.classList.remove('selected');
				});
				selectedCards = [];
			}
		}

function checkWin() {
			let hasTrump = false;
			cards.forEach(card => {
				if (card.innerText === '🂾') {
					hasTrump = true;
				}
			});
			if (hasTrump) {
				return;
			}
			result.classList.add('win');
			result.innerText = '勝ち!';
			result.style.display = 'block';
			cards.forEach(card => {
				card.removeEventListener('click', selectCard);
			});
		}

document.getElementById('startBtn').addEventListener('click', startGame);
	</script>
</body>
</html>

このアプリは、トランプゲームの「ババ抜き」を再現したものです。htmlファイル一つで実装され、JavaScriptを含んでいます。スマートフォンでも遊べるよう、画面サイズに合わせて自動的に調整されます。

ゲームのルールは、トランプのカードを全てめくらずに、同じ種類のカードを取り除いていくものです。カードを二枚めくって同じ種類だった場合は取り除き、同じ種類でなかった場合はカードを裏返し、次の人に回します。最終的にババ（🂾）を持っている人が負け、それ以外の人が勝ちです。

アプリを起動して「スタート」を押すと、カードがランダムに並んで開始します。カードをクリックすると、クリックしたカードが選択されます。カードを二枚選んだ時点で、同じ種類のカードであれば取り除かれ、違う種類のカードであれば裏返されます。全ての同じ種類のカードを取り除いた場合は勝利です。