AI game creator

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

No:50377

130

←

Prev Next

→

Clock V3
Developer User21309｜Date and time 24/3/8 15:44:54
Build time 6.661 sec｜Game capacity 1.465KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Clock V3</title>
</head>
<body>
  <canvas id="clockCanvas" width="200" height="200"></canvas>
  <script>
    const canvas = document.getElementById('clockCanvas');
    const ctx = canvas.getContext('2d');

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

const now = new Date();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

// Draw clock face
      ctx.beginPath();
      ctx.arc(canvas.width / 2, canvas.height / 2, 90, 0, 2 * Math.PI);
      ctx.stroke();

// Draw hours hand
      ctx.moveTo(canvas.width / 2, canvas.height / 2);
      ctx.lineTo(canvas.width / 2 + 50 * Math.cos((hours - 3) * (Math.PI / 6)), canvas.height / 2 + 50 * Math.sin((hours - 3) * (Math.PI / 6)));
      ctx.stroke();

// Draw minutes hand
      ctx.moveTo(canvas.width / 2, canvas.height / 2);
      ctx.lineTo(canvas.width / 2 + 70 * Math.cos((minutes - 15) * (Math.PI / 30)), canvas.height / 2 + 70 * Math.sin((minutes - 15) * (Math.PI / 30)));
      ctx.stroke();

// Draw seconds hand
      ctx.moveTo(canvas.width / 2, canvas.height / 2);
      ctx.lineTo(canvas.width / 2 + 80 * Math.cos((seconds - 15) * (Math.PI / 30)), canvas.height / 2 + 80 * Math.sin((seconds - 15) * (Math.PI / 30));
      ctx.stroke();

requestAnimationFrame(drawClock);
    }

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