如何在另一个页面之前阅读一个 js 页面
[英]How to read a js page before another
问题描述
function animatePlayer() { ctx.clearRect(0, 0, canvas.width, canvas.height) let position = Math.floor(gameFrame/staggerFrame) % spriteAnimation[playerState].loc.length let frameX = spriteWidth * position let frameY = spriteAnimation[playerState].loc[position].y ctx.drawImage(playerImage, frameX, frameY, spriteWidth, spriteHeight, playerPositionX, playerPositionY, 150, 150) gameFrame++ //playerImage.style.zIndex = "1" requestAnimationFrame(animatePlayer) } animatePlayer()
I have three Js pages for my canvas project, I wanted to separate each element because it was getting too messy.
我的 canvas 项目有三个 Js 页面，我想将每个元素分开，因为它变得太乱了。 My "bg.js" is my background so I want it to be at the back of the canvas while my "enemies.js" are my enemies so I want them to appear in front of the page and not hidden behind my background.我的“bg.js”是我的背景，所以我希望它位于 canvas 的背面，而我的“enemies.js”是我的敌人，所以我希望它们出现在页面前面而不是隐藏在我的背景后面。 Please let me know if I need to include more code.如果我需要包含更多代码，请告诉我。
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="Style.css"> <script src="script.js" defer></script> <script src="bg.js" defer></script> <script src="enemies.js" defer></script> <title>Game</title> </head> <body> <canvas id="canvas"></canvas> </body> </html>
function animateBG(){ ctx.clearRect(0, 0, canvas.width, canvas.height) allLayers.forEach(object => { object.update(), object.draw() }) requestAnimationFrame(animateBG) } animateBG()
1 个解决方案
解决方案1
0 2022-08-08 11:27:10
Generally there's no problem with 'outsourcing' your code-base to multiple JavaScript source files.一般来说，将您的代码库“外包”到多个 JavaScript 源文件是没有问题的。 Problems arise if there are - as in your case are two - conflicting actions.如果有 - 如你的情况是两个 - 相互冲突的行动，就会出现问题。
Both animateBG and animatePlayer are drawing to a shared HTML <canvas> element - eg clearing it and drawing something afterwards and again both also have it's own requestAnimationFrame() . animateBG和animatePlayer都在绘制到一个共享的 HTML <canvas>元素 - 例如清除它并在之后绘制一些东西，并且两者都有自己的requestAnimationFrame() 。 Those two actions though are not synchronized to each other.尽管这两个动作彼此不同步。 So it might and it does happen that the background overwrites the player and vice versa.因此，背景可能会而且确实会覆盖播放器，反之亦然。
Get rid of the individual ctx.clearRect(0, 0, canvas.width, canvas.height) and requestAnimationFrame() calls in those functions and just set-up a single function which updates your game's visual.在这些函数中去掉单独的ctx.clearRect(0, 0, canvas.width, canvas.height)和requestAnimationFrame()调用，只需设置一个 ZC1C425268E68385D1AB5074C1 更新你的游戏This could be stored in an additional.js file.这可以存储在附加的.js 文件中。
Something like:就像是：
bg.js bg.js
function animateBG(){
allLayers.forEach(object => {
object.update(),
object.draw()
});
}
enemies.js敌人.js
function animatePlayer() {
let position = Math.floor(gameFrame/staggerFrame) % spriteAnimation[playerState].loc.length
let frameX = spriteWidth * position
let frameY = spriteAnimation[playerState].loc[position].y
ctx.drawImage(playerImage, frameX, frameY, spriteWidth, spriteHeight, playerPositionX, playerPositionY, 150, 150)
gameFrame++
}
newFile.js新文件.js
function update()
{
ctx.clearRect(0, 0, canvas.width, canvas.height);
animateBG();
animatePlayer();
}
requestAnimationFrame(update);
This new update() function first clears the canvas, then draws the background and finally draws the player.这个新的update() function首先清除canvas，然后绘制背景，最后绘制播放器。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.