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:48726

←

Prev Next

→

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

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating 3D Lines Game</title>
</head>

let angle = 0;

function draw() {
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;

const lineLength = 100;

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.save();
            ctx.translate(centerX, centerY);
            ctx.rotate(angle);

ctx.beginPath();
            ctx.moveTo(-lineLength, 0);
            ctx.lineTo(lineLength, 0);
            ctx.stroke();

angle += 0.05;

ctx.restore();

requestAnimationFrame(draw);
        }

draw();

const refreshButton = document.createElement("button");
        refreshButton.textContent = "Refresh";
        refreshButton.onclick = function() {
            angle = 0;
        }

document.body.appendChild(refreshButton);
    </script>
</body>

</html>