三千重振り子を自由に動かす's game

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

No:32218

←

Prev Next

→

三千重振り子を自由に動かす
Developer うにょUser14145｜Date and time 23/12/30 15:21:37
Build time 13.044 sec｜Game capacity 2.091KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<body>
  <canvas id="canvas"></canvas>
  <script>
    // Get canvas element and its context
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

// Variables
    var startX, startY;
    var lineLength = 100; // Length of the swinging line
    var angle = 0; // Angle of the swinging line
    var angularVelocity = 0; // Angular velocity of the swinging line
    var damping = 0.99; // Damping factor to reduce the speed over time

// Functions to handle touch events
    function touchStart(event) {
      startX = event.touches[0].clientX;
      startY = event.touches[0].clientY;
    }

function touchMove(event) {
      var touchX = event.touches[0].clientX;
      var touchY = event.touches[0].clientY;

// Calculate the change in X and Y coordinates
      var deltaX = touchX - startX;
      var deltaY = touchY - startY;

// Update the angle and angular velocity based on the touch input
      angle += deltaX * 0.01;
      angularVelocity = deltaY * 0.01;

// Update the start position for the next touch event
      startX = touchX;
      startY = touchY;
    }

// Add event listeners for touch events
    canvas.addEventListener("touchstart", touchStart, false);
    canvas.addEventListener("touchmove", touchMove, false);

// Animation loop
    function animate() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Calculate the new angle and angular velocity
      angle += angularVelocity;
      angularVelocity *= damping;

// Calculate the end point of the swinging line
      var endX = canvas.width / 2 + Math.sin(angle) * lineLength;
      var endY = canvas.height / 2 + Math.cos(angle) * lineLength;

// Draw the swinging line
      ctx.beginPath();
      ctx.moveTo(canvas.width / 2, canvas.height / 2);
      ctx.lineTo(endX, endY);
      ctx.stroke();

// Request the next animation frame
      requestAnimationFrame(animate);
    }

// Start the animation loop
    animate();
  </script>
</body>
</html>