A 3d cube the can be rotated in its position with arrows's game

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

No:46727

←

Prev Next

→

A 3d cube the can be rotated in its position with ..ALL
Developer User20131｜Date and time 24/2/25 21:30:13
Build time 6.595 sec｜Game capacity 1.707KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Gioco del cubo</title>
    <script type="text/javascript">
        var cube = document.createElement('div');
        cube.style.width = '100px';
        cube.style.height = '100px';
        cube.style.background = 'red';
        cube.style.position = 'absolute';
        cube.style.left = '50%';
        cube.style.top = '50%';
        cube.style.transformStyle = 'preserve-3d';

cube.style.transition = 'transform 0.5s';

cube.style.transform = 'rotateX(0deg) rotateY(0deg)';

document.body.appendChild(cube);

var rotateCube = function(direction){
            switch(direction){
              case 'up':
                cube.style.transform += ' rotateX(-90deg)';
                break; 
              case 'down':
                cube.style.transform += ' rotateX(90deg)';
                break; 
              case 'left':
                cube.style.transform += ' rotateY(-90deg)';
                break; 
              case 'right':
                cube.style.transform += ' rotateY(90deg)';
                break; 
            }
        }

window.addEventListener('keydown', function(event){
            switch(event.keyCode){
                case 37: // left arrow
                    rotateCube('left');
                    break;
                case 38: // up arrow
                    rotateCube('up');
                    break;
                case 39: // right arrow
                    rotateCube('right');
                    break;
                case 40: // down arrow
                    rotateCube('down');
                    break;
            }
        });
    </script>
</head>
<body>
</body>
</html>