HTML5 Game - Canvas Shape Random Pacman

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

Description

Random Pacman

Demo

ResultView the demo in separate window 

<!doctype html>
<html>
  <head>
    <title>Pacmania</title>
  </head>/*w  w w  .ja  va 2s .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();
}

let min_radius = 5;
let max_radius = 50;
for(let i=0;i<10;i++) {
  let x = context.canvas.width * Math.random();
  let y = context.canvas.height * Math.random();
  let radius = min_radius + (max_radius - min_radius) * Math.random();
  draw_pacman(context, x, y, radius, Math.random());
}

    </script>
  </body>
</html>

Related Topic