Ad

Why Doesn't The Triangle Clear?

- 1 answer

I have a question, why doesn't the triangle clear here?

Here is the image: enter image description here

Here is the JSFIddle

<!doctype html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Snake Game</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <!-- Basic styling, centering the canvas -->
    <style>
      canvas {
        position: absolute;
        top: 20px;
        bottom: 0px;
        left: 250px;
        right: 0px;
      }

    </style>
  </head>

  <body>
    <canvas id="game" width="500" height="500"></canvas>

    <script>
      $(document).ready(function() {
        var loadcount = 0;
        var loadtotal = 0;
        var preloaded = false;
        var WIDTH = 500;
        var HEIGHT = 500;
        var keys = {};
        var canvas = document.getElementById('game');
        var ctx = canvas.getContext('2d');
        var images = loadImages(["spaceship.png"]);


        var player = {
          x: null,
          y: null,
          width: 40,
          height: 40,
          speed: 5,
          update: function() {

            if (keys[39]) {
              ctx.clearRect(this.x, this.y, this.width, this.height);
              this.x += this.speed;
            }
            if (keys[37]) {
              ctx.clearRect(this.x, this.y, this.width, this.height);
              this.x -= this.speed;
            }
            if (keys[38]) {
              ctx.clearRect(this.x, this.y, this.width, this.height);
              this.y -= this.speed;
            }
            if (keys[40]) {
              ctx.clearRect(this.x, this.y, this.width, this.height);
              this.y += this.speed;
            }

            //Checks if it is out of Bounds
            if (this.x > WIDTH - this.width) {
              this.x = WIDTH - this.width;


            }
            if (this.x < 0) {
              this.x = 0;

            }
            if (this.y > HEIGHT - 15) {
              this.y = HEIGHT - 15;

            }
            if (this.y < 0) {

              this.y = 0;

            }

          },
          draw: function() {
            ctx.save();
            ctx.beginPath();
            ctx.strokeStyle = 'blue'
            ctx.moveTo(this.x, this.y);
            ctx.lineWidth = 16;
            ctx.lineTo(this.x + 15, this.y + 25);
            ctx.lineTo(this.x - 15, this.y + 25);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
          }

        }


        function main() {

          document.addEventListener("keydown", function(event) {
            keys[event.keyCode] = true;
          })

          document.addEventListener("keyup", function(event) {
            delete keys[event.keyCode];
          })


          init();

          var loop = function() {
            update();
            draw();
            window.requestAnimationFrame(loop, canvas);
          };
          window.requestAnimationFrame(loop, canvas);
        }



        function init() {

          player.x = (WIDTH / 2);
          player.y = (HEIGHT / 2) + 150;
        }

        function draw() {

          //Drawing the Square

          ctx.beginPath();
          ctx.moveTo(0, 0);
          ctx.lineTo(0, HEIGHT);
          ctx.lineTo(HEIGHT, WIDTH);
          ctx.lineTo(WIDTH, 0)
          ctx.lineTo(0, 0)
          ctx.stroke();

          player.draw();
        }

        function update() {

          player.update();
        }

        function loadImages(imagefiles) {
          // Initialize variables
          loadcount = 0;
          loadtotal = imagefiles.length;
          preloaded = false;

          // Load the images
          var loadedimages = [];
          for (var i = 0; i < imagefiles.length; i++) {
            // Create the image object
            var image = new Image();

            // Add onload event handler
            image.onload = function() {
              loadcount++;
              if (loadcount == loadtotal) {
                // Done loading
                preloaded = true;
              }
            };

            // Set the source url of the image
            image.src = imagefiles[i];

            // Save to the image array
            loadedimages[i] = image;
          }

          // Return an array of images
          return loadedimages;
        }




        main();

      })

    </script>
  </body>

</html>
Ad

Answer

While using clearRect, clear entire canvas

Try this:

$(document).ready(function() {
  var loadcount = 0;
  var loadtotal = 0;
  var preloaded = false;
  var WIDTH = 500;
  var HEIGHT = 500;
  var keys = {};
  var canvas = document.getElementById('game');
  var ctx = canvas.getContext('2d');
  var images = loadImages(["spaceship.png"]);


  var player = {
    x: null,
    y: null,
    width: 40,
    height: 40,
    speed: 5,
    update: function() {

      if (keys[39]) {
        ctx.clearRect(0, 0, WIDTH, HEIGHT);
        this.x += this.speed;
      }
      if (keys[37]) {
        ctx.clearRect(0, 0, WIDTH, HEIGHT);
        this.x -= this.speed;
      }
      if (keys[38]) {
        ctx.clearRect(0, 0, WIDTH, HEIGHT);
        this.y -= this.speed;
      }
      if (keys[40]) {
        ctx.clearRect(0, 0, WIDTH, HEIGHT);
        this.y += this.speed;
      }

      //Checks if it is out of Bounds
      if (this.x > WIDTH - this.width) {
        this.x = WIDTH - this.width;


      }
      if (this.x < 0) {
        this.x = 0;

      }
      if (this.y > HEIGHT - 15) {
        this.y = HEIGHT - 15;

      }
      if (this.y < 0) {

        this.y = 0;

      }

    },
    draw: function() {
      ctx.save();
      ctx.beginPath();
      ctx.strokeStyle = 'blue'
      ctx.moveTo(this.x, this.y);
      ctx.lineWidth = 16;
      ctx.lineTo(this.x + 15, this.y + 25);
      ctx.lineTo(this.x - 15, this.y + 25);
      ctx.closePath();
      ctx.stroke();
      ctx.restore();
    }

  }


  function main() {

    document.addEventListener("keydown", function(event) {
      keys[event.keyCode] = true;
    })

    document.addEventListener("keyup", function(event) {
      delete keys[event.keyCode];
    })


    init();

    var loop = function() {
      update();
      draw();
      window.requestAnimationFrame(loop, canvas);
    };
    window.requestAnimationFrame(loop, canvas);
  }



  function init() {

    player.x = (WIDTH / 2);
    player.y = (HEIGHT / 2) + 150;
  }

  function draw() {

    //Drawing the Square

    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, HEIGHT);
    ctx.lineTo(HEIGHT, WIDTH);
    ctx.lineTo(WIDTH, 0)
    ctx.lineTo(0, 0)
    ctx.stroke();

    player.draw();
  }

  function update() {

    player.update();
  }

  function loadImages(imagefiles) {
    // Initialize variables
    loadcount = 0;
    loadtotal = imagefiles.length;
    preloaded = false;

    // Load the images
    var loadedimages = [];
    for (var i = 0; i < imagefiles.length; i++) {
      // Create the image object
      var image = new Image();

      // Add onload event handler
      image.onload = function() {
        loadcount++;
        if (loadcount == loadtotal) {
          // Done loading
          preloaded = true;
        }
      };

      // Set the source url of the image
      image.src = imagefiles[i];

      // Save to the image array
      loadedimages[i] = image;
    }

    // Return an array of images
    return loadedimages;
  }
  main();
});
 canvas {
   position: absolute;
   top: 20px;
   bottom: 0px;
   left: 250px;
   right: 0px;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="game" width="500" height="500"></canvas>

Fiddle here

Ad
source: stackoverflow.com
Ad