3D graphics Display a cube Add cross Buttons That will help you Rotate the cube's game

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

No:36305

←

Prev Next

→

3D graphics Display a cube Add cross Buttons That ..ALL
Developer Game Studio｜Date and time 24/1/17 7:45:14
Build time 10.359 sec｜Game capacity 2.646KB｜

Script

Sure! Here's an example of a simple game in a single HTML file that displays a cube and allows the user to rotate it using cross buttons:

In this game, a 3D cube is displayed using CSS properties to make it appear three-dimensional. The cube can be rotated along the X and Y axes by clicking on the cross buttons (`⇧` and `⇨`). When a button is clicked, the cube is rotated accordingly. Please note that since you specifically mentioned using pictograms, I've used arrow symbols as buttons. You can change them to pictograms of your choice.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple game in a single HTML file that displays a cube and allows the user to rotate it using cross buttons:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Cube Game</title>
    <style>
        #container {
            width: 400px;
            height: 400px;
            position: relative;
        }

#cube {
            width: 200px;
            height: 200px;
            position: absolute;
            transform-style: preserve-3d;
        }

#cube .face {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="cube">
            <div class="face" style="transform: rotateY(0deg) translateZ(100px);"></div>
            <div class="face" style="transform: rotateY(90deg) translateZ(100px);"></div>
            <div class="face" style="transform: rotateY(180deg) translateZ(100px);"></div>
            <div class="face" style="transform: rotateY(-90deg) translateZ(100px);"></div>
            <div class="face" style="transform: rotateX(90deg) translateZ(100px);"></div>
            <div class="face" style="transform: rotateX(-90deg) translateZ(100px);"></div>
        </div>
    </div>

function rotateY() {
            var cube = document.getElementById("cube");
            cube.style.transform = "rotateY(90deg)";
        }

// Add event listeners to the buttons
        var rotateXButton = document.createElement("button");
        rotateXButton.innerText = "⇧";
        rotateXButton.addEventListener("click", rotateX);

var rotateYButton = document.createElement("button");
        rotateYButton.innerText = "⇨";
        rotateYButton.addEventListener("click", rotateY);

var container = document.getElementById("container");
        container.appendChild(rotateXButton);
        container.appendChild(rotateYButton);
    </script>
</body>
</html>
```

Please note that since you specifically mentioned using pictograms, I've used arrow symbols as buttons. You can change them to pictograms of your choice.