tiens

3 years ago · a4c7d0cc92
3 changed files with 53 additions and 26 deletions
--- 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()
--- a/index.html
+++ b/index.html
@ -6,7 +6,7 @@
    <title>Document</title>
 </head>
 <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 class="cube">
@ -53,7 +53,7 @@

            </div>
        </div>
-    </div>
+    </img>

    <p>Banque : <span id="banque_score">1000</span></p>
    <p>Vous : <span id="joueur_score"></span></p>
--- 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); }