Browse Source

je pense que c fini

master
BARRAUX Arthur 3 years ago
parent
commit
ab64b3e8c9
  1. 25
      app.js
  2. 123
      index.html
  3. BIN
      jackpot.png
  4. BIN
      machine.png
  5. 69
      master.css

25
app.js

@ -69,7 +69,7 @@ async function jeu(){
game.inGame = true game.inGame = true
//game.mise = parseInt(document.getElementById("mise_input").value) //game.mise = parseInt(document.getElementById("mise_input").value)
if(game.mise > 100 || game.mise < 0 || game.mise > game.joueur){ if(game.mise > 100 || game.mise <= 0 || game.mise > game.joueur){
console.log("erreur: pas possible jouer") console.log("erreur: pas possible jouer")
game.inGame = false game.inGame = false
return return
@ -99,6 +99,7 @@ function gain(tirage){
if(tirage[0] == 9 && if(tirage[0] == 9 &&
tirage[1] == 9 && tirage[1] == 9 &&
tirage[2] == 9){ tirage[2] == 9){
let periode = setInterval(clignotement, 800);
return game.bac return game.bac
} }
else if(tirage[0] == tirage[1] && else if(tirage[0] == tirage[1] &&
@ -113,7 +114,7 @@ function gain(tirage){
return 0 return 0
} }
function regles(){ function regles(){
let overlay = document.getElementById("overlay-rules") let overlay = document.getElementsByClassName("overlay")[0];
if(overlay.style.display == "none") overlay.style.display = "flex" if(overlay.style.display == "none") overlay.style.display = "flex"
else overlay.style.display = "none" else overlay.style.display = "none"
} }
@ -135,3 +136,23 @@ for (let i = 0; i < 10; i++) {
} }
} }
let jackpot_loop = 0;
function clignotement(){
if (jackpot_loop<10){
if (document.getElementById('jackpot').style.visibility=='visible'){
document.getElementById('jackpot').style.visibility='hidden';
}
else{
document.getElementById('jackpot').style.visibility='visible';
}
}
else {
clearInterval(periode);
jackpot_loop = 0;
}
jackpot_loop++;
};
// mise en place de l appel de la fonction toutes les 0.8 secondes
// Pour arrêter le clignotement : clearInterval(periode);

123
index.html

@ -3,67 +3,86 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="master.css"> <link rel="stylesheet" href="master.css">
<title>Document</title> <title>Bellagio</title>
</head> </head>
<body> <body>
<img src="tirette.png" alt="tirette" id="tirette" onclick="jeu()"> <h1 style="text-align: center;">CASINO BELLAGIO</h1>
<img src="machine.png" id="tirage"> <div class="container">
<div id="rouleau_1" class="rouleau"> <img id="jackpot" src="jackpot.png"></img>
<div class="cube"> </div>
<div class="cube__face cube__face--0">0</div>
<div class="cube__face cube__face--1">1</div>
<div class="cube__face cube__face--2">2</div>
<div class="cube__face cube__face--3">3</div>
<div class="cube__face cube__face--4">4</div>
<div class="cube__face cube__face--5">5</div>
<div class="cube__face cube__face--6">6</div>
<div class="cube__face cube__face--7">7</div>
<div class="cube__face cube__face--8">8</div>
<div class="cube__face cube__face--9">9</div>
</div> <div class="game">
</div> <span class="info">Banque : <span id="banque_score">1000</span></span>
<div id="rouleau_2" class="rouleau"> <div class="machine">
<div class="cube"> <img src="tirette.png" alt="tirette" id="tirette" onclick="jeu()">
<div class="cube__face cube__face--0">0</div> <img src="machine.png" id="tirage">
<div class="cube__face cube__face--1">1</div> <div id="rouleau_1" class="rouleau">
<div class="cube__face cube__face--2">2</div> <div class="cube">
<div class="cube__face cube__face--3">3</div> <div class="cube__face cube__face--0">0</div>
<div class="cube__face cube__face--4">4</div> <div class="cube__face cube__face--1">1</div>
<div class="cube__face cube__face--5">5</div> <div class="cube__face cube__face--2">2</div>
<div class="cube__face cube__face--6">6</div> <div class="cube__face cube__face--3">3</div>
<div class="cube__face cube__face--7">7</div> <div class="cube__face cube__face--4">4</div>
<div class="cube__face cube__face--8">8</div> <div class="cube__face cube__face--5">5</div>
<div class="cube__face cube__face--9">9</div> <div class="cube__face cube__face--6">6</div>
<div class="cube__face cube__face--7">7</div>
<div class="cube__face cube__face--8">8</div>
<div class="cube__face cube__face--9">9</div>
</div> </div>
</div>
<div id="rouleau_2" class="rouleau">
<div class="cube">
<div class="cube__face cube__face--0">0</div>
<div class="cube__face cube__face--1">1</div>
<div class="cube__face cube__face--2">2</div>
<div class="cube__face cube__face--3">3</div>
<div class="cube__face cube__face--4">4</div>
<div class="cube__face cube__face--5">5</div>
<div class="cube__face cube__face--6">6</div>
<div class="cube__face cube__face--7">7</div>
<div class="cube__face cube__face--8">8</div>
<div class="cube__face cube__face--9">9</div>
</div>
</div>
<div id="rouleau_3" class="rouleau">
<div class="cube">
<div class="cube__face cube__face--0">0</div>
<div class="cube__face cube__face--1">1</div>
<div class="cube__face cube__face--2">2</div>
<div class="cube__face cube__face--3">3</div>
<div class="cube__face cube__face--4">4</div>
<div class="cube__face cube__face--5">5</div>
<div class="cube__face cube__face--6">6</div>
<div class="cube__face cube__face--7">7</div>
<div class="cube__face cube__face--8">8</div>
<div class="cube__face cube__face--9">9</div>
</div>
</div>
<input type="text" id="mise_input">
</img>
</div> </div>
<div id="rouleau_3" class="rouleau"> <span class="info">Vous : <span id="joueur_score"></span></span>
<div class="cube"> </div>
<div class="cube__face cube__face--0">0</div>
<div class="cube__face cube__face--1">1</div>
<div class="cube__face cube__face--2">2</div>
<div class="cube__face cube__face--3">3</div>
<div class="cube__face cube__face--4">4</div>
<div class="cube__face cube__face--5">5</div>
<div class="cube__face cube__face--6">6</div>
<div class="cube__face cube__face--7">7</div>
<div class="cube__face cube__face--8">8</div>
<div class="cube__face cube__face--9">9</div>
</div>
</div>
<input type="text" id="mise_input">
</img>
<p>Banque : <span id="banque_score">1000</span></p>
<p>Vous : <span id="joueur_score"></span></p>
<button class="button" onclick="regles()">Règles</button> <button class="button" onclick="regles()">Règles</button>
<div id="overlay-rules" style="display: none;"> <div class="overlay" style="display: none;">
<div class="overlay-container"> <div class="overlay-rules">
<h1>Règles</h1> <h1>Règles</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est magni quam harum error, neque quo sapiente, perferendis totam consectetur earum, itaque ducimus eum eaque quis expedita omnis dignissimos amet molestias?</p> <p>
<h4 style="text-align: center;">Bienvenue au Bellagio !</h4>
Vous disposez pour commencer de 100 jetons (quelle générosité!)<br>
Pour jouer indiquez une somme dans l'encart blanc sur la machine(inférieur à 100)<br>
Puis appuyez sur la tirette rouge et or et laissez la magie opérer.<br>
Si les trois chiffres sont identiques, alors :
<ul>
<li>s’ils sont (9, 9, 9) Bravo vous remportez le jackpot. Tout les jetons tombent </li>
<li>s'ils sont juste identiques: vous remportez 6 fois votre mise (c'est déjà pas mal!)</li>
<li>s'il y en a seulement 2 identiques: vous empochez 3 fois votre mise! (petit veinard)</li>
<li>sinon tant mieux pour nous vous perdez votre mise</li>
</ul>
Le jeu s'arrête lorque vous serez ruinez.</p>
<button class="button is-red" onclick="regles()">Fermer</button> <button class="button is-red" onclick="regles()">Fermer</button>
</div> </div>
</div> </div>

BIN
jackpot.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 922 KiB

BIN
machine.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 160 KiB

69
master.css

@ -1,16 +1,17 @@
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap');
body{ body{
background-color: #03183a; background-color: #001f37;
font-family: "Fredorka", sans-serif; font-family: "Fredorka", sans-serif;
margin: 0; margin: 0;
color: white;
} }
.rouleau { .rouleau {
width: 5vw; width: 5vw;
height: 3.8vw; height: 3.8vw;
position: absolute; position: absolute;
top: 20vw; top: 40%;
} }
.cube { .cube {
@ -34,63 +35,95 @@ body{
text-align: center; text-align: center;
} }
.machine{
position: relative;
height: 50vw;
width: 50vw;
}
.game{
display: flex;
}
.info{
height: 50vw;
width: 25vw;
text-align: center;
line-height: 10vw;
font-size: 2vw;
}
#jackpot{
visibility: hidden;
position: absolute;
height: 100vh;
display: block;
margin: 0 auto;
z-index: 205;
}
#rouleau_1{ #rouleau_1{
left: 41.3vw; left: 34.5%;
} }
#rouleau_2{ #rouleau_2{
left: 46.5vw; left: 45%;
} }
#rouleau_3{ #rouleau_3{
left: 51.7vw; left: 55.5%;
} }
#tirette{ #tirette{
position: absolute; position: absolute;
z-index: 10; z-index: 10;
left: 61vw; left: 74%;
top: 12vw; top: 23%;
width: 3.7vw; width: 7.5%;
transform-origin: 50% 97%; transform-origin: 50% 97%;
} }
#tirage{ #tirage{
display: flex;
justify-content: space-around;
left: 25vw;
position: relative; position: relative;
width: 50vw; width: 100%;
} }
#mise_input{ #mise_input{
position: absolute; position: absolute;
top: 33vw; top: 65%;
left: 42vw; left: 37%;
width: 13vw; width: 26%;
height: 2vw; height: 4%;
border-radius: 20px; border-radius: 20px;
border: none; border: none;
box-shadow: 0px 0px 37px black; box-shadow: 0px 0px 37px black;
outline: none; outline: none;
text-align: center;
}
.container{
display: flex;
justify-content: center;
} }
#overlay-rules{ .overlay{
background-color: rgb(0, 0, 0, 0.5); background-color: rgb(0, 0, 0, 0.5);
height: 100%; height: 100%;
width: 100%; width: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 42;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
#overlay-rules > .overlay-container{ .overlay > .overlay-rules{
height: min-content; height: min-content;
padding: 2em; padding: 2em;
border-radius: 20px; border-radius: 20px;
opacity: 1; opacity: 1;
color: black;
background-color: white; background-color: white;
width: 40vw; width: 40vw;
} }

Loading…
Cancel
Save