update slots et bj

2 years ago · 4194dac457
73 changed files with 294 additions and 9 deletions
--- a/BJ.html
+++ b/BJ.html
@ -0,0 +1,74 @@
+<!DOCTYPE html>
+
+<html>
+
+	<head>
+
+		<meta charset="utf-8">
+
+		<title>casino 77</title>
+
+		<link rel="stylesheet" type="text/css" href="styles.css">
+	</head>
+	<body>
+	
+
+
+	
+	<img class=logo src="image/logo.png">
+	
+	<a href="Index.html">
+		<img class=accueil src="image/accueil.png">
+	</a>
+
+
+	<div class="loader">
+
+        <span class="lettre">7</span>
+
+        <span class="lettre">7</span>
+
+        <span class="lettre">7</span>
+	</div>
+
+	<h2 class="h2bj">BLACK JACK</h2>
+
+	<div class="bjform">
+	    <h3>Dealer: <span id="dealer-sum"></span></h3>
+        <div id="dealer-cards">
+            <img id="hidden" src="./cards/BACK.png">
+        </div>
+
+        <h3>You: <span id="your-sum"></span></h3>
+        <div id="your-cards"></div>
+
+        <br>
+        <div class="buttonhs">
+        	<button id="hit">Hit</button>
+        	<button id="stay">Stay</button>
+        </div>
+        <p id="results"></p>
+    </div>
+
+    <div class="reload">
+    	<input type="button" onclick='window.location.reload(false)' value="Rafraichir" />
+    </div>
+
+
+
+
+
+
+
+
+
+
+
+
+	<div class="bg"></div>
+
+  <script src="loading.js"></script>
+  <script src="bj.js"></script>
+
+  </body>
+</html>
--- a/Index.html
+++ b/Index.html
@ -32,7 +32,9 @@
 	<a href="slots.html">
 	<img class="img1" src="image/imgnoirslot.png" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoirslot.png'" alt="" />
 	</a>
+	<a href="BJ.html">
 	<img class="img2" src="image/imgnoirbj.png" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoirbj.png'" alt="" />
+    </a>
 	<img class="img3" src="image/imgnoirroulette.png" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoirroulette.png'" alt="" />
 	<img class="img4" src="image/imgnoirbingo.png" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoirbingo.png'" alt="" />
 	
