barraux.a
/
MSJSAboulinBarraux
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

tiens

master
BARRAUX Arthur 3 years ago
parent
85f7409ee3
commit
a4c7d0cc92
3 changed files with 53 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 21
      app.js
  2. 4
      index.html
  3. 54
      master.css

21
app.js
View File

@ -1,3 +1,16 @@
function vw(v) {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
return (v * w) / 100;
}
for (var i = 0; i < 10; i++) {
document.getElementsByClassName('cube__face')[i].style.transform = 'rotateX('+i*36+'deg) translateZ(calc(3.4vw *'Math.tan(18* Math.PI / 180)')';
}
let bac = 1000 let bac = 1000
let joueur = 100 let joueur = 100
let mise let mise
@ -66,7 +79,7 @@ function rotate(rouleau, angle){
let id = null; let id = null;
let i = 0; let i = 0;
clearInterval(id); clearInterval(id);
id = setInterval(frame, 10); id = setInterval(frame, 5);
function frame() { function frame() {
if (i >= angle) { if (i >= angle) {
clearInterval(id); clearInterval(id);
@ -87,8 +100,8 @@ function rotate(rouleau, angle){
} }
function tirage(){ function tirage(){
rotate(document.getElementsByClassName("cube")[0], 4*360+nbAlea()) rotate(document.getElementsByClassName("cube")[0], Math.floor(Math.random() * 15)*360+nbAlea())
rotate(document.getElementsByClassName("cube")[1], 4*360+nbAlea()) rotate(document.getElementsByClassName("cube")[1], Math.floor(Math.random() * 15)*360+nbAlea())
rotate(document.getElementsByClassName("cube")[2], 4*360+nbAlea()) rotate(document.getElementsByClassName("cube")[2], Math.floor(Math.random() * 15)*360+nbAlea())
} }
tirage() tirage()

4
index.html
View File

@ -6,7 +6,7 @@
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<div id="tirage"> <img src="https://thumbs.dreamstime.com/b/rouge-chance-gagne-jackpot-machine-%C3%A0-sous-sur-t%C3%A9l%C3%A9phone-mobile-chanceux-le-vecteur-de-illustration-221760505.jpg" id="tirage">
<div id="rouleau_1" class="rouleau"> <div id="rouleau_1" class="rouleau">
<div class="cube"> <div class="cube">
@ -53,7 +53,7 @@
</div> </div>
</div> </div>
</div> </img>
<p>Banque : <span id="banque_score">1000</span></p> <p>Banque : <span id="banque_score">1000</span></p>
<p>Vous : <span id="joueur_score"></span></p> <p>Vous : <span id="joueur_score"></span></p>

54
master.css
View File

@ -1,19 +1,21 @@
.rouleau { .rouleau {
width: 60px; width: 4.1vw;
height: 60px; height: 3.4vw;
margin: 80px 0; position: absolute;
perspective: 400px; top: 16.8vw;
} }
#tirage { #tirage {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin: 0 20%; margin: auto;
position: relative;
width: 42.4%;
} }
.cube { .cube {
width: 50px; width: 4.1vw;
height: 50px; height: 3.4vw;
position: relative; position: relative;
transform-style: preserve-3d; transform-style: preserve-3d;
/* transform: translateZ(-100px); */ /* transform: translateZ(-100px); */
@ -22,10 +24,10 @@
.cube__face { .cube__face {
position: absolute; position: absolute;
width: 50px; width: 4.1vw;
height: 50px; height: 3.4vw;
border: 2px solid black; border: 2px solid black;
line-height: 50px; line-height: 3.4vw;
font-size: 20px; font-size: 20px;
background-color: #e52800; background-color: #e52800;
box-sizing: border-box; box-sizing: border-box;
@ -34,13 +36,25 @@
text-align: center; text-align: center;
} }
.cube__face--0 { transform: rotateX( 0deg) translateZ(76px); } #rouleau_1{
.cube__face--1 { transform: rotateX( 36deg) translateZ(76px); } left: 42.8%;
.cube__face--2 { transform: rotateX( 72deg) translateZ(76px); } }
.cube__face--3 { transform: rotateX(108deg) translateZ(76px); }
.cube__face--4 { transform: rotateX(144deg) translateZ(76px); } #rouleau_2{
.cube__face--5 { transform: rotateX(180deg) translateZ(76px); } left: 47.1%;
.cube__face--6 { transform: rotateX(216deg) translateZ(76px); } }
.cube__face--7 { transform: rotateX(252deg) translateZ(76px); }
.cube__face--8 { transform: rotateX(288deg) translateZ(76px); } #rouleau_3{
.cube__face--9 { transform: rotateX(324deg) translateZ(76px); } left: 51.5%;
}
.cube__face--0 { transform: rotateX( 0deg) translateZ(74px); }
.cube__face--1 { transform: rotateX( 36deg) translateZ(74px); }
.cube__face--2 { transform: rotateX( 72deg) translateZ(74px); }
.cube__face--3 { transform: rotateX(108deg) translateZ(74px); }
.cube__face--4 { transform: rotateX(144deg) translateZ(74px); }
.cube__face--5 { transform: rotateX(180deg) translateZ(74px); }
.cube__face--6 { transform: rotateX(216deg) translateZ(74px); }
.cube__face--7 { transform: rotateX(252deg) translateZ(74px); }
.cube__face--8 { transform: rotateX(288deg) translateZ(74px); }
.cube__face--9 { transform: rotateX(324deg) translateZ(74px); }

Write Preview
Loading…
Cancel
Save