Question

我一直在为uni工作，虽然我熟悉HTML和CSS，但我对js的了解非常模糊。

我正在尝试制作某种类型的画廊，您可以使用键盘箭头浏览有时在4个方向中分支的图像，将其视为“选择自己的冒险”一书，但我有点卡住了。

与this类似，其中每个框架都覆盖整个屏幕，您可以像第一个答案here一样浏览它：但只要在那里有另一个框架就可以在任何方向上进行导航。

Answer 1

请参阅下面的评论和链接！

这是一个丑陋但有效的解决方案，如果你是新手，它可以帮助你学习：

var coord = function (name, isPass,x,y) {
    return {
        name: name,
        pass: isPass | false,
        x:x,
        y:y
    }
}
var map = [
    [
        new coord("x:0,y:0", true,0,0),
        new coord("x:1,y:0", true,1,0)
    ],
    [
        new coord("x:0,y:1", false,0,1),
        new coord("x:1,y:1", true,1,1)
    ],
]
const notPossibleCoord = new coord("", false, -1, -1);
var currentPosition = new coord("", false, -1, -1);
function tryMove(direction) {    
    var nextDirection;
    try {
        switch (direction) {
            case "top": nextDirection = map[currentPosition.x][currentPosition.y + 1]; break;
            case "bottom": nextDirection = map[currentPosition.x][currentPosition.y - 1]; break;
            case "left": nextDirection = map[currentPosition.x - 1][currentPosition.y]; break;
            case "right": nextDirection = map[currentPosition.x + 1][currentPosition.y + 1]; break;
            default:
                return notPossibleCoord
        }
        if (nextDirection.pass)
            return nextDirection;
        else
            return notPossibleCoord;
    } catch (e) {
        //index out of range, it's your edge
        return notPossibleCoord;
    }
}

function onArrowPress() {
    var prevPosition = currentPosition;
    currentPosition = tryMove("top");
    if (currentPosition == notPossibleCoord)
        return; //do nothing if movement not possible

    //do what you need to do
}

一些意见：

我们声明订阅coord项目的函数对象
创建地图（在您的案例地图中将由'images-nodes'创建）
创建const not possible （小心！它需要ES6（可能是ES2015），因此，您可以只使用const而不是var; < / LI>
声明功能tryMove - 这是你动作的主要功能
设置document.keyPress或事件我们的函数onArrowPress，检查是否为'箭头'，并执行您的逻辑

了解所有内容需要学习的内容：

键盘箭头导航4个方向的图像

1 个答案: