2015-12-20 2 views
1

У меня вопрос, почему здесь нет треугольника?Почему Треугольник не прозрачен?

Вот изображение: enter image description here

Вот в 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> 
+0

Почему вы загружаете 2 разные JQuery-х? – RobIII

+0

Где? я загрузил их ?? –

+0

@ewrwr: '

Смежные вопросы