进入 JS 游戏开发,但遇到了一个小问题。图像不会绘制。它加载正常,控制台中没有错误,但它不会显示。我错过了什么?
JS
var Game = {
characterSpeed: 2,
characterHorizontalSpeed: this.characterSpeed,
characterVerticalSpeed: this.characterSpeed,
characterX: 400,
characterY: 500,
mouseX: 0,
mouseY: 0,
gameRunning: false,
debug: true,
characterImg: '',
context: '',
init: function() {
$('#game').mousemove(function(event) {
Game.mouseX = event.pageX;
Game.mouseY = event.pageY;
});
Game.context = document.getElementById('game').getContext('2d');
Game.loadImages();
Game.game();
},
loadImages: function() {
Game.characterImg = new Image;
Game.characterImg.src = 'images/character.png';
Game.characterImg.onload = function() {
Game.context.drawImage(Game.characterImg, 400, 500);
}
},
}
$(function() {
Game.init();
});
HTML
<div id="inner">
<canvas id="game" style="background: white; width: 800px; height: 500px;"></canvas>
</div>