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 in a 3d space with a plaun under it's game

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

No:46709

←

Prev Next

→

Draw a cube 3d with black wireframe in a 500 x 500..ALL
Developer User20131｜Date and time 24/2/25 20:40:15
Build time 10.586 sec｜Game capacity 3.355KB｜

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</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500" style="border: 1px solid black;"></canvas>
    
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

let cube = {
            vertices: [
                [100, 100, 100],
                [200, 100, 100],
                [200, 200, 100],
                [100, 200, 100],
                [100, 100, 200],
                [200, 100, 200],
                [200, 200, 200],
                [100, 200, 200]
            ],
            edges: [
                [0, 1],
                [1, 2],
                [2, 3],
                [3, 0],
                [4, 5],
                [5, 6],
                [6, 7],
                [7, 4],
                [0, 4],
                [1, 5],
                [2, 6],
                [3, 7]
            ],
            thetaX: 0,
            thetaY: 0
        };

let plane = {
            vertices: [
                [0, 300, 0],
                [500, 300, 0]
            ],
            edges: [
                [0, 1]
            ]
        };

document.addEventListener('keydown', function(event) {
            const key = event.key;

if (key === 'ArrowUp') {
                cube.thetaX -= 0.05;
            } else if (key === 'ArrowDown') {
                cube.thetaX += 0.05;
            } else if (key === 'ArrowLeft') {
                cube.thetaY -= 0.05;
            } else if (key === 'ArrowRight') {
                cube.thetaY += 0.05;
            } else if (key === ' ') {
                cube.thetaX += 0.05;
                cube.thetaY += 0.05;
            }
        });

function rotatePoint(point, thetaX, thetaY) {
            const x = point[0];
            const y = point[1];
            const z = point[2];
            
            const cosX = Math.cos(thetaX);
            const sinX = Math.sin(thetaX);
            const cosY = Math.cos(thetaY);
            const sinY = Math.sin(thetaY);

const x1 = x;
            const y1 = y * cosX + z * sinX;
            const z1 = -y * sinX + z * cosX;

const x2 = x1 * cosY - z1 * sinY;
            const y2 = y1;
            const z2 = x1 * sinY + z1 * cosY;

return [x2, y2, z2];
        }

function drawCube(cube) {
            for (let edge of cube.edges) {
                const [x1, y1, z1] = rotatePoint(cube.vertices[edge[0]], cube.thetaX, cube.thetaY);
                const [x2, y2, z2] = rotatePoint(cube.vertices[edge[1]], cube.thetaX, cube.thetaY);

ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.stroke();
            }
        }

function drawPlane(plane) {
            for (let edge of plane.edges) {
                ctx.beginPath();
                ctx.moveTo(plane.vertices[edge[0][0]], plane.vertices[edge[0][1]]);
                ctx.lineTo(plane.vertices[edge[1][0]], plane.vertices[edge[1][1]]);
                ctx.stroke();
            }
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawCube(cube);
            drawPlane(plane);
        }

setInterval(draw, 1000 / 60);
    </script>
</body>
</html>