diff --git a/Thumbs.db b/Thumbs.db new file mode 100644 index 0000000..c9e44dc Binary files /dev/null and b/Thumbs.db differ diff --git a/app.js b/app.js index ac375fa..35bd6d0 100644 --- a/app.js +++ b/app.js @@ -1,72 +1,80 @@ -/* Groupe d'Alexandre ABOULIN, Michel WANG et Sacha SERNY -import random - -var rules = """Vous allez insérer le nombre de jeton que vous possédez -Vous allez insérer un certain nombre de jeton entre 0 et 100 afin de pouvoir jouer -Voici les règle du jeu : -- 3 chiffres seront tirés aléatoirements entre 0 et 9; -- si vous tirez deux chiffres identiques vous obtenez 3 fois votre mise; -- si vous arrivez à tirer 3 chiffres identiques, différents du chiffre 9, alors vous recevrez 6 fois la mise que vous avez saisie au début; -- [JACKPOT] dans le cas où vous êtes chanceux et que vous arrivez à tirer trois fois le chiffre '9', alors vous recevrez tous les jetons du bac; -- mais dans le cas contraire, si vous avez obtenu 3 chiffres, tous différents les un des autres, alors vous ne recevrez rien et vous aurez perdu votre mise; -Dans tous les cas sauf le jackpot, le joueur perd sa mise -Bien évidemment, pour ne pas vous anarquer, si le bac possède moin de 500 jetons, alors le jeu s'arrêtera -Et puis il faut également pas oublier que si vous n'avez plus de jeton, alors vous ne pourrez plus jouer""" -*/ - +/* Groupe de Michel WANG et Sacha SERNY +HTML et CSS : Michel WANG +Javascript : Sacha SERNY*/ function nbAlea() { - return Math.floor(Math.random() * 10); -} -function gain(tirage) { - player_coins = player_coins - mise - machine_coins = machine_coins + mise - if (tirage == [9, 9, 9]) { - player_coins = player_coins + machine_coins - machine_coins = 0 - console.log("BINGO") - } else if (tirage[0] == tirage[1] && tirage[1] == tirage[2]) { - player_coins = player_coins + 6 * mise - machine_coins = machine_coins - 6 * mise - console.log("3*") - } else if (tirage[0] == tirage[1] || tirage[1] == tirage[2] || tirage[0] == tirage[2]) { - player_coins = player_coins + 2 * mise - machine_coins = machine_coins - 2 * mise - console.log("2*") - } else { - console.log("Perdu") - } -} -function update_stats() { - document.getElementById('machine_coins').innerText = machine_coins - document.getElementById('player_coins').innerText = player_coins -} - -function regle() { - btn.appendChild(button_1); - document.body.appendChild(button); -} -// Init -var rouleaux = document.querySelectorAll(".rouleaux #board") -rouleaux.forEach(rouleau => { - rouleau.innerText = 0 -}); -var mise = 0 -var machine_coins = 1000 -var player_coins = 100 -document.getElementById("valider").addEventListener("click", jeu); -// jeu -function jeu() { - mise = parseInt((document.getElementById('mise').value), 10) - console.log(mise) - if (player_coins >= mise && machine_coins > mise * 3) { - var tirage = [nbAlea(), nbAlea(), nbAlea()] - for (let i = 0; i < 3; i++) { - rouleaux[i].innerText = tirage[i]; - - } - console.log(tirage) - gain(tirage) - update_stats() - } -} + /* renvoie un entier entre 0 et 9 */ + return Math.floor(Math.random() * 10); + } + + function gain(tirage) { + /* calcule les gains et génére les messages liés */ + let phrase = "" + player_coins = player_coins - mise + machine_coins = machine_coins + mise + if (tirage == [9, 9, 9]) { + player_coins = player_coins + machine_coins + machine_coins = 0 + phrase = "Bingo ! Vous avez gagné tous les jetons. \n " + } else if (tirage[0] == tirage[1] && tirage[1] == tirage[2]) { + player_coins = player_coins + 6 * mise + machine_coins = machine_coins - 6 * mise + phrase = "Bingo ! Vous avez triplé votre mise. \nVous avez gagné " + mise*6 + " jetons." + } else if (tirage[0] == tirage[1] || tirage[1] == tirage[2] || tirage[0] == tirage[2]) { + player_coins = player_coins + 3 * mise + machine_coins = machine_coins - 3 * mise + phrase = "Bingo ! Vous avez doublé votre mise. \nVous avez gagné " + mise*3 + " jetons." + } else { + phrase = "Vous avez perdu vos " + mise + " jetons. \n " + } + // console.log(phrase); + document.getElementById('gain').innerText = phrase + } + + function update_stats() { + /* affiche les données de la partie dans la page HTML */ + document.getElementById('machine_coins').innerText = machine_coins + document.getElementById('player_coins').innerText = player_coins + } + + function regles() { + /* affiche les regles dans la page HTML */ + // console.log(toggle_rules); + let rules = document.querySelector('.show_rules') + if (toggle_rules == true) { + rules.style.display = "none" + } else { + rules.style.display = "block" + } + toggle_rules = !toggle_rules + } + + + // Initialisation de la page et des variables + document.getElementById("show_rules").addEventListener("click", regles) + var rouleaux = document.querySelectorAll(".rouleaux div") + // console.log(rouleaux); + rouleaux.forEach(rouleau => { + rouleau.innerText = 0 + }); + var mise = 1 + var machine_coins = 1000 + var player_coins = 100 + var toggle_rules = false + update_stats() + + // Fonction principale du jeu + function jeu() { + /* appelle les fonctiosn nécessaires au fonctionnement du jeu */ + mise = parseInt((document.getElementById('mise').value), 10) + // console.log(mise) + if (player_coins >= mise && machine_coins >= 500 && mise > 0) { + var tirage = [nbAlea(), nbAlea(), nbAlea()] + for (let i = 0; i < 3; i++) { + rouleaux[i].innerText = tirage[i]; + } + // console.log(tirage) + gain(tirage) + update_stats() + } + } \ No newline at end of file diff --git a/index.html b/index.html index c7442b6..7c1c0d1 100644 --- a/index.html +++ b/index.html @@ -1,30 +1,16 @@ + + M A C H I N E + + + + - - - - - Document - - - -

