Make a 3D wireframe cube's game

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

No:48441

←

Prev Next

→

Make a 3D wireframe cube
Developer User20762｜Date and time 24/3/2 6:02:22
Build time 14.331 sec｜Game capacity 2.77KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>3D Wireframe Cube Game</title>
    <style>
        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

const cube = [
            [100, 100, 100],
            [100, -100, 100],
            [-100, -100, 100],
            [-100, 100, 100],
            [100, 100, -100],
            [100, -100, -100],
            [-100, -100, -100],
            [-100, 100, -100]
        ];

const connections = [
            [0, 1], [1, 2], [2, 3], [3, 0],
            [4, 5], [5, 6], [6, 7], [7, 4],
            [0, 4], [1, 5], [2, 6], [3, 7]
        ];

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

function drawCube() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 2;

cube.forEach((point, index) => {
                const [x, y, z] = point;
                const perspective = 500 / (500 + z);
                const projectedX = x * perspective + canvas.width / 2;
                const projectedY = y * perspective + canvas.height / 2;

cube[index] = [x, y, z + 1]; // Rotate cube slightly

if (index !== 0) {
                    const prevPoint = cube[index - 1];
                    const [prevX, prevY, prevZ] = prevPoint;
                    const prevPerspective = 500 / (500 + prevZ);
                    const projectedPrevX = prevX * prevPerspective + canvas.width / 2;
                    const projectedPrevY = prevY * prevPerspective + canvas.height / 2;

drawLine(projectedX, projectedY, projectedPrevX, projectedPrevY);
                }
            });

connections.forEach(([a, b]) => {
                const [x1, y1, z1] = cube[a];
                const [x2, y2, z2] = cube[b];
                const perspectiveA = 500 / (500 + z1);
                const perspectiveB = 500 / (500 + z2);
                const projectedX1 = x1 * perspectiveA + canvas.width / 2;
                const projectedY1 = y1 * perspectiveA + canvas.height / 2;
                const projectedX2 = x2 * perspectiveB + canvas.width / 2;
                const projectedY2 = y2 * perspectiveB + canvas.height / 2;

drawLine(projectedX1, projectedY1, projectedX2, projectedY2);
            });

requestAnimationFrame(drawCube);
        }

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