Un personaje moviendo todas sus extremidades's game

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

No:34471

←

Prev Next

→

Un personaje moviendo todas sus extremidades
Developer User16196｜Date and time 24/1/10 15:49:56
Build time 13.123 sec｜Game capacity 2.685KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Mi Juego de Personaje Moviendo sus Extremidades</title>
  <style>
    body {
      background-color: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

#canvas {
      background-color: white;
      border: 1px solid black;
    } Mmm
  </style>
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>

// Coordenadas iniciales del personaje
    let x = canvas.width / 2;
    let y = canvas.height / 2;
 Lol
    // Tamaño de las extremidades
    const armLength = canvas.width * 0.2;
    const legLength = canvas.width * 0.3;

// Ángulos iniciales de las extremidades
    let rightArmAngle = -Math.PI / 4; // 45 grados en sentido antihorario
    let leftArmAngle = Math.PI / 4; // 45 grados en sentido horario
    let rightLegAngle = -Math.PI / 4; // 45 grados en sentido antihorario
    let leftLegAngle = Math.PI / 4; // 45 grados en sentido horario

// Dibujar el personaje
    function drawCharacter() {
      context.clearRect(0, 0, canvas.width, canvas.height);

// Cabeza
      context.beginPath();
      context.arc(x, y, 50, 0, 2 * Math.PI);
      context.fillStyle = 'Yellow';
      context.fill();
      context.closePath();

// Brazos
      context.beginPath();
      context.moveTo(x, y);
      context.lineTo(x + Math.cos(rightArmAngle) * armLength, y - Math.sin(rightArmAngle) * armLength);
      context.moveTo(x, y);
      context.lineTo(x + Math.cos(leftArmAngle) * armLength, y - Math.sin(leftArmAngle) * armLength);
      context.strokeStyle = 'black';
      context.lineWidth = 10;
      context.stroke();

// Piernas
      context.beginPath();
      context.moveTo(x, y + 50);
      context.lineTo(x + Math.cos(rightLegAngle) * legLength, y + 50 + Math.sin(rightLegAngle) * legLength);
      context.moveTo(x, y + 50);
      context.lineTo(x + Math.cos(leftLegAngle) * legLength, y + 50 + Math.sin(leftLegAngle) * legLength);
      context.strokeStyle = 'black';
      context.lineWidth = 10;
      context.stroke();
    }

// Actualizar las posiciones de las extremidades
    function updateCharacterPosition() {
      rightArmAngle += 0.05;
      leftArmAngle -= 0.05;
      rightLegAngle -= 0.05;
      leftLegAngle += 0.05;

drawCharacter();
    }

setInterval(updateCharacterPosition, 100); // Actualizar cada 100 milisegundos
  </script>
</body>
</html>