HTML5畫布不會將我的圖像繪製到屏幕上（無錯誤）

Question

我正在製作一個發生在足球場上的遊戲，您可以作爲足球運動員移動。該字段將繪製，但玩家不會畫在屏幕上，我不知道爲什麼，也不會在控制檯中返回錯誤。也許這與命名空間有關？

代碼是在這裏：http://pastebin.com/uUm8w265，

var canvas = document.getElementById("cvs"), 
    context = canvas.getContext("2d"), 
    GAME = GAME || {}, 
    fps = 10, 
    drawInterval, 
    playersImg = new Image(), 
    keysDown = {}; 

playersImg.src = "source/img/players.png"; 

canvas.width = 800, 
canvas.height = 400; 

// Disable blurring when images get resized 
context.webkitImageSmoothingEnabled = false; 
context.mozImageSmoothingEnabled = false; 
context.imageSmoothingEnabled = false; 

// The game namespace 
GAME = { 
    gen: { 
     x: canvas.width, 
     y: canvas.height 
    }, 
    player: { 
     x: canvas.width /2, 
     y: canvas.height /2, 
     X: 13 
    }, 
    players: { 
     messi: [75, 25], 
     ronaldo: [50, 50], 
     balotelli: [25, 75] 
    }, 
    team1: { 
     goals: 0 
    }, 
    team2: { 
     goals: 0 
    }, 
    func: { 
     // Draws the soccer field 
     drawField: function (x, y) { 
      // Drawing grass 
      context.beginPath(); 
      context.rect(0, 0, x, y); 
      context.fillStyle = "#526F35"; 
      context.fill(); 
      context.closePath(); 

      // Drawing middle white circles 
      context.beginPath(); 
      context.arc(x/2, y/2, 50, 0, 2 * Math.PI, false); 
      context.moveTo(x/2, y/2); 
      context.arc(x/2, y/2, 5, 0, 2 * Math.PI, false); 

      // Drawing all the white lines 
      context.moveTo(800, 100); 
      context.lineTo(725, 100); 
      context.lineTo(725, 300); 
      context.lineTo(800, 300); 
      context.moveTo(0, 100); 
      context.lineTo(75, 100); 
      context.lineTo(75, 300); 
      context.lineTo(0, 300); 
      context.moveTo(x/2, 0); 
      context.lineTo(x/2, y); 

      // How all the lines and circles are styled 
      context.lineWidth = 5; 
      context.strokeStyle = "#ffffff"; 
      context.stroke(); 
      context.closePath(); 
     }, 
     drawPlayer: function (x, y, posX, posY) { 
      context.drawImage(playersImg, x, y, 6, 8, posX, posY, 24, 32); 
     }, 
     checkInput: function (e) { 
      if (keysDown[e] === 65) { 
       GAME.player.x = GAME.player.x - GAME.players.messi[0]; 
       game.player.X = 7; 
       console.log("left"); 
      } else if (keysDown[e] === 68) { 
       GAME.player.x = GAME.player.x + GAME.players.messi[0]; 
       game.player.X = 0; 
       console.log("right"); 
      } else if (keysDown[e] === 83) { 
       GAME.player.y = GAME.player.y + GAME.players.messi[0]; 
       console.log("down"); 
      } else if (keysDown[e] === 87) { 
       GAME.player.y = GAME.player.y - GAME.players.messi[0]; 
       console.log("up"); 
      } else { 
       GAME.player.X = 13; 
       console.log(); 
      } 
     }, 
     startDraw: function() { 
      GAME.func.stopDraw(); 
      drawInterval = setInterval(GAME.func.draw, fps); 
     }, 
     stopDraw: function() { 
      clearInterval(drawInterval); 
     }, 
     draw: function() { 
      context.clearRect(0,0, GAME.gen.x, GAME.gen.y); 
      GAME.func.drawField(GAME.gen.x, GAME.gen.y); 
      GAME.func.drawPlayer(GAME.player.X, GAME.player.x, GAME.player.y); 
     } 
    } 
}; 

addEventListener("keydown", function (e) { 
    keysDown[e.keyCode] = true; 
    GAME.func.checkInput(e); 
}, false); 

addEventListener("keyup", function (e) { 
    delete keysDown[e.keyCode]; 
}, false); 

如果它的事項我的win7 64位，和鉻。

Answer 1

您對drawPlayer的調用看起來不正確，參數計數錯誤。

GAME.func.drawPlayer(GAME.player.X, GAME.player.x, GAME.player.y) 

VS

drawPlayer: function (x, y, posX, posY)