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

No:3279

2578

←

Prev Next

→

Card Game! Lets borrow money!
Developer User3589｜Date and time 23/6/24 11:24:14
Build time 44.151 sec｜Game capacity 4.138KB｜

Script

借金カードゲーム

あなたは銀行の借金返済を行うことになりました。

カードをめくり、出た目の分だけお金を返済します。

しかし、借金額を超えてしまうと破産です。

←

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>
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
			background-color: #50C878;
			text-align: center;
			font-family: "Arial", sans-serif;
		}

#gameboard {
			margin: 10px auto;
			padding: 10px;
			background-color: #FFF;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
			border: 5px solid #000;
			display: inline-block;
		}

#cards {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;
			align-content: start;
			margin-top: 20px;
			height: 300px;
			overflow-y: scroll;
		}

.card {
			width: 130px;
			height: 180px;
			background-color: #F1C40F;
			margin: 10px;
			padding: 10px;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			font-size: 12px;
			font-weight: bold;
			letter-spacing: 1px;
		}

h1 {
			margin-top: 30px;
			font-size: 24px;
			font-weight: bold;
			color: #FFF;
			text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
		}

h2 {
			margin-top: 10px;
			font-size: 18px;
			font-weight: bold;
			color: #FFF;
			text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
		}
	</style>
</head>
<body>
	<h1>借金カードゲーム</h1>
	<h2>あなたは銀行の借金返済を行うことになりました。</h2>
	<h2>カードをめくり、出た目の分だけお金を返済します。</h2>
	<h2>しかし、借金額を超えてしまうと破産です。</h2>
	<div id="gameboard">
		<div id="cards">
			
		</div>
		<button id="draw-card">カードをめくる</button>
		<div id="result"></div>
		<button id="reset-game">ゲームをリセット</button>
	</div>
	<script type="text/javascript">
		// ゲームの設定
		var bankMoney = 100000; // 銀行の借金額
		var playerMoney = 0; // プレイヤーの持っているお金
		var cardDeck = []; // カードの山札
		var drawnCards = []; // 引かれたカード
		var gameEnd = false; // ゲームが終了したかどうか

// カードの設定
		var suit = ["💰", "💳", "💸", "💵"];
		var rank = ["1", "2", "3", "4", "5", "6"];
		for (var i = 0; i < suit.length; i++) {
			for (var j = 0; j < rank.length; j++) {
				var newCard = {
					suit: suit[i],
					rank: rank[j],
					value: (j + 1) * 1000
				};
				cardDeck.push(newCard);
			}
		}

// カードをシャッフルする関数
		function shuffleCards(array) {
			var currentIndex = array.length;
			var temporaryValue;
			var randomIndex;
			while (currentIndex != 0) {
				randomIndex = Math.floor(Math.random() * currentIndex);
				currentIndex--;
				temporaryValue = array[currentIndex];
				array[currentIndex] = array[randomIndex];
				array[randomIndex] = temporaryValue;
			}
			return array;
		}

// カードをめくる関数
		function drawCard() {
			if (!gameEnd) {
				var card = cardDeck.pop();
				drawnCards.push(card);
				var cardElement = document.createElement("div");
				cardElement.classList.add("card");
				cardElement.innerHTML = "<div>" + card.suit + "</div><div>" + card.rank + "</div><div>" + card.value + "</div>";
				document.getElementById("cards").appendChild(cardElement);
				playerMoney += card.value;
				if (playerMoney >= bankMoney) {
					document.getElementById("draw-card").disabled = true;
					document.getElementById("result").innerHTML = "<p>破産してしまいました！</p>";
					gameEnd = true;
				}
			}
		}

// ゲームをリセットする関数
		function resetGame() {
			cardDeck = [];
			drawnCards = [];
			gameEnd = false;
			document.getElementById("cards").innerHTML = "";
			document.getElementById("draw-card").disabled = false;
			document.getElementById("result").innerHTML = "";
			playerMoney = 0;
			shuffleCards(cardDeck);
		}

// イベントリスナーの設定
		document.getElementById("draw-card").addEventListener("click", drawCard);
		document.getElementById("reset-game").addEventListener("click", resetGame);

// ゲームスタート
		shuffleCards(cardDeck);
	</script>
</body>
</html>