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

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

No:48719

145

←

Prev Next

→

Creat rotating random 3d object on a 2d canvas re..ALL
Developer User18896｜Date and time 24/3/2 21:20:24
Build time 4.662 sec｜Game capacity 1.301KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>3D Object Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <button onclick="refresh()">Refresh</button>

let angleX = 0;
        let angleY = 0;

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

const size = 100;

ctx.beginPath();
            ctx.moveTo(200 + size * Math.cos(angleX), 200 + size * Math.sin(angleX));
            ctx.lineTo(200 + size * Math.cos(angleX + Math.PI), 200 + size * Math.sin(angleX + Math.PI));
            ctx.moveTo(200 + size * Math.cos(angleY), 200 + size * Math.sin(angleY));
            ctx.lineTo(200 + size * Math.cos(angleY + Math.PI), 200 + size * Math.sin(angleY + Math.PI));
            ctx.stroke();

angleX += 0.05;
            angleY += 0.03;

requestAnimationFrame(draw);
        }

function refresh() {
            angleX = Math.random() * Math.PI * 2;
            angleY = Math.random() * Math.PI * 2;
        }

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