站立物体的运动效应
站立物体的运动效应
提问于 2021-03-16 18:54:50
我已经尝试实现了运动效果的站立对象。
例如，我假设我的对象将能够向右或向左。
我想让错觉就像那个物体还在移动。即使目前没有移动。(与此同时，背景仍可移动。)
'use strict';
const pressedKeys = [];
const canvas = document.querySelector('#game');
const ctx = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 150;
class Player
{
xPosition = 150;
yPosition = 50;
speed = 5;
isMoving = false;
update(pressedKeys)
{
if (pressedKeys['ArrowLeft']) {
this.xPosition -= this.speed;
} else if (pressedKeys['ArrowRight']) {
this.xPosition += this.speed;
}
}
draw(ctx)
{
ctx.fillStyle = '#2976f2';
ctx.fillRect(this.xPosition, this.yPosition, 30, 30);
}
}
const player = new Player();
function animate()
{
window.requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height)
if (player.isMoving) {
player.update(pressedKeys);
}
player.draw(ctx);
}
animate();
window.addEventListener('keyup', function (event) {
delete pressedKeys[event.key];
player.isMoving = false;
})
window.addEventListener('keydown', function (event) {
switch (event.key) {
case 'ArrowLeft':
case 'ArrowRight':
pressedKeys[event.key] = true;
player.isMoving = true;
break;
}
})canvas {
border: 1px solid blue;
}<canvas id="game"></canvas>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-16 19:42:29
通常这种效果是通过不断复制所需的对象来实现的，将其移动到完全相同的屏幕位置，并最终随着时间的推移而消失，例如在一秒钟内。
在你的情况下，虽然我们可以简化一些事情，因为你想保持“运动模糊”的外观，即使它没有移动。
因此，首先，我们需要为您的播放器类oldX的另一个属性。在运动发生之前，它保持物体的位置。通过从x中减去oldX，我们可以确定对象是向左移动还是向右移动-因此我们知道在哪里放置拖尾重复。
如果我们知道方向，就可以开始使用简单的for循环创建重复项，如：
for (var a = 0; a < 7; a++) {
ctx.fillRect(this.x - (this.x - this.oldX) / this.speed * a * 2, this.y, 30, 30);
}这将创建七个相等的外观方块-所以它看起来不太好。副本旁边的原应该有几乎相同的颜色，而最后一个应该几乎与背景混合。为此，我们可以使用画布上下文的globalAlpha属性。值1是不透明的，而0是完全透明的。
把这一切结合在一起：
const keys = [];
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 150;
class Player {
x = 150;
y = 50;
oldX = 150;
speed = 5;
moving = false;
update(keys) {
this.oldX = this.x;
if (keys['ArrowLeft']) {
this.x -= this.speed;
} else if (keys['ArrowRight']) {
this.x += this.speed;
}
}
draw(ctx) {
ctx.fillStyle = '#2976f2';
ctx.fillRect(this.x, this.y, 30, 30);
ctx.save();
for (var a = 0; a < 7; a++) {
ctx.globalAlpha = 0.5 - (a / 7) * 0.5;
ctx.fillRect(this.x - (this.x - this.oldX) / this.speed * a * 2, this.y, 30, 30);
}
ctx.restore();
}
}
const player = new Player();
function animate() {
window.requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height)
if (player.moving) {
player.update(keys);
}
player.draw(ctx);
}
animate();
window.addEventListener('keyup', function(event) {
delete keys[event.key]
player.moving = false;
})
window.addEventListener('keydown', function(event) {
switch (event.key) {
case 'ArrowLeft':
case 'ArrowRight':
keys[event.key] = true;
player.moving = true;
break;
}
})canvas {
border: 1px solid blue;
}<canvas id="game"></canvas>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66661663
复制相关文章
相似问题
腾讯云开发者
