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

No:2

411

←

Prev Next

→

Playing cards
Developer User1006｜Date and time 23/4/19 18:37:53
Build time unknown sec｜Game capacity 6.155KB｜

Script

Playing cards

Draw a card and the one closest to 21 wins.

Player Hand:

Player Score:

Dealer Hand:

Dealer Score:

Outcome:

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>トランプゲーム</title>
	<script type="text/javascript">
		// カードの種類と初期化
		var suits = ['♠', '♡', '♢', '♣'];
		var ranks = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];
		var deck = createDeck();
		deck = shuffleDeck(deck);

// プレイヤーとディーラーの手札と点数
		var playerHand = [];
		var playerScore = 0;
		var dealerHand = [];
		var dealerScore = 0;

// カードを作成する関数
		function createCard(suit, rank) {
			return {
				suit: suit,
				rank: rank,
				value: (rank === 'J' || rank === 'Q' || rank === 'K') ? 10 : (rank === 'A' ? 11 : parseInt(rank))
			}
		}

// 山札を作成する関数
		function createDeck() {
			var deck = [];
			for (var i = 0; i < suits.length; i++) {
				for (var j = 0; j < ranks.length; j++) {
					deck.push(createCard(suits[i], ranks[j]));
				}
			}
			return deck;
		}

// 山札をシャッフルする関数
		function shuffleDeck(deck) {
			for (var i = deck.length - 1; i > 0; i--) {
				var j = Math.floor(Math.random() * (i + 1));
				var temp = deck[i];
				deck[i] = deck[j];
				deck[j] = temp;
			}
			return deck;
		}

// カードをドローする関数
		function drawCard(hand, deck) {
			var card = deck.shift();
			hand.push(card);
			return hand;
		}

// 点数を計算する関数
		function calculateScore(hand) {
			var score = 0;
			var aceCount = 0;
			for (var i = 0; i < hand.length; i++) {
				score += hand[i].value;
				if (hand[i].rank === 'A') {
					aceCount++;
				}
			}
			// Aが含まれている場合、点数を調整する
			while (score > 21 && aceCount > 0) {
				score -= 10;
				aceCount--;
			}
			return score;
		}

// ゲームの開始
		function startGame() {
			// プレイヤーとディーラーがカードをドローする
			playerHand = drawCard(playerHand, deck);
			dealerHand = drawCard(dealerHand, deck);
			playerHand = drawCard(playerHand, deck);
			dealerHand = drawCard(dealerHand, deck);

// プレイヤーの点数を計算する
			playerScore = calculateScore(playerHand);

// ページにプレイヤーとディーラーの手札を表示する
			document.getElementById('player-hand').textContent = playerHand.map(function(card) { return card.suit + card.rank; }).join(', ');
			document.getElementById('dealer-hand').textContent = dealerHand[0].suit + dealerHand[0].rank;

// プレイヤーの点数を表示する
			document.getElementById('player-score').textContent = playerScore;

// ディーラーの2枚目のカードを裏返す
			document.getElementById('dealer-hand').classList.add('back');
			document.getElementById('dealer-score').textContent = '?';
		}

// ゲームの続行
		function hit() {
			// プレイヤーがカードをドローする
			playerHand = drawCard(playerHand, deck);

// プレイヤーの点数を計算する
			playerScore = calculateScore(playerHand);

// ページにプレイヤーの手札と点数を表示する
			document.getElementById('player-hand').textContent = playerHand.map(function(card) { return card.suit + card.rank; }).join(', ');
			document.getElementById('player-score').textContent = playerScore;

// プレイヤーが21を超えた場合、バーストする
			if (playerScore > 21) {
				// ディーラーの2枚目のカードを表示する
				document.getElementById('dealer-hand').classList.remove('back');
				document.getElementById('dealer-hand').textContent = dealerHand.map(function(card) { return card.suit + card.rank; }).join(', ');

// ディーラーの点数を計算する
				dealerScore = calculateScore(dealerHand);

// ページにディーラーの点数を表示する
				document.getElementById('dealer-score').textContent = dealerScore;

// プレイヤーが負けたことを表示する
				document.getElementById('outcome').textContent = 'You lose!';
			}
		}

// ゲームの終了
		function stand() {
			// ディーラーの2枚目のカードを表示する
			document.getElementById('dealer-hand').classList.remove('back');
			document.getElementById('dealer-hand').textContent = dealerHand.map(function(card) { return card.suit + card.rank; }).join(', ');

// ディーラーの点数を計算する
			dealerScore = calculateScore(dealerHand);

// ページにディーラーの点数を表示する
			document.getElementById('dealer-score').textContent = dealerScore;

// ディーラーが17以上になるまでカードをドローし続ける
			while (dealerScore < 17) {
				dealerHand = drawCard(dealerHand, deck);
				dealerScore = calculateScore(dealerHand);
				document.getElementById('dealer-hand').textContent = dealerHand.map(function(card) { return card.suit + card.rank; }).join(', ');
				document.getElementById('dealer-score').textContent = dealerScore;
			}

// プレイヤーが勝ったかどうかを判断する
			if (dealerScore > 21 || playerScore > dealerScore) {
				document.getElementById('outcome').textContent = 'You win!';
			} else if (playerScore < dealerScore) {
				document.getElementById('outcome').textContent = 'You lose!';
			} else {
				document.getElementById('outcome').textContent = 'Tie!';
			}
		}
	</script>
	<style type="text/css">
		.back:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #080;
			transform: rotateY(180deg);
			border-radius: 5px;
			box-shadow: 0 0 5px #555;
			z-index: -1;
		}
	</style>
</head>
<body>
	<h1>トランプゲーム</h1>
	<p>カードをドローし、21に近い方が勝ちます。</p>
	<br>
	<button onclick="startGame()">Deal</button>
	<button onclick="hit()">Hit</button>
	<button onclick="stand()">Stand</button>
	<br>
	<br>
	<p>Player Hand: <span id="player-hand"></span></p>
	<p>Player Score: <span id="player-score"></span></p>
	<br>
	<p>Dealer Hand: <span id="dealer-hand"></span></p>
	<p>Dealer Score: <span id="dealer-score"></span></p>
	<br>
	<p>Outcome: <span id="outcome"></span></p>
</body>
</html>