Aide pour jeu Labyrinthe en node.js (urgent svp)

[invite9998a278]

Bonjour / Bonsoir


Depuis plusieurs semaines, j'essaye de mener à terme un projet qui consiste à créer un labyrinthe où le but est de faire déplacer une boule jusqu'à un trou.
J'ai beaucoup demal à le finir, et le temps me manque.

Je travaille en node.js sur une machine virtuelle Debian avec du javascript, de l'html et du css.

J'ai créer deux fichiers principaux qui fonctionneront en parallèle :


La requête jouer :

 Cliquez pour afficher

"use strict";

var fs = require("fs");
require('remedial');


var map_afficher = function(req, res, query) {
// var grille = JSON.parse(fs.readFileSync("j_ plateau.json", "utf-8"));
// var grille2 = JSON.stringify(grille);
// var newGrille = fs.writeFileSync("plateau.json ", grille2, "utf-8");
var readGrille = JSON.parse(fs.readFileSync("pl ateau.json", "utf-8"));


var page = fs.readFileSync("toto.html", "UTF-8");
var imur = '<img src="mur.png"/>';
var ichemin = '<img src="chemin.png"/>';
var iboule = "<img src=\"boule.png\"/>";
var itrou = "<img src=\"trou.png\"/>";

var marqueurs = {};
var l, c;
var boule = readGrille.boule;
var trou = readGrille.trou;
var plateau = readGrille.plateau;


marqueurs.map = "<table>";

for (l = 0; l < plateau.length; l++) {
marqueurs.map += "<tr>";

for (c = 0; c < plateau[0].length; c++) {

if (l === boule[0] && c === boule[1]) {

marqueurs.map += '<td>';
marqueurs.map += iboule;
marqueurs.map += '</td>';

} else if (l === trou[0] && c === trou[1]) {

marqueurs.map += '<td>';
marqueurs.map += itrou;
marqueurs.map += '</td>';

} else if (plateau[l][c] === 0) {

marqueurs.map += '<td>';
marqueurs.map += imur;
marqueurs.map += '</td>';

} else if (plateau[l][c] === 1) {

marqueurs.map += '<td>';
marqueurs.map += ichemin;
marqueurs.map += '</td>';
}
}
marqueurs.map += "</tr>";

}
marqueurs.map += "</table>";

res.writeHead(200, {"Content-Type":"text/html"});
page = page.supplant(marqueurs);
res.write(page);
res.end();

};

module.exports = map_afficher;

et la requête déplacer :

 Cliquez pour afficher

"use strict";

var fs = require("fs");
var readGrille = JSON.parse(fs.readFileSync("pl ateau.json", "utf-8"));
var boule = readGrille.boule;
var trou = readGrille.trou;
var plateau = readGrille.plateau;
var map_afficher = require("./req_jouer.js");
var page;
require('remedial');


var deplacer = function(req, res, query) {

if (query.lig = 1) {
boule[0] += Number(query.lig);
}
else if (query.lig = -1) {
boule[0] += Number(query.lig);
}
else if (query.col = 1) {
boule[1] += Number(query.col);
}
else if (query.col = -1) {
boule[1] += Number(query.col);
}

console.log(boule[0]);
console.log(boule[1]);
console.log(plateau);
console.log(boule);
// fs.writeFileSync("plateau.json ", JSON.stringify(plateau), "utf-8");
map_afficher(req, res, query);

// marqueurs = map_afficher(req, res, query);

page = fs.readFileSync("toto.html", "utf-8");

res.writeHead(200, ({'Content-Type' : 'text/html'}));
// page = page.supplant(marqueurs);
res.write(page);
res.end()

};


module.exports = deplacer;

La première requête récupère le json ci dessous :

 Cliquez pour afficher

{
"boule": [1, 1],
"trou": [9, 1],
"plateau": [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]
}

qui lui donne la position de la boule, du trou et contient le plateau de jeu (les 0 et 1 sont remplacés respectivement par des murs et des chemins).

Après l'avoir récupérer, elle va générer l'affichage de la page html en fonction de ces images, qui donne quelque chose comme ça :

 Cliquez pour afficher

Screenshot-1.jpg

Mon but est que le deuxième fichier récupéré lors d'un clic sur les flèches récupère la query et agisse en fonction :

- si la query est lig=1, alors la boule se déplace d'une case vers la droite
- si la query est lig = -1, alors la boule va à gauche
- si query est col = 1, alors la boule va vers le bas
et si query est col= -1, alors la boule va vers le haut

