Draw a cube 3d with black wireframe in a 500 x 500 canvas Mak the cube move with arrow keys in a 3d space Make it rotate with space's game

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

No:46708

←

Prev Next

→

Draw a cube 3d with black wireframe in a 500 x 500..ALL
Developer User20131｜Date and time 24/2/25 20:39:22
Build time 7.099 sec｜Game capacity 1.839KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Cubo 3D Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="500" height="500"></canvas>

let cube = {
            x: 250,
            y: 250,
            size: 50,
            rotationX: 0,
            rotationY: 0
        };

document.addEventListener('keydown', function(event) {
            switch(event.key) {
                case 'ArrowDown':
                    cube.y += 5;
                    break;
                case 'ArrowUp':
                    cube.y -= 5;
                    break;
                case 'ArrowLeft':
                    cube.x -= 5;
                    break;
                case 'ArrowRight':
                    cube.x += 5;
                    break;
                case ' ':
                    cube.rotationX += 0.1;
                    cube.rotationY += 0.1;
                    break;
            }

drawCube();
        });

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

ctx.beginPath();
            ctx.moveTo(cube.x, cube.y);
            ctx.lineTo(cube.x + cube.size, cube.y);
            ctx.lineTo(cube.x + cube.size, cube.y + cube.size);
            ctx.lineTo(cube.x, cube.y + cube.size);
            ctx.lineTo(cube.x, cube.y);
            ctx.stroke();

ctx.save();
            ctx.translate(cube.x + cube.size/2, cube.y + cube.size/2);
            ctx.rotate(cube.rotationX);
            ctx.rotate(cube.rotationY);
            ctx.translate(-cube.size/2, -cube.size/2);
            ctx.strokeRect(0, 0, cube.size, cube.size);
            ctx.restore();
        }

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