Create a stickman that you can interact with's game

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

No:51324

157

←

Prev Next

→

Create a stickman that you can interact with
Developer User21502｜Date and time 24/3/11 18:08:02
Build time 8.536 sec｜Game capacity 1.328KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Stickman Game</title>
<style>
canvas {
  border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>

let stickmanX = 200;
let stickmanY = 200;

function drawStickman() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  ctx.beginPath();
  ctx.arc(stickmanX, stickmanY, 20, 0, Math.PI * 2, true); // Head
  ctx.moveTo(stickmanX, stickmanY + 20);
  ctx.lineTo(stickmanX, stickmanY + 60); // Body
  ctx.moveTo(stickmanX, stickmanY + 30);
  ctx.lineTo(stickmanX + 20, stickmanY + 40); // Right Arm
  ctx.moveTo(stickmanX, stickmanY + 30);
  ctx.lineTo(stickmanX - 20, stickmanY + 40); // Left Arm
  ctx.moveTo(stickmanX, stickmanY + 60);
  ctx.lineTo(stickmanX + 10, stickmanY + 100); // Right Leg
  ctx.moveTo(stickmanX, stickmanY + 60);
  ctx.lineTo(stickmanX - 10, stickmanY + 100); // Left Leg
  ctx.stroke();
}

function moveStickman(event) {
  const rect = canvas.getBoundingClientRect();
  const mouseX = event.clientX - rect.left;
  const mouseY = event.clientY - rect.top;
  
  stickmanX = mouseX;
  stickmanY = mouseY;
  drawStickman();
}

canvas.addEventListener('mousemove', moveStickman);

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