Menu

Snack dans javaScript

-
Bonjour, j'ai un problème dans javaScript je dois faire un jeu de serpent mais il ne veut pas faire ce que je veux. Lorsque je bouge, la tête du serpent suit mais à partir d'un certain moment c'est le corps qui ne suit pas.

Merci d'avance.
Afficher la suite 

Votre réponse

4 réponses

Meilleure réponse
1
Merci
Merci de bien vouloir m'aider.

/**


* represente le serpent grace à sa position de tete et son corp

*/
class Snake {

    constructor(head, direction) {
        this._head = head;
        this._direction = direction;
        this._tail = [];
    }

    get head() {
        return this._head;
    }
    get direction() {
        return this._direction;
    }
    get tail() {
        return this._tail;
    }
    set tail(aTail) {
        this._tail = aTail;
    }

}

let seGrandit = false;
let mangePomme = false;
let nbPoint = 0;
let pommeManger = 0;
let tailleCorp = 1
let save;
let currentDirection = 0;
let directions = ["West", "North", "East", "South"];
let direction = directions[currentDirection];
//localStorage.setItem("meilleurScore",0)

/**


* Permet de tourner a droite dans le cadre

*/
function moveRight(cases) {
    if (currentDirection == 1) {
        currentDirection = 2;
        cases._direction = directions[currentDirection];
    } else if (currentDirection == 3) {
        currentDirection = 2;
        cases._direction = directions[currentDirection];
    }
}

/**


* permet de tourner a gauche dans le cadre

*/
function moveLeft(cases) {
    if (currentDirection == 1) {
        currentDirection = 0;
        cases._direction = directions[currentDirection]
    } else if (currentDirection == 3) {
        currentDirection = 0;
        cases._direction = directions[currentDirection];
    }
}

/**


* permet de aller vers le bas dans le cadre

*/
function moveDown(cases) {
    if (currentDirection == 0) {
        currentDirection = 3;
        cases._direction = directions[currentDirection];
    } else if (currentDirection == 2) {
        currentDirection = 3;
        cases._direction = directions[currentDirection];
    }
}

/**


* Permet d'aller vers le haut dans le cadre.

*/
function moveUp(cases) {
    if (currentDirection == 0) {
        currentDirection = 1;
        cases._direction = directions[currentDirection];
    } else if (currentDirection == 2) {
        currentDirection = 1;
        cases._direction = directions[currentDirection];
    }
}


/**


* Permet de tourner dans l'une des 4 directions lorsque l'on appuis sur z,q,s,d.

*/
onkeypress = function (e) {
    switch (e.keyCode) {
        case 113: //Gauche
            moveLeft(serpent);
            break;
        case 122: //Haut
            moveUp(serpent);
            break;
        case 100: //Droite
            moveRight(serpent);
            break;
        case 115: //Bas
            moveDown(serpent);
            break;
    }

}


/**


* Permet de changer la direction visuel de la tete du serpent.

* */

function moveTete(snacke) {
    if (snacke.direction == "West") {
        if (snacke.head.col == 1) {
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "blue";
            snacke.head._col = 15;
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "red";
        } else {
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "blue";
            snacke.head._col -= 1;
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "red";
        }
    } else if (snacke._direction == "North") {
        if (snacke.head._row == 1) {
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "blue";
            snacke.head._row = 15;
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "red";
        } else {
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "blue";
            snacke.head._row -= 1;
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "red";
        }
    } else if (snacke.direction == "South") {
        if (snacke.head._row == 15) {
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "blue";
            snacke.head._row = 1;
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "red";
        } else {
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "blue";
            snacke.head._row += 1;
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "red";
        }
    } else if (snacke.direction == "East") {
        if (snacke.head._col == 15) {
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "blue";
            snacke.head._col = 1;
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "red";
        } else {
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "blue";
            snacke.head._col += 1;
            document.getElementById(`row${snacke.head.row}col${snacke.head._col}`).style.backgroundColor = "red";
        }
    }
}

/**


* Permet de faire bouger le corp dans un sens ou dans l'autre

* @param {} pos 

*/
function moveCorp(pos) {
    if (direction == "West") {
        if (pos._col == 1) {
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "blue";
            pos._col = 15;
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "gray";
        } else {
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "blue";
            pos._col -= 1;
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "gray";
        }
    } else if (direction == "North") {
        if (pos._row == 1) {
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "blue";
            pos._row = 15;
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "gray";
        } else {
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "blue";
            pos._row -= 1;
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "gray";
        }
    } else if (direction == "South") {
        if (pos._row == 15) {
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "blue";
            pos._row = 1;
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "gray";
        } else {
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "blue";
            pos._row += 1;
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "gray";
        }
    } else if (direction == "East") {
        if (pos._col == 15) {
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "blue";
            pos._col = 1;
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "gray";
        } else {
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "blue";
            pos._col += 1;
            document.getElementById(`row${pos.row}col${pos.col}`).style.backgroundColor = "gray";
        }
    }
}

