[Javascript] Déplacer un élément avec les touches
Résolu
Kyukuro
Messages postés
9
Date d'inscription
Statut
Membre
Dernière intervention
-
prosthetiks Messages postés 1309 Statut Membre -
prosthetiks Messages postés 1309 Statut Membre -
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.
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
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
2 réponses
-
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> -
Je vais te pondre un petit bout de code pour t'aider. a tout de suite
