Browse Source

merge js

master
BARRAUX Arthur 3 years ago
parent
commit
58cb57f916
  1. 25
      app.js
  2. 6
      index.html
  3. 2
      master.css

25
app.js

@ -81,19 +81,14 @@ function regles(){
} }
function rotate(rouleau, angle){ function rotate(rouleau, angle){
let id = null;
let i = 0; let i = 0;
clearInterval(id); let id = setInterval(() => {
id = setInterval(frame, 5); if (i >= angle) clearInterval(id);
function frame() {
if (i >= angle) {
clearInterval(id);
}
else { else {
i += 9; i += 9;
rouleau.style.transform = 'rotate3d(1,0,0,'+i+'deg)'; rouleau.style.transform = 'rotate3d(1,0,0,'+i+'deg)';
} }
} }, 5);
// let i = 1; // let i = 1;
// let interval = setInterval(() => { // let interval = setInterval(() => {
// if(i >= angle) { // if(i >= angle) {
@ -110,3 +105,17 @@ function tirage(){
rotate(document.getElementsByClassName("cube")[2], Math.floor(Math.random() * 15)*360+nbAlea()) rotate(document.getElementsByClassName("cube")[2], Math.floor(Math.random() * 15)*360+nbAlea())
} }
tirage() tirage()
function vw(v) {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
return (v * w) / 100;
}
window.onresize = () => {
let cubes = document.getElementsByClassName('cube__face')
for (var i = 0; i < 10; i++) {
/*window.getComputedStyle(cubes[i])*/cubes[i].style.transform =
'rotateX('+i*36+'deg) translateZ('+vw(3.4)*Math.tan(18 * Math.PI / 180)+')';
console.log(window.getComputedStyle(cubes[i]).transform)
}
}

6
index.html

@ -61,5 +61,11 @@
<input type="text" id="mise_input"> <input type="text" id="mise_input">
<button id="lancer" onclick="jeu()">Lancer</button> <button id="lancer" onclick="jeu()">Lancer</button>
<script src="app.js"></script> <script src="app.js"></script>
<div class="regles">
<div class="regles-container">
Règles
</div>
</div>
</body> </body>
</html> </html>

2
master.css

@ -19,7 +19,7 @@
position: relative; position: relative;
transform-style: preserve-3d; transform-style: preserve-3d;
/* transform: translateZ(-100px); */ /* transform: translateZ(-100px); */
transition: transform 1s; /*transition: transform 1s;*/
} }
.cube__face { .cube__face {

Loading…
Cancel
Save