/**


* Permet de remettre dans le bon sens la position d'un corp donné (met la position en décalage).

* @param {} pos une position d'un corp (une case representent une partie du corp).

*/
function movePos(pos) {
   
    if (direction == "West" ) {
        if (pos._col == 1) {
            pos._col = 15;
        } else if(pos._col<15){
            pos._col += 1;
        }
    } else if (direction == "North" ) {
        if (pos._row == 1) {
            pos._row = 15;
        } else if(pos.row <15){
            pos._row += 1;
        }
    } else if (direction == "South") {
        if (pos._row == 15 ) {
            pos._row = 1;
        } else if(pos._row>1){
            pos._row -= 1;
        }
    } else if (direction == "East") {
        if (pos._col == 15 ) {
            pos._col = 1;
        } else if(pos._col >1){
            pos._col -= 1;
        }
    }

}

/**


* Permet d'initialiser la premiere partie du corp du serpent.

*/
function initialiseFirstCorp() {
    let corpCol = serpent.head.col;
    let rowCol = serpent.head.row;
    posCorpDeBase._col = corpCol;
    posCorpDeBase._row = rowCol;
    serpent._tail[0] = posCorpDeBase;
    movePos(serpent._tail[0]);
}

/**


* Represente le fonctionnement meme et la creation du serpent dans le jeu.

*/
function mouvement() {
    if (serpent.head._col == positionPomme._col && serpent.head._row == positionPomme.row) {
        mangePomme = true;
        serpent._tail[tailleCorp] = new Position(serpent.tail[tailleCorp - 1]._row, serpent.tail[tailleCorp - 1]._col);
        movePos(serpent.tail[tailleCorp]);
        tailleCorp++;
        pommeManger++;
        positionPomme = new Position(caseAleatoire(1, 15), caseAleatoire(1, 15));
        afficherPom();
    }
    mangePomme = false;
    moveTete(serpent);
    if (serpent._direction != direction && serpent._tail.length == 1) {
        moveCorp(serpent._tail[0]);
        direction = serpent._direction;
    } else if (serpent._direction != direction && serpent._tail.length == 2) {

        moveCorp(serpent.tail[0]);
        moveCorp(serpent.tail[1]);
        //touch une flèche change de direction auto
        moveTete(serpent);
        ancienneDirection = direction;
        direction = serpent.direction;
        moveCorp(serpent.tail[0]);
        direction = ancienneDirection;
        moveCorp(serpent.tail[1]);
        direction = serpent.direction;

    } else if (serpent._direction != direction && serpent._tail.length > 2) {

        for (let i = 0; i < serpent.tail.length; i++) {
            moveCorp(serpent._tail[i]);
        }
        moveTete(serpent);
        ancienneDirection = direction;
        direction = serpent.direction
        moveCorp(serpent.tail[0]);
        direction = ancienneDirection;
        for (let i = 1; i < serpent.tail.length; i++) {
            moveCorp(serpent.tail[i]);
        }
        for (let i = serpent.tail.length -1; i > 0; i--) {
            moveTete(serpent);
            direction = serpent._direction;
            for (let j = 0; j <= serpent.tail.length - i; j++) {
                moveCorp(serpent._tail[j]);
                save = j;
            }
            save++;
            direction = ancienneDirection;
            for (let r = save; r < serpent.tail.length; r++) {
                moveCorp(serpent._tail[r]);
            }
        }
        direction = serpent.direction;
        afficherPom();
    } else {
        if(!mangePomme && ! seGrandit){
            for (let i = 0; i < serpent.tail.length; i++) {
                moveCorp(serpent.tail[i]);
            }
        }
        afficherPom();
    }
    affichageTete(serpent);
}

/**


* Represente le fonctionnement du jeu.

*/
function game(){
    if(!isOver()){
        mouvement();
    }

    if(isOver()){
        nbPoints();
        if(nbPoint >localStorage.getItem("meilleurScore")){
            meilleurScore();
            document.getElementById("plateauDeJeu").style.display = "none";
            document.getElementById("felicitation").style.display = "block";
            clearInterval("gameJ");
            clearInterval("granditJ");
            
        }
    }
}

/**


* Permet de faire grandir le serpent.

*/
function grandit(){
    if(!mangePomme){
        seGrandit = true;
        serpent.tail[tailleCorp] = new Position(serpent.tail[tailleCorp - 1].row, serpent.tail[tailleCorp - 1].col);
        movePos(serpent.tail[tailleCorp]);
        tailleCorp++;    
        seGrandit= false;
    }    
}


