Creat rotating 3d lines on a 2d canvas refrsh button's game

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

No:48725

←

Prev Next

→

Creat rotating 3d lines on a 2d canvas refrsh but..ALL
Developer User18896｜Date and time 24/3/2 21:25:06
Build time 7.85 sec｜Game capacity 1.183KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Rotating 3D Lines Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <button onclick="refreshCanvas()">Refresh</button>

let angle = 0;

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

angle += 0.1;

const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;

for (let i = 0; i < 360; i += 10) {
                const x1 = centerX + Math.cos(angle + i * Math.PI / 180) * 100;
                const y1 = centerY + Math.sin(angle + i * Math.PI / 180) * 100;

const x2 = centerX + Math.cos(angle + (i + 20) * Math.PI / 180) * 100;
                const y2 = centerY + Math.sin(angle + (i + 20) * Math.PI / 180) * 100;

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

setInterval(refreshCanvas, 16);
    </script>
</body>
</html>