Browse Source

update

master
clochard.l 3 years ago
parent
commit
5e6970986a
  1. BIN
      image/accueil.png
  2. 130
      main.js
  3. 51
      slots.html
  4. 132
      styles.css

BIN
image/accueil.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 83 KiB

130
main.js

@ -0,0 +1,130 @@
//let machine_sous = new Object();
let argent = 100
let nombres = []
let bank = 1000
let mise
let gains = 0
function saisie(){
if (argent>0){
mise = document.getElementById("mise").value;
bank+=Number(mise);
argent-=Number(mise);
gain(nombres);
}
else{
console.log("PLUS DE SOUS")
}
}
function gain(nb){
if (nb[1]==nb[2] && nb[2]==nb[3] && nb[3]==9) {
argent+=bank;
bank-=bank;
gains+=bank;
console.log("Bingo");
}
else if(nb[1]==nb[2] && nb[2]==nb[3]){
argent+=6*Number(mise);
bank-=6*Number(mise);
gains+=6*Number(mise);
console.log("trois égaux");
}
else if(nb[1]==nb[2]||nb[2]==nb[3]||nb[3]==nb[1]){
argent+=3*Number(mise);
bank-=3*Number(mise);
gains+=3*Number(mise);
console.log("deux égaux");
}
else{
console.log("aucun égaux");
}
affiche();
}
function affiche(){
console.log('Vous avez gagné %d jetons', gains);
console.log('\nIl vous reste %d jetons, et il reste %d jetons dans le bac de la machine.\n', argent, bank);
gains=0;
}
const items = [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
];
const doors = document.querySelectorAll(".door");
document.querySelector("#spinner").addEventListener("click", spin);
//document.querySelector("#reseter").addEventListener("click", init);
async function spin() {
init(false, 1, 2);
if(argent>0){
for (const door of doors) {
const boxes = door.querySelector(".boxes");
const duration = parseInt(boxes.style.transitionDuration);
boxes.style.transform = "translateY(0)";
await new Promise((resolve) => setTimeout(resolve, duration * 100));
}
}
}
function init(firstInit, groups, duration) {
for (const door of doors) {
const boxes = door.querySelector(".boxes");
const boxesClone = boxes.cloneNode(false);
const pool = ["?"];
if (!firstInit) {
const arr = [];
for (let n = 0; n < (groups > 0 ? groups : 1); n++) {
arr.push(...items);
}
pool.push(...shuffle(arr));
boxesClone.addEventListener(
"transitionend",
function () {
this.querySelectorAll(".box").forEach((box, index) => {
box.style.filter = "blur(0)";
if (index > 0) this.removeChild(box);
});
},
);
}
for (let i = pool.length - 1; i >= 0; i--) {
const box = document.createElement("div");
box.classList.add("box");
box.style.height = door.clientHeight + "px";
box.textContent = pool[i];
boxesClone.appendChild(box);
}
boxesClone.style.transitionDuration = `${duration > 0 ? duration : 1}s`;
boxesClone.style.transform = `translateY(-${door.clientHeight * (pool.length - 1)}px)`;
door.replaceChild(boxesClone, boxes);
nombres.push(pool[9]);
}
console.log(nombres);
saisie()
nombres = [];
document.getElementById("bank_val").innerHTML=bank;
document.getElementById("argent_val").innerHTML=argent;
}
function shuffle([...arr]) {
let m = arr.length;
while (m) {
const i = Math.floor(Math.random() * m--);
[arr[m], arr[i]] = [arr[i], arr[m]];
}
return arr;
}

51
slots.html

@ -30,13 +30,52 @@
<span class="lettre">7</span> <span class="lettre">7</span>
</div> </div>
<h2>SLOTS</h2>
<div class="slot">
<div id="app">
<div class="doors">
<div class="door">
<div class="boxes">
<!-- <div class="box">?</div> -->
</div>
</div>
<div class="door">
<div class="boxes">
<!-- <div class="box">?</div> -->
</div>
</div>
<div class="door">
<div class="boxes">
<!-- <div class="box">?</div> -->
</div>
</div>
</div>
<div class="bank">
<div id="resultat"><span id="bank_val"></span></div id="resultat">
</div>
<div class="bank">
<div id="resultat"><span id="argent_val"></span></div id="resultat">
</div>
<div class="buttons">
<button id="spinner">Spin</button>
<!--<button id="reseter">Reset</button>-->
</div>
<input type="text" id="mise" name="mise">
<p class="info"></p>
</div>
</div>
<img class="img1" src="image/imgnoirslot.png" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoirslot.png'" alt="" />
<img class="img2" src="image/imgnoirbj.png" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoirbj.png'" alt="" />
<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="" />
<div class="bg"></div> <div class="bg"></div>

132
styles.css

@ -217,11 +217,6 @@
src: url("casino.TTF"); src: url("casino.TTF");
font-style: normal;
font-weight: normal;
} }
@ -230,7 +225,7 @@
.bg { .bg {
width: 100%; width: 100%;
opacity; 50%; opacity; 50%;
height: 100vh; height: 200vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -267,7 +262,132 @@
} }
#app {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 15%;
}
.doors {
/*display: flex;*/
}
.bank{
background: #fafafa;
box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.4) inset;
width: 100px;
height: 150px;
overflow: hidden;
border-radius: 1ex;
margin: 1ch;
float: top;
}
#resultat{
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
margin-top: 55%;
}
.door {
background: #fafafa;
box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.4) inset;
width: 100px;
height: 150px;
overflow: hidden;
border-radius: 1ex;
margin: 1ch;
float: right;
}
.boxes {
/* transform: translateY(0); */
transition: transform 1s ease-in-out;
}
.box {
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
}
.buttons {
margin: 1rem 0 2rem 0;
}
button {
cursor: pointer;
font-size: 1.2rem;
text-transform: uppercase;
margin: 0 0.2rem 0 0.2rem;
}
.info {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
body{
color: rgb(137,46,255);
font-family: "casino";
text-shadow: 0 0 7px rgb(147,112,219),
0 0 25px rgb(147,112,219),
0 0 30px rgb(147,112,219),
0 0 35px rgb(147,112,219),
0 0 40px rgb(147,112,219),
0 0 50px rgb(147,112,219),
0 0 60px rgb(147,112,219)
}
h1{
color: rgb(137,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),
0 0 35px rgb(147,112,219),
0 0 45px rgb(147,112,219)
}
.slot {
position: absolute;
z-index: 1;
margin-top: 35%;
margin-left: 38%;
}
h2{
position: absolute;
z-index: 1;
font-size: 300%;
margin-top: 20%;
margin-left: 44%;
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)
}
}

Loading…
Cancel
Save