A 3d cubein the center the can be rotated in its position with arrows in a 3d space's game

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

No:46731

137

←

Prev Next

→

A 3d cubein the center the can be rotated in its p..ALL
Developer User20131｜Date and time 24/2/25 21:34:22
Build time 7.186 sec｜Game capacity 1.623KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Cubo 3D</title>
<style>
    canvas {
        display: block;
        margin: auto;
        border: 1px solid black;
    }
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>

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

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

ctx.beginPath();
        ctx.moveTo(150, 150);
        ctx.lineTo(250, 150);
        ctx.lineTo(250, 250);
        ctx.lineTo(150, 250);
        ctx.lineTo(150, 150);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(100, 100);
        ctx.lineTo(150, 150);
        ctx.moveTo(300, 100);
        ctx.lineTo(250, 150);
        ctx.moveTo(300, 300);
        ctx.lineTo(250, 250);
        ctx.moveTo(100, 300);
        ctx.lineTo(150, 250);
        ctx.stroke();
    }

function animate() {
        angleX += 1;
        angleY += 1;
        
        ctx.save();
        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.rotate(angleX * Math.PI / 180);
        ctx.rotate(angleY * Math.PI / 180);
        ctx.translate(-canvas.width / 2, -canvas.height / 2);
        
        drawCube();

ctx.restore();

requestAnimationFrame(animate);
    }

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