V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
zxCoder
V2EX  ›  问与答

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

  •  
  •   zxCoder · 2021-08-06 14:32:56 +08:00 · 1308 次点击
    这是一个创建于 1216 天前的主题,其中的信息可能已经有所发展或是发生改变。

    例如这个 h5 游戏 https://h5mota.com/games/24/

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

    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,
                };
            }
    
    第 1 条附言  ·  2021-08-06 22:18:07 +08:00

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

    yushiro
        1
    yushiro  
       2021-08-06 14:50:28 +08:00 via iPhone
    不要写死 50ms 重绘一次,浏览器有提供原生的动画重绘方法,只有老旧浏览器不支持,才需要用定时器重绘。
    zxCoder
        2
    zxCoder  
    OP
       2021-08-06 15:21:24 +08:00
    @yushiro requestAnimationFrame 吗?不知道怎么控制灵敏度,按键一次跑了好长一段距离。。。
    yushiro
        3
    yushiro  
       2021-08-06 16:58:13 +08:00
    首先, 你不能假设每秒 redraw 运行多少次, 因为不同设备 fps 会不一样, 你现在 redraw 里面每次++, 老旧设备就会移动的慢, 新机器就跑的快。
    VDimos
        4
    VDimos  
       2021-08-06 18:58:14 +08:00 via Android
    运动速度要和时间相关才能感觉流畅
    Exuanbo
        5
    Exuanbo  
       2021-08-06 19:40:48 +08:00
    可以参考一下我之前写的基于时间的 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
        6
    3dwelcome  
       2021-08-06 21:38:54 +08:00 via Android
    这游戏真好玩,汗😓
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4954 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 03:58 · PVG 11:58 · LAX 19:58 · JFK 22:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.