--- a/J-B.png
+++ b/J-B.png
--- a/J-C.png
+++ b/J-C.png
--- a/J-D.png
+++ b/J-D.png
--- a/J-H.png
+++ b/J-H.png
--- a/J-R.png
+++ b/J-R.png
--- a/J-S.png
+++ b/J-S.png
--- a/K-C.png
+++ b/K-C.png
--- a/K-D.png
+++ b/K-D.png
--- a/K-H.png
+++ b/K-H.png
--- a/K-S.png
+++ b/K-S.png
--- a/Q-C.png
+++ b/Q-C.png
--- a/Q-D.png
+++ b/Q-D.png
--- a/Q-H.png
+++ b/Q-H.png
--- a/Q-S.png
+++ b/Q-S.png
--- a/bj.js
+++ b/bj.js
@ -0,0 +1,151 @@
+var dealerSum = 0;
+var yourSum = 0;
+
+var dealerAceCount = 0;
+var yourAceCount = 0; 
+
+var hidden;
+var deck;
+
+var canHit = true; 
+
+window.onload = function() {
+    buildDeck();
+    shuffleDeck();
+    startGame();
+}
+
+function buildDeck() {
+    let values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
+    let types = ["C", "D", "H", "S"];
+    deck = [];
+
+    for (let i = 0; i < types.length; i++) {
+        for (let j = 0; j < values.length; j++) {
+            deck.push(values[j] + "-" + types[i]); 
+        }
+    }
+    // console.log(deck);
+}
+
+function shuffleDeck() {
+    for (let i = 0; i < deck.length; i++) {
+        let j = Math.floor(Math.random() * deck.length); 
+        let temp = deck[i];
+        deck[i] = deck[j];
+        deck[j] = temp;
+    }
+    console.log(deck);
+}
+
+function startGame() {
+    hidden = deck.pop();
+    dealerSum += getValue(hidden);
+    dealerAceCount += checkAce(hidden);
+    // console.log(hidden);
+    // console.log(dealerSum);
+    while (dealerSum < 17) {
+        //<img src="./cards/4-C.png">
+        let cardImg = document.createElement("img");
+        let card = deck.pop();
+        cardImg.src = "./cards/" + card + ".png";
+        dealerSum += getValue(card);
+        dealerAceCount += checkAce(card);
+        document.getElementById("dealer-cards").append(cardImg);
+    }
+    console.log(dealerSum);
+
+    for (let i = 0; i < 2; i++) {
+        let cardImg = document.createElement("img");
+        let card = deck.pop();
+        cardImg.src = "./cards/" + card + ".png";
+        yourSum += getValue(card);
+        yourAceCount += checkAce(card);
+        document.getElementById("your-cards").append(cardImg);
+    }
+
+    console.log(yourSum);
+    document.getElementById("hit").addEventListener("click", hit);
+    document.getElementById("stay").addEventListener("click", stay);
+
+}
+
+function hit() {
+    if (!canHit) {
+        return;
+    }
+
+    let cardImg = document.createElement("img");
+    let card = deck.pop();
+    cardImg.src = "./cards/" + card + ".png";
+    yourSum += getValue(card);
+    yourAceCount += checkAce(card);
+    document.getElementById("your-cards").append(cardImg);
+
+    if (reduceAce(yourSum, yourAceCount) > 21) { 
+        canHit = false;
+    }
+
+}
+
+function stay() {
+    dealerSum = reduceAce(dealerSum, dealerAceCount);
+    yourSum = reduceAce(yourSum, yourAceCount);
+
+    canHit = false;
+    document.getElementById("hidden").src = "./cards/" + hidden + ".png";
+
+    let message = "";
+    if (yourSum > 21) {
+        message = "Tu as perdu!";
+    }
+    else if (dealerSum > 21) {
+        message = "Tu as gagné!";
+    }
+    //both you and dealer <= 21
+    else if (yourSum == dealerSum) {
+        message = "Egalite!";
+    }
+    else if (yourSum > dealerSum) {
+        message = "Tu as gagné!";
+    }
+    else if (yourSum < dealerSum) {
+        message = "Tu as perdu!";
+    }
+
+    document.getElementById("dealer-sum").innerText = dealerSum;
+    document.getElementById("your-sum").innerText = yourSum;
+    document.getElementById("results").innerText = message;
+}
+
+function getValue(card) {
+    let data = card.split("-"); // "4-C" -> ["4", "C"]
+    let value = data[0];
+
+    if (isNaN(value)) { //A J Q K
+        if (value == "A") {
+            return 11;
+        }
+        return 10;
+    }
+    return parseInt(value);
+}
+
+function checkAce(card) {
+    if (card[0] == "A") {
+        return 1;
+    }
+    return 0;
+}
+
+function reduceAce(playerSum, playerAceCount) {
+    while (playerSum > 21 && playerAceCount > 0) {
+        playerSum -= 10;
+        playerAceCount -= 1;
+    }
+    return playerSum;
+}
+
+var refresh = window.getElementById('refresh');
+refresh.addEventListener('click', location.reload(), false);
+
--- a/cards/10-C.png
+++ b/cards/10-C.png
--- a/cards/10-D.png
+++ b/cards/10-D.png
--- a/cards/10-H.png
+++ b/cards/10-H.png
--- a/cards/10-S.png
+++ b/cards/10-S.png
--- a/cards/2-C.png
+++ b/cards/2-C.png
--- a/cards/2-D.png
+++ b/cards/2-D.png
--- a/cards/2-H.png
+++ b/cards/2-H.png
--- a/cards/2-S.png
+++ b/cards/2-S.png
--- a/cards/3-C.png
+++ b/cards/3-C.png
--- a/cards/3-D.png
+++ b/cards/3-D.png
--- a/cards/3-H.png
+++ b/cards/3-H.png
--- a/cards/3-S.png
+++ b/cards/3-S.png
--- a/cards/4-C.png
+++ b/cards/4-C.png
--- a/cards/4-D.png
+++ b/cards/4-D.png
--- a/cards/4-H.png
+++ b/cards/4-H.png
--- a/cards/4-S.png
+++ b/cards/4-S.png
--- a/cards/5-C.png
+++ b/cards/5-C.png
--- a/cards/5-D.png
+++ b/cards/5-D.png
--- a/cards/5-H.png
+++ b/cards/5-H.png
--- a/cards/5-S.png
+++ b/cards/5-S.png
--- a/cards/6-C.png
+++ b/cards/6-C.png
--- a/cards/6-D.png
+++ b/cards/6-D.png
--- a/cards/6-H.png
+++ b/cards/6-H.png
--- a/cards/6-S.png
+++ b/cards/6-S.png
--- a/cards/7-C.png
+++ b/cards/7-C.png
--- a/cards/7-D.png
+++ b/cards/7-D.png
--- a/cards/7-H.png
+++ b/cards/7-H.png
--- a/cards/7-S.png
+++ b/cards/7-S.png
--- a/cards/8-C.png
+++ b/cards/8-C.png
--- a/cards/8-D.png
+++ b/cards/8-D.png
--- a/cards/8-H.png
+++ b/cards/8-H.png
--- a/cards/8-S.png
+++ b/cards/8-S.png
--- a/cards/9-C.png
+++ b/cards/9-C.png
--- a/cards/9-D.png
+++ b/cards/9-D.png
--- a/cards/9-H.png
+++ b/cards/9-H.png
--- a/cards/9-S.png
+++ b/cards/9-S.png
--- a/cards/A-C.png
+++ b/cards/A-C.png
--- a/cards/A-D.png
+++ b/cards/A-D.png
--- a/cards/A-H.png
+++ b/cards/A-H.png
--- a/cards/A-S.png
+++ b/cards/A-S.png
--- a/cards/BACK.png
+++ b/cards/BACK.png
--- a/cards/J-B.png
+++ b/cards/J-B.png
--- a/cards/J-C.png
+++ b/cards/J-C.png
--- a/cards/J-D.png
+++ b/cards/J-D.png
--- a/cards/J-H.png
+++ b/cards/J-H.png
--- a/cards/J-R.png
+++ b/cards/J-R.png
--- a/cards/J-S.png
+++ b/cards/J-S.png
--- a/cards/K-C.png
+++ b/cards/K-C.png
--- a/cards/K-D.png
+++ b/cards/K-D.png
--- a/cards/K-H.png
+++ b/cards/K-H.png
--- a/cards/K-S.png
+++ b/cards/K-S.png
--- a/cards/Q-C.png
+++ b/cards/Q-C.png
--- a/cards/Q-D.png
+++ b/cards/Q-D.png
--- a/cards/Q-H.png
+++ b/cards/Q-H.png
--- a/cards/Q-S.png
+++ b/cards/Q-S.png
--- a/styles.css
+++ b/styles.css
@ -225,7 +225,7 @@
 .bg {
  width: 100%;
  opacity; 50%;
-  height: 200vh;
+  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
@ -269,11 +269,12 @@
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  margin-top: 15%;
+  
 }

 .doors {
  /*display: flex;*/
+  
 }

 .bank{
@ -344,7 +345,7 @@ button {


 body{
-  color: rgb(137,46,255);
+  color: rgb(90,46,255);
  font-family: "casino";
  text-shadow:  0 0 7px rgb(147,112,219), 
                0 0 25px rgb(147,112,219), 
@ -356,7 +357,7 @@ body{
 }

 h1{
-  color: rgb(137,46,255);
+  color: rgb(190,46,255);
  text-shadow:  0 0 7px rgb(147,112,219), 
                0 0 10px rgb(147,112,219), 
                0 0 25px rgb(147,112,219),
@ -367,8 +368,8 @@ h1{
 .slot {
    position: absolute;
    z-index: 1; 
-    margin-top: 35%;
-    margin-left: 38%;
+    margin-top: 18%;
+    margin-left: 39%;


 }
@ -376,9 +377,9 @@ h1{
 h2{
    position: absolute;
    z-index: 1;
-    font-size: 300%;
-    margin-top: 20%;
-    margin-left: 44%;
+    font-size: 200%;
+    margin-top: 15%;
+    margin-left: 46%;

    color: rgb(90,46,255);
    text-shadow:  0 0 7px rgb(0,0,219), 
@ -387,14 +388,71 @@ h2{
                0 0 35px rgb(147,112,219),
                0 0 45px rgb(147,112,219)
 }
+
+
+#dealer-cards img {
+    height: 175px;
+    width: 125px;
+    margin: 1px;
+}
+
+#your-cards img {
+    height: 175px;
+    width: 125px;
+    margin: 1px;
+}
+
+#hit {
+    width: 100px;
+    height: 50px;
+    font-size: 20px;
+}
+
+#stay {
+    width: 100px;
+    height: 50px;
+    font-size: 20px;
+}
+
+.buttonhs {
+    position: fixed;
+    margin-left: 5%;
+    margin-top: 2%;
+
 }


+.bjform {
+    position: absolute;
+    z-index: 1;
+    margin-top: 21%;
+    margin-left: 38%;
+}

+.h2bj {

+    position: absolute;
+    z-index: 1;
+    font-size: 200%;
+    margin-top: 15%;
+    margin-left: 43%;

+    color: rgb(90,46,255);
+    text-shadow:  0 0 7px rgb(0,0,219), 
+                0 0 10px rgb(147,112,219), 
+                0 0 25px rgb(147,112,219),
+                0 0 35px rgb(147,112,219),
+                0 0 45px rgb(147,112,219)

+}

+.reload {
+    position: absolute;
+    z-index: 1;
+    margin-top: 49%;
+    margin-left: 47%;
+  
+}