键盘箭头通过图像在4个方向上导航

Question

我一直在为Uni做一个项目，而我熟悉HTML和CSS，但我对JS的了解很模糊。

我现在正在尝试制作某种画廊，您可以通过键盘箭头通过图像导航，这些图像有时在4个方向上分支，将其视为"选择您自己的冒险"书，但是我'

这样，每个帧都覆盖整个屏幕，然后您像这里的第一个答案一样浏览它：但是只要那里有另一个帧。

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
}

一些注释：

1. 我们声明函数 - 对象订阅坐标项目
2. 创建您的地图(在您的案例地图中，将由" images-nodes"创建(
3. 创建const not possible (要关心！需要ES6(ES2015可能是(，因此，您可以仅使用var;
而不是const
4. 声明功能tryMove-这是您的运动的主要功能
5. 在document.keyPress或某些事件上设置我们的功能onArrowPress，检查是否'箭头'，然后执行您的逻辑

---

您需要学习的知识是：

1. 使用对象构造函数
2. JavaScript数组
3. JavaScript Switch语句
4. JavaScript错误
5. onkeypress事件
6. JavaScript HTML DOM