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

←

Prev Next

→

Creat rotating 3d lines on a 2d canvas refrsh but..ALL
Developer User18896｜Date and time 24/3/2 21:23:57
Build time 4.885 sec｜Game capacity 1.439KB｜

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>
    <style>
        canvas {
            width: 100%;
            height: 100vh;
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

let angle = 0;

const draw = () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.save();
            ctx.translate(canvas.width / 2, canvas.height / 2);
            ctx.rotate(angle);

ctx.beginPath();
            ctx.moveTo(-100, -100);
            ctx.lineTo(100, 100);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(100, -100);
            ctx.lineTo(-100, 100);
            ctx.stroke();

angle += Math.PI / 180;

ctx.restore();

requestAnimationFrame(draw);
        };

draw();

const refreshButton = document.createElement('button');
        refreshButton.innerText = 'Refresh';
        refreshButton.style.position = 'fixed';
        refreshButton.style.bottom = '20px';
        refreshButton.style.right = '20px';
        document.body.appendChild(refreshButton);

refreshButton.addEventListener('click', () => {
            angle = 0;
        });
    </script>
</body>
</html>