2D Ragdoll Game

<!DOCTYPE html>
<html>
<head>
<title>2D Ragdoll Game</title>
<style>
body {
  margin: 0;
  overflow: hidden;
  background: #87CEEB;
}
canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}
</style>
</head>
<body>
<canvas id="game"></canvas>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
resize();
window.addEventListener("resize", resize);

// Player
const player = {
  x: 200,
  y: 200,
  vx: 0,
  vy: 0,
  speed: 5,
  jumpPower: -13,
  onGround: false
};

const keys = {};

window.addEventListener("keydown", e => {
  keys[e.key.toLowerCase()] = true;
  if (["ArrowLeft", "ArrowRight", " "].includes(e.key)) {
    e.preventDefault();
  }
});
window.addEventListener("keyup", e => {
  keys[e.key.toLowerCase()] = false;
});

// Draw background and player
function draw() {
  const w = canvas.width;
  const h = canvas.height;
  const groundY = h - 70;

  // Sky
  ctx.fillStyle = "#87CEEB";
  ctx.fillRect(0, 0, w, h);

  // Clouds
  ctx.fillStyle = "white";
  for (let i = 0; i < 5; i++) {
    const x = (i * 240 + 60) % w;
    const y = 70 + (i % 3) * 45;
    ctx.beginPath();
    ctx.arc(x, y, 24, 0, Math.PI * 2);
    ctx.arc(x + 25, y - 10, 30, 0, Math.PI * 2);
    ctx.arc(x + 52, y, 22, 0, Math.PI * 2);
    ctx.fill();
  }

  // Hills
  ctx.fillStyle = "#62B56B";
  ctx.beginPath();
  ctx.moveTo(0, groundY);
  ctx.quadraticCurveTo(w * 0.25, groundY - 170,
                       w * 0.5, groundY);
  ctx.quadraticCurveTo(w * 0.75, groundY - 130,
                       w, groundY);
  ctx.fill();

  // Ground
  ctx.fillStyle = "#397C3C";
  ctx.fillRect(0, groundY, w, h - groundY);

  // Player: simple stickman
  const x = player.x;
  const y = player.y;
  ctx.strokeStyle = "#171717";
  ctx.lineWidth = 5;
  ctx.lineCap = "round";

  // Head
  ctx.beginPath();
  ctx.arc(x, y - 35, 12, 0, Math.PI * 2);
  ctx.stroke();

  // Body
  ctx.beginPath();
  ctx.moveTo(x, y - 23);
  ctx.lineTo(x, y + 15);
  ctx.stroke();

  // Arms
  ctx.beginPath();
  ctx.moveTo(x - 20, y - 10);
  ctx.lineTo(x, y - 18);
  ctx.lineTo(x + 20, y - 10);
  ctx.stroke();

  // Legs
  ctx.beginPath();
  ctx.moveTo(x, y + 15);
  ctx.lineTo(x - 15, y + 38);
  ctx.moveTo(x, y + 15);
  ctx.lineTo(x + 15, y + 38);
  ctx.stroke();

  // Controls hint
  ctx.fillStyle = "#17243A";
  ctx.font = "16px Arial";
  ctx.fillText("A/D or arrows: Move | Space: Jump", 20, 30);
}

function update() {
  const groundY = canvas.height - 70;

  // Movement
  player.vx = 0;
  if (keys["a"] || keys["arrowleft"]) {
    player.vx = -player.speed;
  }
  if (keys["d"] || keys["arrowright"]) {
    player.vx = player.speed;
  }

  // Jump
  if ((keys[" "] || keys["w"] || keys["arrowup"])
      && player.onGround) {
    player.vy = player.jumpPower;
    player.onGround = false;
  }

  // Gravity
  player.vy += 0.6;
  player.x += player.vx;
  player.y += player.vy;

  // Stay inside screen
  player.x = Math.max(25,
    Math.min(canvas.width - 25, player.x));

  // Land on ground
  if (player.y + 38 >= groundY) {
    player.y = groundY - 38;
    player.vy = 0;
    player.onGround = true;
  }
}

function loop() {
  update();
  draw();
  requestAnimationFrame(loop);
}

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