diff --git a/app.js b/app.js index f736b5e..6df4373 100644 --- a/app.js +++ b/app.js @@ -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 joueur = 100 let mise @@ -66,7 +79,7 @@ function rotate(rouleau, angle){ let id = null; let i = 0; clearInterval(id); - id = setInterval(frame, 10); + id = setInterval(frame, 5); function frame() { if (i >= angle) { clearInterval(id); @@ -87,8 +100,8 @@ function rotate(rouleau, angle){ } function tirage(){ - rotate(document.getElementsByClassName("cube")[0], 4*360+nbAlea()) - rotate(document.getElementsByClassName("cube")[1], 4*360+nbAlea()) - rotate(document.getElementsByClassName("cube")[2], 4*360+nbAlea()) + rotate(document.getElementsByClassName("cube")[0], Math.floor(Math.random() * 15)*360+nbAlea()) + rotate(document.getElementsByClassName("cube")[1], Math.floor(Math.random() * 15)*360+nbAlea()) + rotate(document.getElementsByClassName("cube")[2], Math.floor(Math.random() * 15)*360+nbAlea()) } tirage() diff --git a/index.html b/index.html index 0bd1a44..ee262e3 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ Document -
+
@@ -53,7 +53,7 @@
-
+

Banque : 1000

Vous :

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