barraux.a
/
MSJSAboulinBarraux
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

je pense que c fini

master
BARRAUX Arthur 3 years ago
parent
4e6fec617b
commit
ab64b3e8c9
5 changed files with 146 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 25
      app.js
  2. 123
      index.html
  3. BIN
      jackpot.png
  4. BIN
      machine.png
  5. 71
      master.css

25
app.js
View File

@ -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
View File

@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 922 KiB

BIN
machine.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 160 KiB

71
master.css
View File

@ -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;
}
}

Write Preview
Loading…
Cancel
Save