请问 canvas 画人物移动要怎么写才能让人物走得比较丝滑

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

This topic created in 1735 days ago, the information mentioned may be changed or developed.

我自己参考了网上的一些写法，写出来走得要不就特别卡，要不就特别灵敏

let fx={
            left:false,
            right:false,
            up:false,
            down:false,
        };
        draw(index, dir, x, y);
        let timer=setInterval(()=>{
            if(fx.down){
                    y++;
            }else if(fx.left){
                    x--; 
            }else if(fx.right){
                    x++;  
            }else if(fx.up){
                    y--;   
            }
            draw(index, dir, x, y);
        },50);
        document.onkeydown = (e) => {
            let key = e.key;
            if (key === "ArrowDown") {
                dir = 0;
                index++;
                fx.down=true;
            } else if (key === "ArrowLeft") {
                dir = 1;
                index++;
                fx.left=true;
            } else if (key === "ArrowRight") {
                dir = 2;
                index++;
                fx.right=true;
            } else if (key === "ArrowUp") {
                dir = 3;
                index++;
                fx.up=true;
            }
            if (index >= 3) {
                index = 0;
            }
        }

        document.onkeyup=(e)=>{
            fx={
                left:false,
                right:false,
                up:false,
                down:false,
            };
        }

Supplement 1 · Aug 6, 2021

是那种走单元格的那种，，，

6 replies

yushiro

Aug 6, 2021 via iPhone

不要写死 50ms 重绘一次，浏览器有提供原生的动画重绘方法，只有老旧浏览器不支持，才需要用定时器重绘。

zxCoder

Aug 6, 2021

@yushiro requestAnimationFrame 吗？不知道怎么控制灵敏度，按键一次跑了好长一段距离。。。

yushiro

Aug 6, 2021

首先，你不能假设每秒 redraw 运行多少次，因为不同设备 fps 会不一样，你现在 redraw 里面每次++，老旧设备就会移动的慢，新机器就跑的快。

VDimos

Aug 6, 2021 via Android

运动速度要和时间相关才能感觉流畅

Exuanbo

Aug 6, 2021

可以参考一下我之前写的基于时间的 render

https://github.com/exuanbo/dungeon-trine/blob/main/src/engine/gameRenderer.js#L39

```
render(game) {
this.animationFrameRequestId = window.requestAnimationFrame(() =>
this.render(game)
)

let delta = performance.now() - this.lastUpdateTime

if (delta < this.timeStep) {
return
}

while (delta > 0) {
game.update()
delta -= this.timeStep
}

this.lastUpdateTime = performance.now()
game.render()
}
```

3dwelcome

Aug 6, 2021 via Android

这游戏真好玩，汗😓