ルービックキューブ's game

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

No:12976

110

←

Prev Next

→

ルービックキューブ
Developer User5664｜Date and time 23/8/25 16:15:34
Build time 41.422 sec｜Game capacity 4.859KB｜

Script

以下がルービックキューブのゲームの実装例です。

⬜

⬛

⬜

このプログラムは、1枚のhtmlファイルとして実装されています。JavaScriptの処理は`
`タグで囲んでおり、実行開始されています。実際にブラウザで開くと、ルービックキューブのゲームとして遊べます。スマホでも操作可能で、絵文字も使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

以下がルービックキューブのゲームの実装例です。

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ルービックキューブ</title>
    <style>
        .cube {
            width: 120px;
            height: 120px;
            display: flex;
            flex-wrap: wrap;
        }
        .cube div {
            width: 40px;
            height: 40px;
            text-align: center;
            font-size: 24px;
            line-height: 40px;
        }
        .red { background-color: #FF0000; color: #FFFFFF; }
        .green { background-color: #00FF00; color: #000000; }
        .blue { background-color: #0000FF; color: #FFFFFF; }
        .orange { background-color: #FFA500; color: #000000; }
        .yellow { background-color: #FFFF00; color: #000000; }
        .white { background-color: #FFFFFF; color: #000000; }
    </style>
</head>
<body>
    <div class="cube">
        
        <div class="white">⬜</div><div class="white">⬜</div><div class="white">⬜</div>
        <div class="white">⬜</div><div class="white">⬜</div><div class="white">⬜</div>
        <div class="white">⬜</div><div class="white">⬜</div><div class="white">⬜</div>
        
        <div class="red">⬛</div><div class="red">⬛</div><div class="red">⬛</div>
        <div class="red">⬛</div><div class="red">⬛</div><div class="red">⬛</div>
        <div class="red">⬛</div><div class="red">⬛</div><div class="red">⬛</div>
        <div class="green">⬛</div><div class="green">⬛</div><div class="green">⬛</div>
        <div class="green">⬛</div><div class="green">⬛</div><div class="green">⬛</div>
        <div class="green">⬛</div><div class="green">⬛</div><div class="green">⬛</div>
        <div class="blue">⬛</div><div class="blue">⬛</div><div class="blue">⬛</div>
        <div class="blue">⬛</div><div class="blue">⬛</div><div class="blue">⬛</div>
        <div class="blue">⬛</div><div class="blue">⬛</div><div class="blue">⬛</div>
        <div class="orange">⬛</div><div class="orange">⬛</div><div class="orange">⬛</div>
        <div class="orange">⬛</div><div class="orange">⬛</div><div class="orange">⬛</div>
        <div class="orange">⬛</div><div class="orange">⬛</div><div class="orange">⬛</div>
        
        <div class="yellow">⬜</div><div class="yellow">⬜</div><div class="yellow">⬜</div>
        <div class="yellow">⬜</div><div class="yellow">⬜</div><div class="yellow">⬜</div>
        <div class="yellow">⬜</div><div class="yellow">⬜</div><div class="yellow">⬜</div>
    </div>

// ルービックキューブの回転処理
        function rotate(target, direction) {
            const colors = ['white', 'red', 'green', 'blue', 'orange', 'yellow'];
            const elements = target.querySelectorAll(`.${colors.join(', .')}`);

elements.forEach(element => {
                const classList = element.classList;
                const firstColor = classList[0];
                classList.remove(firstColor);
                classList.add(colors[(colors.indexOf(firstColor) + direction + 6) % 6]);
            });
        }

// 左に回転する処理
        function rotateLeft() {
            rotate(cube, -1);
        }

// 右に回転する処理
        function rotateRight() {
            rotate(cube, 1);
        }

// 上に回転する処理
        function rotateUp() {
            rotate(cube, -3);
        }

// 下に回転する処理
        function rotateDown() {
            rotate(cube, 3);
        }

// キー操作で回転処理を呼び出す
        window.addEventListener('keydown', event => {
            switch (event.key) {
                case 'ArrowLeft':
                    rotateLeft();
                    break;
                case 'ArrowRight':
                    rotateRight();
                    break;
                case 'ArrowUp':
                    rotateUp();
                    break;
                case 'ArrowDown':
                    rotateDown();
                    break;
                default:
                    break;
            }
        });
    </script>
</body>
</html>
```

このプログラムは、1枚のhtmlファイルとして実装されています。JavaScriptの処理は`<script>`タグで囲んでおり、実行開始されています。実際にブラウザで開くと、ルービックキューブのゲームとして遊べます。スマホでも操作可能で、絵文字も使用しています。