Browse Source

PUSH LYCEE

master
sacha.serny 3 years ago
parent
commit
2196a846c6
  1. BIN
      Thumbs.db
  2. 100
      app.js
  3. 36
      index.html
  4. BIN
      logo.png
  5. BIN
      machine.docx
  6. 49
      machine.html
  7. 219
      stylepagecss/menu.css
  8. 40
      stylepagecss/style.css

BIN
Thumbs.db

Binary file not shown.

100
app.js

@ -1,72 +1,80 @@
/* Groupe d'Alexandre ABOULIN, Michel WANG et Sacha SERNY /* Groupe de Michel WANG et Sacha SERNY
import random HTML et CSS : Michel WANG
Javascript : Sacha SERNY*/
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 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"""
*/
function nbAlea() { function nbAlea() {
/* renvoie un entier entre 0 et 9 */
return Math.floor(Math.random() * 10); return Math.floor(Math.random() * 10);
} }
function gain(tirage) {
function gain(tirage) {
/* calcule les gains et génére les messages liés */
let phrase = ""
player_coins = player_coins - mise player_coins = player_coins - mise
machine_coins = machine_coins + mise machine_coins = machine_coins + mise
if (tirage == [9, 9, 9]) { if (tirage == [9, 9, 9]) {
player_coins = player_coins + machine_coins player_coins = player_coins + machine_coins
machine_coins = 0 machine_coins = 0
console.log("BINGO") phrase = "Bingo ! Vous avez gagné tous les jetons. \n "
} else if (tirage[0] == tirage[1] && tirage[1] == tirage[2]) { } else if (tirage[0] == tirage[1] && tirage[1] == tirage[2]) {
player_coins = player_coins + 6 * mise player_coins = player_coins + 6 * mise
machine_coins = machine_coins - 6 * mise machine_coins = machine_coins - 6 * mise
console.log("3*") 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]) { } else if (tirage[0] == tirage[1] || tirage[1] == tirage[2] || tirage[0] == tirage[2]) {
player_coins = player_coins + 2 * mise player_coins = player_coins + 3 * mise
machine_coins = machine_coins - 2 * mise machine_coins = machine_coins - 3 * mise
console.log("2*") phrase = "Bingo ! Vous avez doublé votre mise. \nVous avez gagné " + mise*3 + " jetons."
} else { } else {
console.log("Perdu") phrase = "Vous avez perdu vos " + mise + " jetons. \n "
} }
} // console.log(phrase);
function update_stats() { 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('machine_coins').innerText = machine_coins
document.getElementById('player_coins').innerText = player_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
}
function regle() { // Initialisation de la page et des variables
btn.appendChild(button_1); document.getElementById("show_rules").addEventListener("click", regles)
document.body.appendChild(button); var rouleaux = document.querySelectorAll(".rouleaux div")
} // console.log(rouleaux);
// Init rouleaux.forEach(rouleau => {
var rouleaux = document.querySelectorAll(".rouleaux #board")
rouleaux.forEach(rouleau => {
rouleau.innerText = 0 rouleau.innerText = 0
}); });
var mise = 0 var mise = 1
var machine_coins = 1000 var machine_coins = 1000
var player_coins = 100 var player_coins = 100
document.getElementById("valider").addEventListener("click", jeu); var toggle_rules = false
// jeu update_stats()
function jeu() {
// Fonction principale du jeu
function jeu() {
/* appelle les fonctiosn nécessaires au fonctionnement du jeu */
mise = parseInt((document.getElementById('mise').value), 10) mise = parseInt((document.getElementById('mise').value), 10)
console.log(mise) // console.log(mise)
if (player_coins >= mise && machine_coins > mise * 3) { if (player_coins >= mise && machine_coins >= 500 && mise > 0) {
var tirage = [nbAlea(), nbAlea(), nbAlea()] var tirage = [nbAlea(), nbAlea(), nbAlea()]
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
rouleaux[i].innerText = tirage[i]; rouleaux[i].innerText = tirage[i];
} }
console.log(tirage) // console.log(tirage)
gain(tirage) gain(tirage)
update_stats() update_stats()
} }
} }

36
index.html

@ -1,30 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head>
<title>M A C H I N E</title>
<meta charset="utf-8">
<link href="stylepagecss/style.css" rel="stylesheet">
<link rel="icon" type="image/jpg" sizes="16x16" href="icon.jpg">
</head>
<head> <body>
<link href="style.css" rel="stylesheet"> <div>
<meta charset="UTF-8"> <a href="machine.html"><h2>MACHINE</h2></a>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <a href="machine.html"><h2>A SOUS NSI</h2></a>
<title>Document</title>
</head>
<body>
<h1 onclick="">MACHINE A SOUS NSI</h1>
<form action="">
<div class="rouleaux">
<h3 id="rouleau1">NaN</h3>
<h3 id="rouleau1">NaN</h3>
<h3 id="rouleau1">NaN</h3>
</div> </div>
<input type="text" id="mise"> </body>
<input type="button" value="Submit" id="valider">
</form>
<h5>Jetons dans la machine : <h5 id="machine_coins"></h5>
</h5>
<h5>Jetons du joueur : <h5 id="player_coins"></h5>
</h5>
<script src="app.js"></script>
</body>
</html> </html>

BIN
logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
machine.docx

Binary file not shown.

49
machine.html

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="fr">
<!--
id="mise" entrer une valeur (si possible input)
id="machine_coins" affiche jetons machines
id="player_coins" affiche jetons joueur
id="rouleaux" div parente des trois rouleaux
qui sont forcément 3 enfants
id=""valider bouton pour lancer peut importe ce que c'update_stats
etc...
-->
<head>
<title>Machine à sous NSI</title>
<meta charset="utf-8">
<link href="stylepagecss/menu.css" rel="stylesheet">
<link rel="icon" type="image/jpg" sizes="16x16" href="icon.jpg">
</head>
<body >
<div>
<a href="index.html" class="title">MACHINE A SOUS NSI</a>
</div>
<div class="cadre_rouleaux">
<div class="rouleaux">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="button">
<button onclick="regles()" id="regles">Regle</button>
<button onclick="jeu()" id="valider">Lancer</button>
</div>
<div class="option">
<h2>machine coins : <h2 id="machine_coins"> </h2></h2>
<h2>player coins : <h2 id="player_coins"> </h2></h2>
<input id="mise">
<p id="show_rules"></p>
<p id="gain"></p>
</div>
<img src="logo.png" alt="logo" class="logo">
<script src="app.js"></script>
</body>
</html>

219
stylepagecss/menu.css

@ -1,44 +1,63 @@
body { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: black;
font: 5rem;
width: 1;
height: 1.4;
padding: 2.5rem;
font-size: 100%
} }
.title { body {
display: flex; display: flex;
align-items: center;
justify-content: 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; 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; position: relative;
font-family: Georgia, serif; display: flex;
font-size: 45px; justify-content: space-around;
white-space: nowrap; width: 14rem;
font-weight: lighter; height: 6.9rem;
overflow: hidden; overflow: hidden;
list-style-type: none; background-color: linear-gradient(to right, #fc5c7d, #6a82fb);
color: white; box-shadow: inset 0 2px 20px 1px #000, 0 2px 20px 1px rgba(255, 255, 255, 0.4);
animation: ecriture 3s steps(19); border-radius: 10px;
} text-align: center;
color: #fff;
@keyframes ecriture { text-shadow: -2px -2px 0 #aaa;
from {width: 0%} font: 5rem/1.4 monaco, monospace;
to {width: 100%;}
} }
/* Boutons */
.button { .button {
margin-top: 50px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
button.btn { .button button {
display: inline-block; display: inline-block;
background: transparent; background: transparent;
color: white; color: white;
@ -53,142 +72,54 @@ button.btn {
transition: all 0.7s; transition: all 0.7s;
} }
button.btn_1:hover { button:hover {
background-color: white; background-color: white;
color: black; color: black;
transition: all 0.7s; transition: all 0.7s;
} }
button.btn_2:hover { /* affichage des "coin player et machine" */
color: black; .option {
background-color: white; position: absolute;
} display: flex;
justify-content: center;
#machine_coins { align-items: center;
color: white; flex-direction: column;
}
#player_coins {
color: white;
}
#jeton {
margin-top: 100px;
color: white;
padding: 10px;
}
.container {
position: fixed;
top: 50%; top: 50%;
left: 50%; right: 3%;
margin-top: -6rem; transform: translateY(-50%);
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);
} }
.container:before { /* titre qui renvoie à la page index.html */
content: ""; .title {
position: absolute; 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; display: flex;
width: 15rem; justify-content: space-between;
height: 7rem; align-items: center;
overflow: hidden; padding: 20px 20px;
background: #333; top: 2%;
box-shadow: inset 0 0px 8px #000, 0 1px 0px 1px rgba(255, 255, 255, 0.4); left: 2%;
border-radius: 10px;
text-align: center;
color: #fff; color: #fff;
text-shadow: -2px -2px 0 #aaa; text-decoration: none;
font: 5rem/1.4 monaco, monospace; text-transform: uppercase;
} font-size: 2em;
letter-spacing: 1px;
.board { transition: 2s;
flex-grow: 1; z-index: 9998;
}
.checkbox {
display: none;
}
.checkbox ~ .wrapper > .board {
animation-play-state: paused !important;
}
.checkbox ~ .wrapper > .board.item1 {
animation: shuffle 1.3s steps(10);
}
.checkbox ~ .wrapper > .board.item2 {
animation: shuffle 1.1s steps(10);
}
.checkbox ~ .wrapper > .board.item3 {
animation: shuffle 0.9s steps(10);
} }
.checkbox:checked ~ .handle:before { .title:hover {
transform: rotateX(180deg); transition: 2s;
letter-spacing: 4px;
box-shadow: inset 0 2px 20px 1px #000, 0 2px 20px 1px rgba(255, 255, 255, 0.4);
} }
.checkbox:checked ~ .handle:after { /* logo*/
transform: translateY(140px); .logo {
}
.checkbox:checked ~ .wrapper > .board {
animation-play-state: running !important;
}
.handle {
position: absolute; position: absolute;
right: 0; right: 3%;
top: 50%; top: 2%;
} width: 80px;
height: 80px;
.handle:before { cursor: pointer;
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);
}
} }

40
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;
}
Loading…
Cancel
Save