Après je devrais ajouter un moyen pour que la boule ne remplace pas un mur mais qu'elle va revenir sur la case précedente, avant de renvoyer sur la première requête qui va à nouveau générer la page avec les modifications en plus d'ajouter les modifications dans le json.

Actuellement, j'ai une erreur assez étrange lorsque je clique sur la flèche, et la page ne s'affiche pas correctement (et je n'ai pas bien fait l'écriture dans le json) :

 Cliquez pour afficher

Screenshot-2.jpg

Quelqu'un peut m'aider? je dois finir ce projet au plus tard le 5 Juillet

Merci d'avance

p.s : désolé pour l'indentation, le site ne semble pas prendre mes tabulations
-----

[JPL]

Poste s’il-te-plaît le code en utilisant les balises [code]...[/code] (# dans la barre d’outil de l’éditeur en mode avancé].

[invite9998a278]

Ah pardon ^^' j'ai pas l'habitude avec les balises

requête jouer :

"use strict";

var fs = require("fs");
require('remedial');


var map_afficher = function(req, res, query) {
//  var grille = JSON.parse(fs.readFileSync("j_plateau.json", "utf-8"));
//  var grille2 = JSON.stringify(grille);
//  var newGrille = fs.writeFileSync("plateau.json", grille2, "utf-8");
    var readGrille = JSON.parse(fs.readFileSync("plateau.json", "utf-8"));


    var page = fs.readFileSync("toto.html", "UTF-8");
    var imur = '<img src="mur.png"/>';
    var ichemin = '<img src="chemin.png"/>';
    var iboule = "<img src=\"boule.png\"/>";
    var itrou = "<img src=\"trou.png\"/>";

    var marqueurs = {};
    var l, c;
    var boule = readGrille.boule;
    var trou = readGrille.trou;
    var plateau = readGrille.plateau;


    marqueurs.map = "<table>";

    for (l = 0; l < plateau.length; l++) {
        marqueurs.map += "<tr>";

        for (c = 0; c < plateau[0].length; c++) {


            if (l === boule[0] && c === boule[1]) {

                marqueurs.map += '<td>';
                marqueurs.map += iboule;
                marqueurs.map += '</td>';

            } else if (l === trou[0] && c === trou[1]) {

                marqueurs.map += '<td>';
                marqueurs.map += itrou;
                marqueurs.map += '</td>';

            } else if (plateau[l][c] === 0) {

                marqueurs.map += '<td>';
                marqueurs.map += imur;
                marqueurs.map += '</td>';

            } else if (plateau[l][c] === 1) {

                marqueurs.map += '<td>';
                marqueurs.map += ichemin;
                marqueurs.map += '</td>';
            }
        }
        marqueurs.map += "</tr>";

    }
    marqueurs.map += "</table>";

    res.writeHead(200, {"Content-Type":"text/html"});
    page = page.supplant(marqueurs);
    res.write(page);
    res.end();

};

module.exports = map_afficher;

la requête déplacer :

"use strict";

var fs = require("fs");
var readGrille = JSON.parse(fs.readFileSync("plateau.json", "utf-8"));
var boule = readGrille.boule;
var trou = readGrille.trou;
var plateau = readGrille.plateau;
var map_afficher = require("./req_jouer.js");
var page;
require('remedial');


    var deplacer = function(req, res, query) {

        if (query.lig = 1) {
            boule[0] += Number(query.lig);
        }
        else if (query.lig = -1) {
            boule[0] += Number(query.lig);
        }
        else if (query.col = 1) {
            boule[1] += Number(query.col);
        }
        else if (query.col = -1) {
            boule[1] += Number(query.col);
        }

console.log(boule[0]);
console.log(boule[1]);
console.log(plateau);
console.log(boule);
//      fs.writeFileSync("plateau.json", JSON.stringify(plateau), "utf-8");
        map_afficher(req, res, query);

//      marqueurs = map_afficher(req, res, query);

        page = fs.readFileSync("toto.html", "utf-8");

        res.writeHead(200, ({'Content-Type' : 'text/html'}));
//      page = page.supplant(marqueurs);
        res.write(page);
        res.end()

    };


module.exports = deplacer;

et le json :

{
"boule": [1, 1],
"trou": [9, 1],
"plateau": [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0],
        [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
        [0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0],
        [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
        [0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0],
        [0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
        [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
        [0, 0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
        [0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    ]
}

[invite9998a278]

Je clos le sujet, j'ai fini le projet au final par mes propres moyens

[A voir en vidéo sur Futura]