Flèche du clavier de navigation dans les images dans les 4 directions

Question

J'ai travaillé sur un projet pour uni, et même si je suis familier avec HTML et CSS, ma connaissance de js est très vague. J'essaie maintenant de faire une sorte de galerie où vous pouvez naviguer avec des flèches du clavier à travers des images qui parfois branches dans l'une des 4 directions, pensez-y comme un livre «Choisissez votre propre aventure», mais je Je suis coincé.

Comme this, où chaque image couvre l'ensemble de l'écran et que vous le parcourez comme la première réponse here: mais dans toutes les directions tant qu'il y a un autre cadre là.

Answer 1

Voir les commentaires et les liens ci-dessous!

Il est laid, mais la solution a fonctionné, si vous êtes novice, il peut vous aider dans votre apprentissage:

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 
} 

Quelques commentaires:

1. nous déclarons la fonction objet qui souscrivent coord item
2. créer votre plan (dans votre cas, la carte sera crée par 'images-nodes')
3. créer const not possible(attention! il est besoin ES6 (ES2015 peut être), donc, au lieu de const, vous pouvez utiliser seulement var;
4. Declare Function tryMove - c'est votre fonction principale pour les mouvements
5. set sur document.keyPress ou un événement quelque chose que notre fonction onArrowPress, chèque est-il 'flèche' ou non, et faites votre logique

---

Qu'est-ce que vous besoin d'apprendre pour comprendre c'est tout:

1. Using an Object Constructor
2. JavaScript Arrays
3. JavaScript Switch Statement
4. JavaScript Errors
5. onkeypress Event
6. JavaScript HTML DOM