HTML5 Game - Linear horizontal move

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Linear Motion

Description

Linear horizontal move

Demo

ResultView the demo in separate window 

<!doctype html>
<html>
  <head>
    <title>Animation</title>
  </head>// www.  ja  v  a 2 s  .co  m
  <body>
    <h1>Animation</h1>
    <canvas id="asteroids" width="300" height="300"></canvas>
    <script>
      let context = document.getElementById("asteroids").getContext("2d");
      context.strokeStyle = "white";
      context.lineWidth = 1.5;
      let x = 0, y = context.canvas.height / 2;

      function frame() {
        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
        draw(context);
        update();
      }

      function update() {
        x += 1;
      }

      function draw(ctx) {
        ctx.beginPath();
        ctx.arc(x, y, 40, 0, 2 * Math.PI);
        ctx.fill();
        ctx.stroke();
      }

      setInterval(frame, 1000.0/60.0); // 60 fps
    </script>
  </body>
</html>

Related Topic