update slots et bj

3 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-top: 18%;
-    margin-left: 38%;
+    margin-left: 39%;
 }
@ -376,9 +377,9 @@ h1{
 h2{
    position: absolute;
    z-index: 1;
-    font-size: 300%;
+    font-size: 200%;
-    margin-top: 20%;
+    margin-top: 15%;
-    margin-left: 44%;
+    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%;
 }