AI game creator

Click here for free DL of the app version that can save data.

No:22688

←

Prev Next

→

Un juego de cubos
Developer User3408｜Date and time 23/10/24 7:18:39
Build time 42.714 sec｜Game capacity 2.612KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

<html>
<head>
    <style>
        #container {
            width: 300px;
            height: 300px;
            perspective: 1000px;
        }
        
        #cube {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            animation: spin 5s infinite linear;
        }
        
        #cube .face {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #ccc;
            border: 1px solid #000;
            opacity: 0.7;
        }
        
        #cube .front {
            transform: translateZ(100px);
        }
        
        #cube .back {
            transform: rotateY(180deg) translateZ(100px);
        }
        
        #cube .left {
            transform: rotateY(-90deg) translateZ(100px);
        }
        
        #cube .right {
            transform: rotateY(90deg) translateZ(100px);
        }
        
        #cube .top {
            transform: rotateX(90deg) translateZ(100px);
        }
        
        #cube .bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
        
        @keyframes spin {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="cube">
            <div class="face front">
                <img src="pictogram1.png" alt="Pictograma 1">
            </div>
            <div class="face back">
                <img src="pictogram2.png" alt="Pictograma 2">
            </div>
            <div class="face left">
                <img src="pictogram3.png" alt="Pictograma 3">
            </div>
            <div class="face right">
                <img src="pictogram4.png" alt="Pictograma 4">
            </div>
            <div class="face top">
                <img src="pictogram5.png" alt="Pictograma 5">
            </div>
            <div class="face bottom">
                <img src="pictogram6.png" alt="Pictograma 6">
            </div>
        </div>
    </div>

cube.addEventListener('click', function() {
            cube.style.animationPlayState = 'paused';
            
            // Your game logic here
            
            setTimeout(() => {
                cube.style.animationPlayState = 'running';
            }, 2000); // Resume spinning after 2 seconds
        });
    </script>
</body>
</html>