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. 71
      master.css

25
app.js

@ -69,7 +69,7 @@ async function jeu(){
game.inGame = true
//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")
game.inGame = false
return
@ -99,6 +99,7 @@ function gain(tirage){
if(tirage[0] == 9 &&
tirage[1] == 9 &&
tirage[2] == 9){
let periode = setInterval(clignotement, 800);
return game.bac
}
else if(tirage[0] == tirage[1] &&
@ -113,7 +114,7 @@ function gain(tirage){
return 0
}
function regles(){
let overlay = document.getElementById("overlay-rules")
let overlay = document.getElementsByClassName("overlay")[0];
if(overlay.style.display == "none") overlay.style.display = "flex"
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>
<meta charset="UTF-8">
<link rel="stylesheet" href="master.css">
<title>Document</title>
<title>Bellagio</title>
</head>
<body>
<img src="tirette.png" alt="tirette" id="tirette" onclick="jeu()">
<img src="machine.png" id="tirage">
<div id="rouleau_1" 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>
<h1 style="text-align: center;">CASINO BELLAGIO</h1>
<div class="container">
<img id="jackpot" src="jackpot.png"></img>
</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 class="game">
<span class="info">Banque : <span id="banque_score">1000</span></span>
<div class="machine">
<img src="tirette.png" alt="tirette" id="tirette" onclick="jeu()">
<img src="machine.png" id="tirage">
<div id="rouleau_1" 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>
<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 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>
<span class="info">Vous : <span id="joueur_score"></span></span>
</div>
<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>
<div id="overlay-rules" style="display: none;">
<div class="overlay-container">
<div class="overlay" style="display: none;">
<div class="overlay-rules">
<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>
</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

71
master.css

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

Loading…
Cancel
Save