Eidam/Black-Jack
1
0
Fork 0
mirror of https://github.com/MrEidam/Black-Jack.git synced 2025-12-29 08:56:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Basic functions of Blackjack done - even counting cards in your head

Browse Source
This commit is contained in:
MrEidam
2024-10-26 00:31:07 +02:00
parent 25fa32724b
commit 398c900fa0
3 changed files with 169 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -10,13 +10,17 @@
<title>BlackJack</title> <title>BlackJack</title>
</head> </head>
<body> <body>
<article class="cards cards1"><img src="./BlackJackCards/J-B.png" class="card" alt=""></article> <h2 id="dealerScore">???</h2>
<article class="cards cards1"></article>
<h2 id="playerScore">0</h2> <h2 id="playerScore">0</h2>
<article id="playerHand" class="cards cards2"></article> <article id="playerHand" class="cards cards2"></article>
<section> <section id="buttons">
<button onclick="hit()">Hit</button> <button onclick="hit()">Hit</button>
<button onclick="stand()">Stand</button> <button onclick="stand()">Stand</button>
</section> </section>
<section id="reset">
<button id="resetBTN" onclick="reset()">Reset</button>
</section>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
</html> </html>

131
main.js
View File

@@ -1,4 +1,6 @@
let playerCards = []; let playerCards = [];
let dealerCards = [];
let dealerScore = 0;
let score = 0; let score = 0;
const Deck = { const Deck = {
@@ -114,7 +116,33 @@ function addScore(num){
score += isNaN(e) ? 10 : parseInt(e); score += isNaN(e) ? 10 : parseInt(e);
} }
}); });
document.querySelector('h2').innerHTML = score; document.querySelector('#playerScore').innerHTML = score;
}
function addDealerScore(num){
dealerCards.push(num);
//? Filters out Aces
const withoutAces = dealerCards.filter(e => e !== 'A');
const count = dealerCards.length-withoutAces.length;
//? Adds the aces to the end
for(let i=0; i<count;i++){
withoutAces.push('A');
}
dealerCards = [...withoutAces];
dealerScore = 0;
dealerCards.forEach(e => {
if(e === 'A'){
dealerScore += (dealerScore < 11) ? 11 : 1;
}else{
dealerScore += isNaN(e) ? 10 : parseInt(e);
}
});
document.querySelector('#dealerScore').innerHTML = dealerScore;
} }
function reshuffle(){ function reshuffle(){
@@ -123,11 +151,12 @@ function reshuffle(){
setTimeout(200); setTimeout(200);
} }
function createCard(imgSource){ function createCard(imgSource, people){
let newCard = document.createElement('img'); let newCard = document.createElement('img');
newCard.src = imgSource; newCard.src = imgSource;
newCard.classList.add('card'); newCard.classList.add('card');
document.querySelector('.cards2').append(newCard); if(people === 'human') document.querySelector('.cards2').append(newCard);
else document.querySelector('.cards1').append(newCard);
} }
function cardAvail(num){ function cardAvail(num){
@@ -152,17 +181,36 @@ function cardAvail(num){
const card = currentDeck[randomCard][cardIndex]; const card = currentDeck[randomCard][cardIndex];
addScore(card); addScore(card);
createCard(`./${randomCard}/${card}.png`, 'human');
createCard(`./${randomCard}/${card}.png`); currentDeck[randomCard].splice(cardIndex, 1);
/*document.querySelectorAll('.card').forEach(e => { console.log(`Card removed from ${randomCard}: ${card}`);
e.src = `./${randomCard}/${card}.png`; }
});*/
function dealerCardGet(num){
if(dealerScore>18) return;
const availableCards = ['Clubs', 'Diamonds', 'Hearts', 'Spades'].filter((suit, idx) => num[idx] > 0);
if(availableCards.length === 0){
console.log('No cards available. Deck is empty.');
return;
}
const randomCard = availableCards[Math.floor(Math.random() * availableCards.length)];
if(!currentDeck[randomCard] || currentDeck[randomCard].length === 0){
console.log(`Error: ${randomCard} has no cards left.`);
return;
}
const cardIndex = Math.floor(Math.random()*currentDeck[randomCard].length);
const card = currentDeck[randomCard][cardIndex];
addDealerScore(card);
createCard(`./${randomCard}/${card}.png`);
currentDeck[randomCard].splice(cardIndex, 1); currentDeck[randomCard].splice(cardIndex, 1);
console.log(`Card removed from ${randomCard}: ${card}`); console.log(`Card removed from ${randomCard}: ${card}`);
console.log(currentDeck);
} }
function isDeckEmpty() { function isDeckEmpty() {
@@ -175,21 +223,76 @@ function addCard(){
} }
cardAvail(cardsleft()); cardAvail(cardsleft());
if(score > 21){ if(score > 21){
alert("You lost"); resultText('lost');
} }
} }
function addCardDealer(){
if(isDeckEmpty()){
reshuffle();
}
dealerCardGet(cardsleft());
if(dealerScore<18){
addCardDealer();
}
}
async function resultText(res){
let text = document.createElement('h1');
text.classList.add('result');
if(res==='won'){
text.classList.add('won');
text.innerText = "You've won!";
}else if(res==='lost'){
text.classList.add('lost');
text.innerText = "You've lost!";
}else if(res==='bj'){
text.classList.add('blackjack');
text.innerText = "BLACKJACK";
}else if(res==='draw'){
text.classList.add('draw');
text.innerHTML = "It's a Draw!"
}
document.body.append(text);
setTimeout(() => {
text.remove();
}, 600);
document.querySelector('#buttons').style.display = 'none';
document.querySelector('#reset').style.display = 'flex';
}
function dealerHit(){
addCardDealer();
}
function hit(){ function hit(){
addCard(); addCard();
if(score === 21){ if(score === 21){
alert("BLACKJACK!") resultText('bj');
//- Add 1.5 money
} }
} }
function stand(){ function stand(){
dealerHit();
if(score>21 || (score < dealerScore && dealerScore<=21)){
resultText('lost');
}else if(dealerScore>21 || (score > dealerScore && score<=21)){
resultText('won');
}else{
resultText('draw');
}
}
function reset(){
document.getElementById('playerHand').innerHTML = ""; document.getElementById('playerHand').innerHTML = "";
document.querySelector('.cards1').innerHTML = "";
score = 0; score = 0;
dealerScore = 0;
playerCards = []; playerCards = [];
document.querySelector('h2').innerHTML = score; dealerCards = [];
document.querySelector('#playerScore').innerHTML = score;
document.querySelector('#dealerScore').innerHTML = '???';
document.querySelector('#buttons').style.display = 'flex';
document.querySelector('#reset').style.display = 'none';
} }

46
style.css
View File

@@ -36,6 +36,44 @@ h2{
margin-top: .5rem; margin-top: .5rem;
} }
.result{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(1.5px 1.5px 6px #000);
text-transform: uppercase;
font-size: 100px;
animation: pop 0.5s ease-in-out;
}
.won{
color: #0f0;
}
.lost{
color: #f00;
}
.blackjack{
color: #ff0;
}
.draw{
color: #fff;
}
@keyframes pop{
0%{
scale: 0.5;
transform: translate(-100%, -50%);
}
100%{
scale: 1;
transform: translate(-50%, -50%);
}
}
button{ button{
border-radius: 5px; border-radius: 5px;
border: none; border: none;
@@ -44,5 +82,13 @@ button{
margin: .5rem; margin: .5rem;
color: #fff; color: #fff;
background: #6b6b6b; background: #6b6b6b;
box-shadow: 10px 10px 10px #202020,
inset 2.5px 2.5px 2.5px #999;
cursor: pointer; cursor: pointer;
}
button#resetBTN{
width: 140px;
}
#reset{
display: none;
} }