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

No:3281

1310

←

Prev Next

→

Credit Card Game! Compete to borrow the amount you..ALL
Developer User3589｜Date and time 23/6/24 11:27:01
Build time 45.194 sec｜Game capacity 4.191KB｜

Script

Credit Card Game

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Credit Card Game</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #FFE4B5;
			padding: 20px;
			font-family: Arial, sans-serif;
		}
		h1 {
			text-align: center;
		}
		button {
			background-color: #FFA500;
			border: none;
			color: white;
			padding: 10px 20px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 10px;
			cursor: pointer;
			border-radius: 5px;
		}
		button:hover {
			background-color: #FF8C00;
		}
		#cards-container {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20px;
		}
		.card {
			background-color: white;
			width: 100px;
			height: 150px;
			border-radius: 10px;
			margin: 10px;
			box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			font-size: 20px;
		}
		.card:hover {
			transform: scale(1.1);
		}
		.card__title {
			font-size: 24px;
			font-weight: bold;
			border-bottom: 1px solid black;
			margin-bottom: 5px;
			padding: 5px;
		}
		.card__value {
			font-size: 48px;
		}
		.card__btn {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 10px;
		}
		.card__btn button {
			width: 80%;
		}
		.result {
			text-align: center;
			font-size: 30px;
			font-weight: bold;
			margin-top: 20px;
			animation: blink 1s linear infinite;
		}
		@keyframes blink {
			0% {
				opacity: 1;
			}
			50% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@media (max-width: 768px) {
			.card {
				width: 80px;
				height: 120px;
				font-size: 16px;
			}
			.card__title {
				font-size: 20px;
			}
			.card__value {
				font-size: 36px;
			}
		}
	</style>
</head>
<body>
	<h1>Credit Card Game</h1>
	<div id="cards-container"></div>
	<p class="result"></p>
	<script>
		const cardsContainer = document.querySelector('#cards-container');
		const result = document.querySelector('.result');
		const maxScore = 100;
		let player1Score = 0;
		let player2Score = 0;
		let currentPlayer = 1;

function createCard(title, value) {
			const card = document.createElement('div');
			card.classList.add('card');

const cardTitle = document.createElement('div');
			cardTitle.classList.add('card__title');
			cardTitle.textContent = title;
			card.appendChild(cardTitle);

const cardValue = document.createElement('div');
			cardValue.classList.add('card__value');
			cardValue.textContent = value;
			card.appendChild(cardValue);

const cardBtn = document.createElement('div');
			cardBtn.classList.add('card__btn');

card.appendChild(cardBtn);

return card;
		}

function updateScores() {
			const player1Cards = Array.from(cardsContainer.children).filter((card, index) => index % 2 === 0);
			player1Cards.forEach((card, index) => {
				card.querySelector('.card__value').textContent = cardValues[index];
			});
			const player2Cards = Array.from(cardsContainer.children).filter((card, index) => index % 2 === 1);
			player2Cards.forEach((card, index) => {
				card.querySelector('.card__value').textContent = cardValues[index];
			});

if (player1Score >= maxScore && player2Score >= maxScore) {
				result.textContent = '引き分け！';
			} else if (player1Score >= maxScore) {
				result.textContent = 'プレイヤー1の勝ち！';
			} else if (player2Score >= maxScore) {
				result.textContent = 'プレイヤー2の勝ち！';
			} else {
				result.textContent = `${currentPlayer}Pの番です。`;
			}
		}

const cardValues = [1000, 2000, 3000, 4000, 5000];
		cardValues.forEach((value, index) => {
			cardsContainer.appendChild(createCard(`${value}円`, value));
		});

updateScores();
	</script>
</body>
</html>