我正在编写一个简单的游戏来学习 JS，并且在此过程中我正在学习 HTML5，所以我需要在画布上绘制东西。
这是代码：
let paddle = new Paddle(GAME_WIDTH,GAME_HEIGHT);
new InputHandler(paddle);
let lastTime = 0;
const ball = new Image();
ball.src = 'assets/ball.png';
function gameLoop(timeStamp){
let dt = timeStamp - lastTime;
lastTime = timeStamp;
ctx.clearRect(0,0,600,600);
paddle.update(dt);
paddle.draw(ctx);
ball.onload = () => {
ctx.drawImage(ball,20,20);
}
window.requestAnimationFrame(gameLoop);
}
gameLoop();
截图：无球评论前
现在我注释掉了clearRect():
评论后
你好球。
画布底部还有一个桨，似乎不受clearRect()方法。它工作得很好。我在这里缺少什么？
放置图像没有多大意义onload游戏循环内的处理程序。这意味着游戏必须在图像之前开始运行onload设置了函数，导致了一个相当混乱的情况。
正确的顺序是设置onload处理程序，然后是图像源，然后await所有图像onloads 在运行游戏循环之前触发。将主循环设置为onload当您只有一张图像时，直接使用非常容易，但对于具有多个资产的游戏，这很快就会变得尴尬。
以下是如何使用加载许多游戏资源的最小示例Promise.all。很可能，您希望将加载的图像解压缩为更具描述性的对象而不是数组，但这只是一个开始。
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.width = 400;
canvas.height = 250;
const ctx = canvas.getContext("2d");
const assets = [
"http://placekitten.com/120/100",
"http://placekitten.com/120/120",
"http://placekitten.com/120/140",
];
const assetsLoaded = assets.map(url =>
new Promise(resolve => {
const img = new Image();
img.onerror = e => reject(`${url} failed to load`);
img.onload = e => resolve(img);
img.src = url;
})
);
Promise
.all(assetsLoaded)
.then(images => {
(function gameLoop() {
requestAnimationFrame(gameLoop);
ctx.clearRect(0, 0, canvas.width, canvas.height);
images.forEach((e, i) =>
ctx.drawImage(
e,
i * 120, // x
Math.sin(Date.now() * 0.005) * 20 + 40 // y
)
);
})();
})
.catch(err => console.error(err))
;
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
