Question

我有一个问题，为什么三角形在这里不清楚？

这是图片：

<!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>

为什么三角形没有清晰？

0 个答案: