[Javascript] Déplacer un élément avec les touches

Résolu/Fermé

Kyukuro Messages postés 9 Date d'inscription vendredi 18 avril 2014 Statut Membre Dernière intervention 19 mars 2016 - Modifié par Kyukuro le 18/04/2014 à 16:47
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 16 nov. 2016 à 13:19

Bonjour,
Je souhaites pouvoir déplacer un objet dans un tableau deux dimensions 10x10 à l'aide des flèches j'aimerai donc votre aide afin de savoir comment procéder.

function tableau() {
        var body = document.getElementsByTagName("body")[0];
        var table = document.createElement("table");
        var tablebody = document.createElement("tbody");
 
     
    //Tableau
    var tableau = new Array();
     
    //Création des lignes
    for(var i=0; i<10; i++) {
        tableau[i] = new Array();
    }
     
    //Parcourt Lignes -->
    for(var i=0; i<10; i++) {
        var ligne = document.createElement("tr");
 
        for(var j=0; j<10; j++) {
            var cellule = document.createElement("td");
            cellule.setAttribute("id","lig"+i+"col"+j);
            ligne.appendChild(cellule);
        }
     
        tablebody.appendChild(ligne);
    }
    table.appendChild(tablebody);
    body.appendChild(table);
     
        for (var i=5; i<6; i++) {
        var cell = document.getElementById("lig"+i+"col"+5);   
        cell.setAttribute("class","objet")
        }
                 
 
     
 
}

J'ai pensé à quelque chose comme ça mais forcément ca ne fonctionne pas :

{
if (isKeyDown('90') i-1; }
}

Mon problème est donc que je n'arrive pas à déplacer mon objet dans le tableau avec des touches et je solicite votre aide pour que vous puissiez m'apporter conseils/solutions, merci d'avance

A voir également:

Faire bouger un objet javascript
Vente objet occasion entre particulier - Guide
Telecharger javascript - Télécharger - Langages
Insérer une image dans word sans bouger le texte - Guide
Identifier un objet à partir d'une photo - Guide
Objet interdit en cabine ryanair - Guide

2 réponses

Réponse 1 / 2

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 2/05/2014 à 13:25

Voila voila, en espérant avoir bien compris ta demande.


<!doctype html>
<html>
 <head>
        <meta charset="utf-8"/>
        <style type="text/css">
          table{
            border-collapse: collapse;
          }
          table tr td{
            width: 30px;
            height: 30px;
            border: #333 solid 1px;
          }
          .active{
            background-color: red;
          }
        </style>
 </head>
 <body>
    <div class="tabContainer"></div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
      (function(){
        var engine = {
          pos: {x:0, y:0},
          tab: {
            x: 10, // Nombre de cellules en hauteur
            y: 10, // Nombre de cellules en largeur
            container: $('.tabContainer')
          },
          _init: function(){
            this.genTab();
            this.listener();
            this.setCell();
          },
          genTab: function(){
            var $table = $('<table></table>');
            for(var x = 0; x < this.tab.x; x++){
              var $line = $('<tr></tr>');
              $table.append($line);
              for(var y = 0; y < this.tab.y; y++){
                $line.append('<td class="'+x+'-'+y+'"></td>');
              }
            }
            this.tab.container.append($table);
          },
          listener: function(){
            var me = this;
            $(document).keydown(function(e){
                if (e.keyCode >= 37 && e.keyCode <= 40) {
                  var pos = [me.pos.x, me.pos.y]; 
                   switch(e.keyCode){
                      case 37: pos[1]--; break; // left
                      case 38: pos[0]--; break; // up
                      case 39: pos[1]++; break; // right
                      case 40: pos[0]++; break; // down
                   }
                  me.move(pos[0], pos[1]);
                };
            });
          },
          move: function(x,y){
            if( x > this.tab.x-1 || x < 0 || y < 0 || y > this.tab.y-1){
              return;
            }else{
              this.pos.x = x;
              this.pos.y = y;
            }
            this.setCell();
          },
          setCell: function(){
            $('table tr td.active').removeClass('active');
            $('.'+this.pos.x+'-'+this.pos.y).addClass('active');
          }
        }
        engine._init();
      }).call();
    </script>
 </body>
</html>

Kyukuro Messages postés 9 Date d'inscription vendredi 18 avril 2014 Statut Membre Dernière intervention 19 mars 2016
18 mars 2016 à 15:59

Mieux vaut tard que jamais, merci beaucoup j'ai pu grâce à toi résoudre mes problèmes !

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
16 nov. 2016 à 13:19

Effectivement ;) Je t'en prie

Réponse 2 / 2

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
2 mai 2014 à 11:42

Je vais te pondre un petit bout de code pour t'aider. a tout de suite

Discussions similaires

manon

Javascript Arrondi à 2 chiffres après la virgule

nom de metier

java script error in the main process

echec de creation de l'objet com