Skip to content

Commit 89cb535

Browse files
midudevmidudev
committed
Upgrade lock file
1 parent 46cbf5d commit 89cb535

File tree

2 files changed

+132
-0
lines changed

2 files changed

+132
-0
lines changed

‎web/bun.lockb

128 Bytes
Binary file not shown.

‎xx-dice/index.html

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Dado 3D</title>
8+
<style>
9+
body {
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
height: 100vh;
14+
margin: 0;
15+
background-color: #282c34;
16+
color: white;
17+
font-family: Arial, sans-serif;
18+
}
19+
20+
.scene {
21+
width: 200px;
22+
height: 200px;
23+
perspective: 600px;
24+
}
25+
26+
.cube {
27+
width: 100%;
28+
height: 100%;
29+
position: relative;
30+
transform-style: preserve-3d;
31+
transform: rotateX(0deg) rotateY(0deg);
32+
transition: transform 1s;
33+
}
34+
35+
.face {
36+
position: absolute;
37+
width: 200px;
38+
height: 200px;
39+
background-color: white;
40+
border: 2px solid #000;
41+
display: flex;
42+
justify-content: center;
43+
align-items: center;
44+
font-size: 50px;
45+
color: black;
46+
}
47+
48+
.front {
49+
transform: rotateY(0deg) translateZ(100px);
50+
}
51+
52+
.back {
53+
transform: rotateY(180deg) translateZ(100px);
54+
}
55+
56+
.right {
57+
transform: rotateY(90deg) translateZ(100px);
58+
}
59+
60+
.left {
61+
transform: rotateY(-90deg) translateZ(100px);
62+
}
63+
64+
.top {
65+
transform: rotateX(90deg) translateZ(100px);
66+
}
67+
68+
.bottom {
69+
transform: rotateX(-90deg) translateZ(100px);
70+
}
71+
72+
button {
73+
margin-top: 20px;
74+
padding: 10px 20px;
75+
font-size: 16px;
76+
cursor: pointer;
77+
}
78+
</style>
79+
80+
<script type="module">
81+
const button = document.querySelector('button')
82+
const cube = document.getElementById('cube');
83+
84+
button.addEventListener('click', () => {
85+
const randomFace = Math.floor(Math.random() * 6) + 1;
86+
87+
// Los ángulos de rotación para cada cara
88+
const rotations = {
89+
1: 'rotateX(0deg) rotateY(0deg)',
90+
2: 'rotateX(90deg) rotateY(0deg)',
91+
3: 'rotateX(0deg) rotateY(-90deg)',
92+
4: 'rotateX(0deg) rotateY(90deg)',
93+
5: 'rotateX(-90deg) rotateY(0deg)',
94+
6: 'rotateX(0deg) rotateY(180deg)',
95+
};
96+
97+
let currentRotationX = Math.floor(Math.random() * 360);
98+
let currentRotationY = Math.floor(Math.random() * 360);
99+
100+
let rotationInterval = setInterval(() => {
101+
currentRotationX += Math.floor(Math.random() * 20) + 10; // Aumenta rotación X
102+
currentRotationY += Math.floor(Math.random() * 20) + 10; // Aumenta rotación Y
103+
104+
cube.style.transform = `rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`;
105+
}, 100);
106+
107+
// Detener rotación y aplicar la rotación final con desaceleración
108+
setTimeout(() => {
109+
clearInterval(rotationInterval);
110+
111+
cube.style.transition = 'transform 1.5s cubic-bezier(0.25, 1, 0.5, 1)';
112+
cube.style.transform = rotations[randomFace];
113+
}, 1000); // La rotación dura 2 segundos antes de desacelerar y detenerse en la cara final
114+
})
115+
</script>
116+
</head>
117+
118+
<body>
119+
<div class="scene">
120+
<div id="cube" class="cube">
121+
<div class="face front">1</div>
122+
<div class="face back">6</div>
123+
<div class="face right">3</div>
124+
<div class="face left">4</div>
125+
<div class="face top">5</div>
126+
<div class="face bottom">2</div>
127+
</div>
128+
</div>
129+
<button onclick="rollDice()">Lanzar Dado</button>
130+
</body>
131+
132+
</html>

0 commit comments

Comments
 (0)