MACHINE A SOUS NSI

-
-
-

NaN

-

NaN

-

NaN

+ +
+

MACHINE

+

A SOUS NSI

- - - - -
Jetons dans la machine :
- -
Jetons du joueur :
- - - - - \ No newline at end of file + + diff --git a/logo.png b/logo.png new file mode 100644 index 0000000..3f3c214 Binary files /dev/null and b/logo.png differ diff --git a/machine.docx b/machine.docx new file mode 100644 index 0000000..61a379e Binary files /dev/null and b/machine.docx differ diff --git a/machine.html b/machine.html new file mode 100644 index 0000000..7065a26 --- /dev/null +++ b/machine.html @@ -0,0 +1,49 @@ + + + + + + + Machine à sous NSI + + + + + + + +
+ MACHINE A SOUS NSI +
+
+
+
+
+
+
+
+
+ + +
+
+

machine coins :

+

player coins :

+ +

+

+
+ + + + + + diff --git a/stylepagecss/menu.css b/stylepagecss/menu.css index 99729bb..d7fc5c5 100644 --- a/stylepagecss/menu.css +++ b/stylepagecss/menu.css @@ -1,44 +1,63 @@ -body { +* { margin: 0; padding: 0; - background-color: black; - font: 5rem; - width: 1; - height: 1.4; - padding: 2.5rem; - font-size: 100% } -.title { +body { display: flex; + align-items: center; justify-content: center; + flex-direction: column; + min-height: 100vh; + background: rgb(18,79,96); + background: -moz-linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%); + background: -webkit-linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%); + background: linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#124f60",endColorstr="#5421a3",GradientType=1); + padding: 2.5rem; + color: white; + overflow: hidden; +} + +/* cadre qui entoure le rouleaux*/ +.cadre_rouleaux { + display: flex; align-items: center; + flex-direction: column; + padding-top: 3.3rem; + width: 20rem; + height: 10rem; + background-color: linear-gradient(to right, #fc5c7d, #6a82fb); + box-shadow: inset 0 2px 20px 15px #000, 0 2px 20px 5px rgba(255, 255, 255, 0.4); + border-radius: 10px; } -.title1 p{ +/* Affichage numéros */ +.rouleaux { position: relative; - font-family: Georgia, serif; - font-size: 45px; - white-space: nowrap; - font-weight: lighter; + display: flex; + justify-content: space-around; + width: 14rem; + height: 6.9rem; overflow: hidden; - list-style-type: none; - color: white; - animation: ecriture 3s steps(19); -} - -@keyframes ecriture { - from {width: 0%} - to {width: 100%;} + background-color: linear-gradient(to right, #fc5c7d, #6a82fb); + box-shadow: inset 0 2px 20px 1px #000, 0 2px 20px 1px rgba(255, 255, 255, 0.4); + border-radius: 10px; + text-align: center; + color: #fff; + text-shadow: -2px -2px 0 #aaa; + font: 5rem/1.4 monaco, monospace; } +/* Boutons */ .button { + margin-top: 50px; display: flex; justify-content: center; align-items: center; } -button.btn { +.button button { display: inline-block; background: transparent; color: white; @@ -53,142 +72,54 @@ button.btn { transition: all 0.7s; } -button.btn_1:hover { +button:hover { background-color: white; color: black; transition: all 0.7s; } - -button.btn_2:hover { - color: black; - background-color: white; -} - -#machine_coins { - color: white; -} -#player_coins { - color: white; -} - -#jeton { - margin-top: 100px; - color: white; - padding: 10px; -} - -.container { - position: fixed; +/* affichage des "coin player et machine" */ +.option { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; top: 50%; - left: 50%; - margin-top: -6rem; - margin-left: -10rem; - padding: 2.5rem; - border-radius: 10px; - background: linear-gradient(to bottom, #666, #444); - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); + right: 3%; + transform: translateY(-50%); } -.container:before { - content: ""; +/* titre qui renvoie à la page index.html */ +.title { position: absolute; - top: 17%; - left: 10%; - height: 66%; - width: 80%; - border-radius: 10px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 0 -1px 0 1px rgba(255, 255, 255, 0.1); - background: linear-gradient(to bottom, #444, #666); -} - -.wrapper { - position: relative; display: flex; - width: 15rem; - height: 7rem; - overflow: hidden; - background: #333; - box-shadow: inset 0 0px 8px #000, 0 1px 0px 1px rgba(255, 255, 255, 0.4); - border-radius: 10px; - text-align: center; + justify-content: space-between; + align-items: center; + padding: 20px 20px; + top: 2%; + left: 2%; color: #fff; - text-shadow: -2px -2px 0 #aaa; - font: 5rem/1.4 monaco, monospace; -} - -.board { - flex-grow: 1; -} - -.checkbox { - display: none; -} - -.checkbox ~ .wrapper > .board { - animation-play-state: paused !important; + text-decoration: none; + text-transform: uppercase; + font-size: 2em; + letter-spacing: 1px; + transition: 2s; + z-index: 9998; } -.checkbox ~ .wrapper > .board.item1 { - animation: shuffle 1.3s steps(10); +.title:hover { + transition: 2s; + letter-spacing: 4px; + box-shadow: inset 0 2px 20px 1px #000, 0 2px 20px 1px rgba(255, 255, 255, 0.4); } -.checkbox ~ .wrapper > .board.item2 { - animation: shuffle 1.1s steps(10); -} - -.checkbox ~ .wrapper > .board.item3 { - animation: shuffle 0.9s steps(10); -} - -.checkbox:checked ~ .handle:before { - transform: rotateX(180deg); -} - -.checkbox:checked ~ .handle:after { - transform: translateY(140px); -} - -.checkbox:checked ~ .wrapper > .board { - animation-play-state: running !important; -} - -.handle { +/* logo*/ +.logo { position: absolute; - right: 0; - top: 50%; -} - -.handle:before { - content: ""; - position: absolute; - bottom: 0; - width: 20px; - height: 60px; - background: linear-gradient(to right, #bbb 0%, #eee 30%, #bbb 100%); - border-radius: 0 0 10px 0; - transform-origin: bottom center; - transition: transform 0.2s ease; -} - -.handle:after { - content: ""; - position: absolute; - bottom: 55px; - left: -5px; - width: 30px; - height: 30px; - border-radius: 50%; - background: radial-gradient(circle farthest-corner at 25% 25% LightSalmon 0%, tomato 100%); - transform-origin: bottom center; - transition: transform 0.2s ease; -} - -@keyframes shuffle { - 0% { - transform: translate3d(0, 0, 0); - } - 100% { - transform: translate3d(0, -70rem, 0); - } + right: 3%; + top: 2%; + width: 80px; + height: 80px; + cursor: pointer; } \ No newline at end of file diff --git a/stylepagecss/style.css b/stylepagecss/style.css new file mode 100644 index 0000000..35dcb99 --- /dev/null +++ b/stylepagecss/style.css @@ -0,0 +1,40 @@ +* { + margin: 0; + padding: 0; +} + +/* le fond avec un gradient*/ +body { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + min-height: 100vh; + background: rgb(18,79,96); + background: -moz-linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%); + background: -webkit-linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%); + background: linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#124f60",endColorstr="#5421a3",GradientType=1); +} + +/* lien "machine à sous NSI" qui nous mène vers la page avec l'interface graphique de la machine à sous*/ +a { + font-family: arial; + position: relative; + text-transform: uppercase; + text-align: center; + text-decoration: none; + font-size: 7.5em; + width: 100%; + color:white; + text-shadow: 20px 10px 25px #000000; + letter-spacing: 19.8px; + transition: 3s; +} + +/* petit effet sur le lien*/ +a:hover { + font-size: 3em; + transition: 3s; + text-shadow: 20px 10px 10px black, 0 0 25px blue, 0 0 5px darkblue; +}