AI game creator

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

No:49450

←

Prev Next

→

Make a Rubiks cube
Developer User21041｜Date and time 24/3/5 3:08:25
Build time 10.331 sec｜Game capacity 2.142KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rubik's Cube Game</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
    }
    #cube {
        width: 300px;
        height: 300px;
        perspective: 600px;
    }
    #cube div {
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: transform 1s;
    }
    #cube .face {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 2px solid #333;
        box-sizing: border-box;
        background-color: #fff;
    }
    #cube .face.front {
        transform: rotateY(0deg) translateZ(150px);
    }
    #cube .face.back {
        transform: rotateY(180deg) translateZ(150px);
    }
    #cube .face.right {
        transform: rotateY(90deg) translateZ(150px);
    }
    #cube .face.left {
        transform: rotateY(-90deg) translateZ(150px);
    }
    #cube .face.top {
        transform: rotateX(90deg) translateZ(150px);
    }
    #cube .face.bottom {
        transform: rotateX(-90deg) translateZ(150px);
    }
</style>
</head>
<body>
<div id="cube">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
</div>
<script>
    const cube = document.getElementById('cube');

let rotateX = 0;
    let rotateY = 0;

document.addEventListener('keydown', (e) => {
        switch (e.key) {
            case 'ArrowUp':
                rotateX -= 90;
                break;
            case 'ArrowDown':
                rotateX += 90;
                break;
            case 'ArrowLeft':
                rotateY -= 90;
                break;
            case 'ArrowRight':
                rotateY += 90;
                break;
        }

cube.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
    });
</script>
</body>
</html>