[英]HTML5 Canvas drawImage() inside object literal
I'm trying to make a snake game with HTML5 using the object literal pattern, but I can't seem to draw an image on the canvas. 我正在尝试使用对象文字模式使用HTML5制作蛇类游戏,但似乎无法在画布上绘制图像。 I've researched a lot and found for instance that I can't set the image
src
while the object is being created (so I've put that in a function). 我进行了很多研究,例如发现在创建对象时无法设置图像
src
(因此已将其放入函数中)。 The image seems to be available as it shows up in the console and can be appended to the body. 该图像似乎可以在控制台中显示出来,并且可以附加到主体上。 What am I missing please?
我想念什么?
(function ($) { $.fn.preload = function() { // http://stackoverflow.com/a/476681 this.each(function(){ $('<img/>')[0].src = this; }); } })(jQuery); $(document).ready(function() { $(['./images/grass-500x500.png']).preload(); // I've tried with and without this function (defined elsewhere) // Object literal pattern var game = { // Background image background: new Image(), setBGSource: function() { this.background.src = 'images/grass-500x500.png'; }, // Canvas details canvas: $("#canvas")[0], ctx: canvas.getContext("2d"), WIDTH: $("#canvas").width(), HEIGHT: $("#canvas").height(), // Game details CELL_WIDTH: 10, direction: null, food: null, score: null, snakeArray: [], init: function() { this.direction = "right"; this.createSnake(); this.setBGSource(); this.draw(); }, createSnake: function() { var length = 5; // Initial length of snake for (var i = length - 1; i >= 0; i--) { this.snakeArray.push({ x: i, y: 1 // y : 0 - initial position of snake in cell units }); } }, // Create food item createFood: function() { this.food = { x: Math.round(Math.random() * (WIDTH - CELL_WIDTH) / CELL_WIDTH), y: Math.round(Math.random() * (HEIGHT - CELL_WIDTH) / CELL_WIDTH) } // Position of food with x and and y between 0 and eg 44 }, // Drawing function draw: function() { // Repaint the background on each frame console.log(this.background); // displays <img src="images/grass-500x500.png"> this.ctx.drawImage(this.background, 0, 0); // WHY DOESN'T THIS WORK PLEASE? $('body').append(this.background); // appends image, no problem } }; game.init(); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="canvas"></canvas>
The problem here is that the image is being preloaded asynchronously while at the same time you call game.init()
and thus game.draw()
, which expects the image being loaded already. 这里的问题是图像是异步预加载的,而同时您调用
game.init()
并因此game.draw()
,它期望图像已被加载。
Thus, unless the image is in your browser's cache, the asynchronous preloading might not have finished at the time of game.draw()
. 因此,除非图像位于浏览器的缓存中,否则在
game.draw()
时异步预加载可能尚未完成。
You need to wait until preloading has finished before calling game.init()
. 您需要等到预加载完成后才能调用
game.init()
。 JavaScript offers some good tools in dealing with asynchronous execution, eg callbacks, promises etc. JavaScript提供了一些处理异步执行的好工具,例如回调,promise等。
Have a look here: https://gamedev.stackexchange.com/questions/24102/resource-loader-for-an-html5-and-javascript-game 在这里看看: https : //gamedev.stackexchange.com/questions/24102/resource-loader-for-an-html5-and-javascript-game
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.