Browse Source

PUSH LYCEE

master
sacha.serny 3 years ago
parent
commit
2196a846c6
  1. BIN
      Thumbs.db
  2. 148
      app.js
  3. 38
      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.

148
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 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()
}
}

38
index.html

@ -1,30 +1,16 @@
<!DOCTYPE html>
<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>
<link href="style.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<body>
<div>
<a href="machine.html"><h2>MACHINE</h2></a>
<a href="machine.html"><h2>A SOUS NSI</h2></a>
</div>
<input type="text" id="mise">
<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>
</body>
</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;
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;
}

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