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

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

No:32214

←

Prev Next

→

三重振り子を自由に動かす
Developer うにょUser14145｜Date and time 23/12/30 15:18:49
Build time 23.904 sec｜Game capacity 3.601KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>三重振り子</title>
  <style>
    #canvas {
      width: 100%;
      height: 100%;
      touch-action: none;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

const width = canvas.width = window.innerWidth;
    const height = canvas.height = window.innerHeight;

let p1 = {
      x: width / 2,
      y: height / 2 - 100,
      angle: 0,
      length: 200,
      radius: 20,
      angularVelocity: 0,
      damping: 0.995
    };

let p2 = {
      x: p1.x,
      y: p1.y + p1.length,
      angle: 0,
      length: 150,
      radius: 15,
      angularVelocity: 0,
      damping: 0.995
    };

let p3 = {
      x: p2.x,
      y: p2.y + p2.length,
      angle: 0,
      length: 100,
      radius: 10,
      angularVelocity: 0,
      damping: 0.995
    };

function updatePositions() {
      p1.angle += p1.angularVelocity;
      p1.angularVelocity *= p1.damping;

p2.angle += p2.angularVelocity;
      p2.angularVelocity *= p2.damping;

p3.angle += p3.angularVelocity;
      p3.angularVelocity *= p3.damping;

p2.x = p1.x + Math.sin(p1.angle) * p1.length;
      p2.y = p1.y + Math.cos(p1.angle) * p1.length;

p3.x = p2.x + Math.sin(p2.angle) * p2.length;
      p3.y = p2.y + Math.cos(p2.angle) * p2.length;

requestAnimationFrame(draw);
    }

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

ctx.beginPath();
      ctx.arc(p1.x, p1.y, p1.radius, 0, 2 * Math.PI);
      ctx.fillStyle = "yellow";
      ctx.fill();

ctx.beginPath();
      ctx.arc(p2.x, p2.y, p2.radius, 0, 2 * Math.PI);
      ctx.fillStyle = "orange";
      ctx.fill();

ctx.beginPath();
      ctx.arc(p3.x, p3.y, p3.radius, 0, 2 * Math.PI);
      ctx.fillStyle = "red";
      ctx.fill();

ctx.beginPath();
      ctx.moveTo(p1.x, p1.y);
      ctx.lineTo(p2.x, p2.y);
      ctx.lineTo(p3.x, p3.y);
      ctx.strokeStyle = "black";
      ctx.lineWidth = 5;
      ctx.stroke();

updatePositions();
    }

draw();

canvas.addEventListener("touchstart", function(e) {
      if (e.touches.length === 1) {
        const touchX = e.touches[0].pageX;
        const touchY = e.touches[0].pageY;

p1.x = touchX;
        p1.y = touchY - p1.length;

p2.x = p1.x + Math.sin(p1.angle) * p1.length;
        p2.y = p1.y + Math.cos(p1.angle) * p1.length;

p3.x = p2.x + Math.sin(p2.angle) * p2.length;
        p3.y = p2.y + Math.cos(p2.angle) * p2.length;

p1.angularVelocity = 0;
        p2.angularVelocity = 0;
        p3.angularVelocity = 0;
      }
    });

canvas.addEventListener("touchmove", function(e) {
      e.preventDefault();

if (e.touches.length === 1) {
        const touchX = e.touches[0].pageX;
        const touchY = e.touches[0].pageY;

const dx = p1.x - touchX;
        const dy = p1.y - (touchY - p1.length);
        const distance = Math.sqrt(dx * dx + dy * dy);
        const angle = Math.atan2(dy, dx);

p1.x = touchX;
        p1.y = touchY - p1.length;

p2.x = p1.x + Math.sin(p1.angle) * p1.length;
        p2.y = p1.y + Math.cos(p1.angle) * p1.length;

p3.x = p2.x + Math.sin(p2.angle) * p2.length;
        p3.y = p2.y + Math.cos(p2.angle) * p2.length;

p1.angularVelocity = (p1.angle - angle) * 0.1;
        p2.angularVelocity = (p2.angle - angle) * 0.1;
        p3.angularVelocity = (p3.angle - angle) * 0.1;
      }
    });
  </script>
</body>
</html>