javascript - 我怎样才能让我在 Canvas 中的两个图像不会相互擦除?
问题描述
我正在尝试使用 Html 和 JS 在 Canvas 中设置小游戏。我遇到了一个问题,但我不明白我错过了什么。
我在画布上绘制了两张精灵表,但是当它们彼此靠近时,我的drawloop底部的一张会擦除另一张。
我导入我的 srpites,绘制它们并为其设置动画,并使用 setTimeout 在 drawloop 中调用所有内容以降低动画的速度
function drawArthur() {
updateFrame();
animations();
resetAnimations();
context.drawImage(arthurImage, arthur.srcX, arthur.srcY, arthur.width, arthur.height, arthur.x, arthur.y, arthur.width, arthur.height);
arthurImage.style.zIndex = '1';
}
function updateFrame() {
arthur.currentFrame = ++arthur.currentFrame % arthur.colums;
arthur.srcX = arthur.currentFrame * arthur.width;
arthur.srcY = 0;
context.clearRect(arthur.x, arthur.y, arthur.width, arthur.height);
// if (myModule.newZombie.isCrashed) {
// arthur.die = true;
// console.log(arthur.die);
// }
}
function animations() {
arthur.srcX = arthur.currentFrame * arthur.width;
if (arthur.goRight) {
arthur.srcY = arthur.goRowRight * arthur.height;
} else if (arthur.goLeft) {
arthur.srcY = arthur.goRowLeft * arthur.height;
} else if (arthur.duckRight) {
arthur.srcY = arthur.duckRowRight * arthur.height;
} else if (arthur.atkRight) {
arthur.srcY = arthur.atkRowRight * arthur.height;
if (zombie.x < 274 && zombie.x > 262) {
console.log('killllll');
zombie.dieRight = true;
} else if (zombie.x < 262) {
zombie.dieRight = false;
zombie.x = -50;
} else if (arthur.jumpRight) {
arthur.srcY = arthur.jumpRowRight * arthur.height;
}
}
}
// function that reset all states every time in the draw loop to set the states at the origin state
function resetAnimations() {
arthur.stand = arthur.right;
arthur.goLeft = false;
arthur.goRight = false;
arthur.duckRight = false;
arthur.atkRight = false;
arthur.jumpRight = false;
}
function drawLoop() {
setTimeout(function () {
context.clearRect(0, 0, theCanvas.width, theCanvas.height);
drawArthur();
drawZombie();
requestAnimationFrame(function () {
drawLoop();
});
}, 150);
createNewZombie();
console.log(allZombies);
}
我不能管理两个得到我的两个角色,只是相互重叠。拉环中的最后一个,这里是僵尸,当他经过亚瑟时会抹去他。
谢谢 !
解决方案
假设您的drawZombie
方法也调用了类似的updateFrame()
方法,并且它也有一行context.clearRect(arthur.x, arthur.y, arthur.width, arthur.height);
发生的事情是你
1) 清除亚瑟身后的区域
2)画亚瑟
3) 清除僵尸背后的区域,即使亚瑟在僵尸后面
4) 画僵尸
因为您正在清除整个画布,drawLoop
所以context.clearRect(0, 0, theCanvas.width, theCanvas.height);
不需要执行 (1) 和 (3)。
context.clearRect(...)
从方法中删除updateFrame
。
或者
如果您确实想要这些额外内容clearRect(...)
,请确保它们都发生在您绘制亚瑟和僵尸之前
希望这可以帮助
推荐阅读
- java - Swing:窗口最小化后图形消失
- android - 在使用 kotlin 的非活动类中使用 Toast.makeToast 时出错
- node.js - Docker + Node.JS + Socket.IO + Nginx (405 & 错误的握手方法)
- oracle11g - 从 oracle 11g 升级到 12c
- django - Django模型选择玩家玩
- laravel - Laravel Passport - 使用未经身份验证的 javascript 401 使用您自己的 api
- azure-devops - 使用 git flow 和 azure 管道设置拉取请求
- mysql - 查询不会在 WITH 子句上执行?
- python - 输入第三个字母后,如何解决额外输出行的问题?我不能在程序中使用 while 循环或范围
- javascript - 如何继续调用 useEffect 方法以做出反应,直到某个条件?