Sujet Précédent Sujet Suivant

Snack dans javaScript

Fermé
rene - Modifié le 11 avril 2019 à 15:16
 rene - 11 avril 2019 à 17:34
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.
A voir également:

4 réponses

Réponse 1 / 4
rene
Modifié le 11 avril 2019 à 17:35
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);
}
1
Réponse 2 / 4
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
11 avril 2019 à 15:26
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
.


0
Réponse 3 / 4
rene
11 avril 2019 à 16:21
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);
}
0
Réponse 4 / 4
rene
11 avril 2019 à 17:30
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.
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
11 avril 2019 à 17:31
Il faudra le code complet sinon nous pourrons pas tester ton script.
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
afficher un tableau JS en HTML
jibouz12 -
jibouz12 -

3 réponses
Nodejs.exe est-ce un virus
Maverik1956 -
Malekal_morte- -

13 réponses
[Javascript] Tables de Multiplication
pigeonus -
hachim -

6 réponses