saulnier.j
/
MSJS_clochard_saulnier
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fin js roulette

master
jean-lou.saulnier 2 years ago
parent
26d25e649c
commit
1b6871d502
6 changed files with 337 additions and 97 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. 71
      main.js
  2. 26
      test.html
  3. 96
      test_jl/js_save.txt
  4. 134
      test_jl/main.js
  5. 60
      test_jl/test.css
  6. 47
      test_jl/test.html

71
main.js
View File

@ -1,71 +0,0 @@
//let machine_sous = new Object();
let argent
let nombres = []
let bank = 1000
let mise
let gains = 0
function start(){
argent = document.getElementById("argent").value;
regle();
test();
}
function test(){
console.log(argent);
}
function regle(){
console.log("les règles sont ..............");
console.log("Mais aussi ça .............");
}
function saisie(){
mise = document.getElementById("mise").value;
bank+=Number(mise);
argent-=Number(mise);
nb_alea();
}
function nb_alea(){
var random_1 = Math.floor(Math.random() * (10 - 1)) + 1;
var random_2 = Math.floor(Math.random() * (10 - 1)) + 1;
var random_3 = Math.floor(Math.random() * (10 - 1)) + 1;
gain(random_1, random_2, random_3);
}
function gain(random_1, random_2, random_3){
if (random_1==random_2 && random_2==random_3 && random_3==9) {
argent+=bank;
bank-=bank;
gains+=bank;
console.log("Bingo");
}
else if(random_1==random_2 && random_2==random_3){
argent+=6*Number(mise);
bank-=6*Number(mise);
gains+=6*Number(mise);
console.log("trois égaux");
}
else if(random_1==random_2||random_2==random_3||random_3==random_1){
argent+=3*Number(mise);
bank-=3*Number(mise);
gains+=3*Number(mise);
console.log("deux égaux");
}
else{
console.log("aucun égaux");
}
affiche(random_1, random_2, random_3);
}
function affiche(random_1, random_2, random_3){
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);
}

26
test.html
View File

@ -1,26 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<img src="logo.jpeg">
<input type="text" id="argent" name="argent" value=""><br>
<input type="button" id="bouton" value="Contrôler" onclick="start()"><br><br>
<input type="text" id="mise" name="mise" value=""><br>
<input type="button" id="bouton" value="Contrôler" onclick="saisie()">
<script src="main.js"></script>
</body>
</html>

96
test_jl/js_save.txt
View File

@ -0,0 +1,96 @@
const items = [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
];
//document.querySelector(".info").textContent = items.join(" ");
const doors = document.querySelectorAll(".door");
document.querySelector("#spinner").addEventListener("click", spin);
document.querySelector("#reseter").addEventListener("click", init);
async function spin() {
init(false, 1, 2);
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) {
//if (firstInit) {
//console.log("dans le focntion")
//door.dataset.spinned = "0";
//} else if (door.dataset.spinned === "1") {
//return;
//}
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));
console.log(pool);
//boxesClone.addEventListener(
"transitionstart",
//function () {
//door.dataset.spinned = "1";
//this.querySelectorAll(".box").forEach((box) => {
//box.style.filter = "blur(1px)";
//});
//},
//{ once: true }
//);
boxesClone.addEventListener(
"transitionend",
function () {
this.querySelectorAll(".box").forEach((box, index) => {
box.style.filter = "blur(0)";
if (index > 0) this.removeChild(box);
});
},
//{ once: true }
);
}
for (let i = pool.length - 1; i >= 0; i--) {
const box = document.createElement("div");
box.classList.add("box");
//box.style.width = door.clientWidth + "px";
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);
// console.log(door);
}
}
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;
}
init();

134
test_jl/main.js
View File

@ -0,0 +1,134 @@
//let machine_sous = new Object();
let argent = 100
let nombres = []
let bank = 1000
let mise
let gains = 0
regle()
function regle(){
console.log("les règles sont ..............");
console.log("Mais aussi ça .............");
}
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);
}
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);
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 = [];
//console.log(nombres);
}
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;
}

60
test_jl/test.css
View File

@ -0,0 +1,60 @@
#app {
width: 100%;
height: 100%;
background: #212121;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.doors {
display: flex;
}
.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;
}
.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;
}

47
test_jl/test.html
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<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="buttons">
<button id="spinner">Spin</button>
<!--<button id="reseter">Reset</button>-->
</div>
<input type="text" id="mise" name="mise">
<p class="info"></p>
</div>
<script src="main.js"></script>
</body>
</html>
Write Preview
Loading…
Cancel
Save