HTML5 Game - Pacman in function

  1. HOME
  2. HTML5 Game
  3. Canvas Shape
  4. Pacman

Description

Pacman in function

Demo

ResultView the demo in separate window 

<!doctype html>
<html>
  <head>
    <title>Pacmania</title>
  </head>//from  www. j  av a2  s  .  c  o m
  <body>
    <h1>Pac-man</h1>
    <canvas id="pacmania" width="400" height="400"></canvas>
    <script>
      let context = document.getElementById("pacmania").getContext("2d");
function draw_pacman(ctx, x, y, r, m) {
  angle = 0.2 * Math.PI * m;
  ctx.save();
  ctx.fillStyle = "yellow";
  ctx.strokeStyle = "black";
  ctx.lineWidth = 0.5;
  ctx.beginPath();
  ctx.arc(x, y, r, angle, -angle);
  ctx.lineTo(x, y);
  ctx.closePath()
  ctx.fill();
  ctx.stroke();
  ctx.restore();
}

      draw_pacman(context, 200, 200, 150, Math.random());
    </script>
  </body>
</html>

Related Topic