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

canvas 2048 移动方块函数的原理是怎样的?

  •  
  •   geekape · 2018-04-06 12:05:00 +08:00 · 934 次点击
    这是一个创建于 2225 天前的主题,其中的信息可能已经有所发展或是发生改变。

    看了一个 canvas2048 的源码,就移动方块函数这块特别的难懂,也可能是自己基础太差,有大神可帮忙解析下吗?

    贴上移动方格相关的代码:

    var keycom = { '38': [0, -1], '40': [0, 1], '37': [-1, 0], '39': [1, 0] }
    
    var game = {
        move: function(dir) {
            //用来调整不同方向的遍历方式
            // -1 0
            function modify(x, y) {
                tx = x, ty = y;
                if (dir[0] == 0) tx = [ty, ty = tx][0];
                if (dir[1] > 0) tx = 3 - tx;
                if (dir[0] > 0) ty = 3 - ty;
                return [tx, ty];
            }
            //根据移动的方向,将地图中对应行 /列中的数字一个个压入栈中,如果第一次遇到栈顶数字和待入栈数字相等,则栈顶数字乘 2,最后用栈中数字更新地图中的对应行 /列
            for (var i = 0; i < 4; i++) {
                var tmp = Array();
                var isadd = false;
                for (var j = 0; j < 4; j++) {
                    var ti = modify(i, j)[0],
                        tj = modify(i, j)[1];
                    if (map[ti][tj] != 0) {
                        if (!isadd && map[ti][tj] == tmp[tmp.length - 1]){
                            score += (tmp[tmp.length - 1] *= 2);
                            isadd = true;
                            space += 1;
                        }
                        else{
                            tmp.push(map[ti][tj]);
                        } 
                    }
                }
                for (var j = 0; j < 4; j++) {
                    var ti = modify(i, j)[0],
                        tj = modify(i, j)[1];
                    map[ti][tj] = isNaN(tmp[j]) ? 0 : tmp[j];
                }
            }
            draw.produce();  //随机产生一个方块
            if (space == 0) {
                alert("game over");
            }
            draw.block(); 
    
        }
    
    }
    
    // 事件监听
    document.onkeydown = function(e) {
        dir = keycom[(e ? e : event).keyCode];
        game.move(dir);
        console.log(dir);
    };
    
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4892 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 10:02 · PVG 18:02 · LAX 03:02 · JFK 06:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.