Bonjour, 

Après plusieurs recherche je ne trouve pas la solution à mon problème.

Je dois créer un Nurikabe. De ce fait, j'ai un tableau de 5x5. Dans mon fichier css j'ai ça :

.grass{
    width: 50px;
    height: 50px;
    text-align: center;
    background-image: url("img/Capture_16.PNG");
    border-radius: 5px;
    border-spacing: 0px;
}

.grass correspond aux cellules de mon tableau.

Comme vous pouvez le voir, mes cellules ont un background-image.

Je voudrais que, lorsque que je clique sur une cellule de mon tableau, ce background-image(Capture_16) se change en background-image(Capture17). Etant débutant dans le web, j'ai un peu de mal avec JS. Auriez-vous une idée de fonction JS pour effectué ce changement de background ?

Merci par avance.

Bonjour,

un tableau HTML n'est probablement le bon élément pour ça, mais ici n'est pas la question.

Ce que je suggère, plutôt que de changer le background est d'ajouter ou enlever une classe sur les cases cliquées - par exemple ajouter ou enlever "water", si je saisis bien le concept de nurikabe

Je suggère de lire cette page : https://developer.mozilla.org/fr/docs/Web/API/Element/classList qui te donnera les bonnes indications.

Je ne vois pas quel autre moyen qu'un tableau HTML je pourrai utiliser pour la grille de jeu. Des suggestions pour le remplacer ?

Merci pour ton aide je vais voir cela !

> Je ne vois pas quel autre moyen qu'un tableau HTML je pourrai utiliser pour la grille de jeu.

Plusieurs div/span (contenant des boutons, pour l'interactivité) à la suite, et stylées de manière à apparaître en carré, avec flex ou grid, par exemple.

Très bien, mais je ne vois pas comment avec des boutons je peux arriver à ça :http://nurikabe-puzzle.com/

Merci tout de même pour ton aide !

Je relance ce topic pour une màj de mon problème.

ALORS...

Lorsque que je clique sur une cellule de mon tableau, TOUTES les cellules changent de classe, OR je souhaite que cela soit uniquement la cellule dans laquelle j'ai cliqué qui change. 

Voici mon js :

// Créer la rivière
function river(){
    $(".grass").toggleClass('water');
}

.grass est la classe attribuée à toutes mes cellules de tableau.

Des suggestions ?

Merci par avance

Et comment la fonction river() est-elle appelée ?

(tu avais déjà jQuery ? parce que du coup tu n'utilises pas les méthodes que j'avais mises en lien)

-
Edité par Lamecarlate 16 janvier 2019 à 19:50:03

Ma fonction river() est appelé comme ceci :

<tr>
            <td class ="grass" onclick="river()">2</td>
            <td class ="grass" onclick="river()"></td>
            <td class ="grass" onclick="river()"></td>
            <td class ="grass" onclick="river()"></td>
            <td class ="grass" onclick="river()"></td>
            <td class ="grass" onclick="river()"></td>
            <td class ="grass" onclick="river()"></td>
        </tr>

Désolé du décalage

Et oui, j'utilise jQuery. Je n'ai pas trop compris les méthodes de ton lien.

Bon,

déjà, onclick, on oublie c'est sale. On va utiliser des écouteurs (listeners). Ça permet de sortir le JS du HTML, c'est plus séparé, plus facilement maintenable.

Avec jQuery c'est comme ça :

$('.grass').on('click', river);

Et il faut modifier un peu river, pour lui indiquer ce sur quoi on a cliqué - parce que c'est ça, le problème ici. Normalement, $(this) devrait faire l'affaire. Du coup, ça donnerait :

function river(){
    $(this).toggleClass('water');
}

Je fais de mémoire, il faut que tu testes pour vérifier que c'est ok.

Merci ! Je vois ça demain !

EDIT : Lorsque je mets ceci dans mon js, rien ne se passe !

Je continue à chercher !

EDIT 2 : J'ai réussi ! avec ceci

function river(td)
{
    if (td.className === "grass")
        td.className = "water";
    else
        td.className = "grass";
}

et ça

<td class ="grass" onclick="river(this)"></td>
            <td class ="grass" onclick="river(this)"></td>
            <td class ="grass" onclick="river(this)"></td>
            <td class ="grass" onclick="river(this)"></td>
            <td class ="grass" onclick="river(this)">2</td>
            <td class ="grass" onclick="river(this)"></td>
            <td class ="grass" onclick="river(this)"></td>

J'avais déjà essayé cette méthode, mais je n'avais pas mit le "this"

Merci d'avoir pris le temps de m'aider !

-
Edité par Clermoe 17 janvier 2019 à 17:08:18