/**


* Permet de retourner une reponse aleatoirement

* @param {*} min le minimum

* @param {*} max le maximum

*/
function caseAleatoire(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

/**


* Permet de dire quand le jeu est fini.

*/
function isOver(){
    let over = false;
    let i = 0;

    while(i<serpent._tail.length && !over){
        if(serpent.tail[i]._col == serpent.head._col  && serpent.tail[i]._row == serpent.head._row){
            over = true;
        }
        i++;
    }
    return over;
}

/**


* Permet de calculer le score du jeu.

*/
function nbPoints(){
   nbPoint = (serpent._tail.length*10)+ (pommeManger*50);
}

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 40674 internautes nous ont dit merci ce mois-ci

Commenter la réponse de rene
Messages postés
25228
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 avril 2019
1949
0
Merci
Bonjour,

Oui....et .... ?
Pense tu que sans voir ton code nous parviendrons à te renseigner ???

Nous sommes doués.... mais pas encore capable de faire de la télépathie ... :-)

NB: Pour poster du code sur le forum, merci de le faire en utilisant LES BALISES DE CODE (et en y précisant le langage afin d'avoir la coloration syntaxique)
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.


Commenter la réponse de jordane45
0
Merci
oui bien évidemment.

/**
 * Permet de remettre dans le bon sens la position d'un corp donné (met la position en décalage).
 * @param {} pos une position d'un corp (une case representent une partie du corp).
 */
function movePos(pos) {
   
    if (direction == "West" ) {
        if (pos._col == 1) {
            pos._col = 15;
        } else if(pos._col<15){
            pos._col += 1;
        }
    } else if (direction == "North" ) {
        if (pos._row == 1) {
            pos._row = 15;
        } else if(pos.row <15){
            pos._row += 1;
        }
    } else if (direction == "South") {
        if (pos._row == 15 ) {
            pos._row = 1;
        } else if(pos._row>1){
            pos._row -= 1;
        }
    } else if (direction == "East") {
        if (pos._col == 15 ) {
            pos._col = 1;
        } else if(pos._col >1){
            pos._col -= 1;
        }
    }

}

/**
 * Permet d'initialiser la premiere partie du corp du serpent.
 */
function initialiseFirstCorp() {
    let corpCol = serpent.head.col;
    let rowCol = serpent.head.row;
    posCorpDeBase._col = corpCol;
    posCorpDeBase._row = rowCol;
    serpent._tail[0] = posCorpDeBase;
    movePos(serpent._tail[0]);
}

/**
 * Represente le fonctionnement meme et la creation du serpent dans le jeu.
 */
function mouvement() {
    if (serpent.head._col == positionPomme._col && serpent.head._row == positionPomme.row) {
        mangePomme = true;
        serpent._tail[tailleCorp] = new Position(serpent.tail[tailleCorp - 1]._row, serpent.tail[tailleCorp - 1]._col);
        movePos(serpent.tail[tailleCorp]);
        tailleCorp++;
        pommeManger++;
        positionPomme = new Position(caseAleatoire(1, 15), caseAleatoire(1, 15));
        afficherPom();
    }
    mangePomme = false;
    moveTete(serpent);
    if (serpent._direction != direction && serpent._tail.length == 1) {
        moveCorp(serpent._tail[0]);
        direction = serpent._direction;
    } else if (serpent._direction != direction && serpent._tail.length == 2) {

        moveCorp(serpent.tail[0]);
        moveCorp(serpent.tail[1]);
        //touch une flèche change de direction auto
        moveTete(serpent);
        ancienneDirection = direction;
        direction = serpent.direction;
        moveCorp(serpent.tail[0]);
        direction = ancienneDirection;
        moveCorp(serpent.tail[1]);
        direction = serpent.direction;

    } else if (serpent._direction != direction && serpent._tail.length > 2) {

        for (let i = 0; i < serpent.tail.length; i++) {
            moveCorp(serpent._tail[i]);
        }
        moveTete(serpent);
        ancienneDirection = direction;
        direction = serpent.direction
        moveCorp(serpent.tail[0]);
        direction = ancienneDirection;
        for (let i = 1; i < serpent.tail.length; i++) {
            moveCorp(serpent.tail[i]);
        }
        for (let i = serpent.tail.length -1; i > 0; i--) {
            moveTete(serpent);
            direction = serpent._direction;
            for (let j = 0; j <= serpent.tail.length - i; j++) {
                moveCorp(serpent._tail[j]);
                save = j;
            }
            save++;
            direction = ancienneDirection;
            for (let r = save; r < serpent.tail.length; r++) {
                moveCorp(serpent._tail[r]);
            }
        }
        direction = serpent.direction;
        afficherPom();
    } else {
        if(!mangePomme && ! seGrandit){
            for (let i = 0; i < serpent.tail.length; i++) {
                moveCorp(serpent.tail[i]);
            }
        }
        afficherPom();
    }
    affichageTete(serpent);
}
Commenter la réponse de rene
0
Merci
est-ce que c'est bien le code que vous vouliez ou bien je met le code complet car je n'ai mis que ceux qui me semblait important.
jordane45
Messages postés
25228
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 avril 2019
1949 -
Il faudra le code complet sinon nous pourrons pas tester ton script.
Commenter la réponse de rene