Draw a cube 3d with black wireframe in a 500 x 500 canvas make some buttons to move the 3d cube in a 3d space Make it rotate with space and shift in a 3d space with a terrain under it's game

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

No:46715

←

Prev Next

→

Draw a cube 3d with black wireframe in a 500 x 500..ALL
Developer User20131｜Date and time 24/2/25 20:44:36
Build time 5.265 sec｜Game capacity 1.591KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>3D Cube Game</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <button onclick="moveCube('left')">Left</button>
    <button onclick="moveCube('right')">Right</button>
    <button onclick="moveCube('up')">Up</button>
    <button onclick="moveCube('down')">Down</button>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

let cube = {
            x: 250,
            y: 250,
            size: 50,
            rotation: 0
        }

function drawCube() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.strokeStyle = 'black';
            ctx.strokeRect(cube.x, cube.y, cube.size, cube.size);

requestAnimationFrame(drawCube);
        }

function moveCube(direction) {
            switch(direction) {
                case 'left':
                    cube.x -= 10;
                    break;
                case 'right':
                    cube.x += 10;
                    break;
                case 'up':
                    cube.y -= 10;
                    break;
                case 'down':
                    cube.y += 10;
                    break;
            }
        }

drawCube();
    </script>
</body>
</html>