Un coup de pouce pour mon jeu de cartes [Résolu]

Signaler
Messages postés
2
Date d'inscription
lundi 6 avril 2015
Statut
Membre
Dernière intervention
6 avril 2015
-
 papou1510 -
Bonjour Tout le monde,
j'ai un probleme avec le jeu(jeu de cartes) que je veux developper en javascript et HTML, mon problème est le suivant:
je ne sais pas trop comment changer l'emplacement de deux cartes différentes avec les méthodes DOM ou s'il y a une autre façon de le faire, j'ai tout essayé et je suis a cour d'idée si quelqu'un veux bien m'aider.
merci d'avance et bonne journée

4 réponses

Messages postés
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
sans savoir exactement ce que tu veut faire et sans code pas facile de t'aider
cette page peut t'aidé a comprendre le dom
Messages postés
2
Date d'inscription
lundi 6 avril 2015
Statut
Membre
Dernière intervention
6 avril 2015

Merci pour ta réaction kazma, je vais essayer d'être le plus clair que possible
j'ai plusieurs places de cartes comme ceci
<td id="5" onclick = "clic();"><img src="cards/10H.svg"></td>
<td id="6" onclick = "clic();"><img src="cards/QH.svg"></td>
<td id="7" onclick = "clic();"><img src="cards/2H.svg"></td>
<td id="8" onclick = "clic();"><img src="cards/empty.svg"></td>


et en deux clics différents sur deux tables je veux changer(switcher) leur contenu, par exemple si je clique sur l'élément avec id="5" et ensuite sur l'élément avec id="6" je veux avoir ceci

<td id="5" onclick = "clic();"><img src="cards/QH.svg"></td>
<td id="6" onclick = "clic();"><img src="cards/10H.svg"></td>
<td id="7" onclick = "clic();"><img src="cards/2H.svg"></td>
<td id="8" onclick = "clic();"><img src="cards/empty.svg"></td>

Merci et les fichiers images sont sur mon ordi.
Messages postés
219
Date d'inscription
mercredi 26 octobre 2011
Statut
Membre
Dernière intervention
22 juin 2017
8
bonjour,

tu peux peut-être partir de ce code :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>

        
        function ClickTD01()
        {
            var td01 = document.getElementById("td01");
            var theimg01 = td01.children[0];
            var td02 = document.getElementById("td02");
            var theimg02 = td02.children[0];
            var tmpimg = theimg01.src;
            theimg01.src = theimg02.src;
            theimg02.src = tmpimg;
        }
        function ClickTD02()
        {
            var td01 = document.getElementById("td01");
            var theimg01 = td01.children[0];
            var td02 = document.getElementById("td02");
            var theimg02 = td02.children[0];
            var tmpimg = theimg01.src;
            theimg01.src = theimg02.src;
            theimg02.src = tmpimg;
        }
    </script>
</head>
<body >
    <table>
        <tr>
            <td onclick="ClickTD01();" id="td01"><img src="cards/QH.svg" />a</td>
            <td onclick="ClickTD02();"  id="td02"><img src="cards/10H.svg" />b</td>
        </tr>
    </table>
</body>
</html>


mais pour moi, je regarderais plutôt avec des background-image et background-position en ne chargeant qu'une seule image en mémoire et en utilisant la methode de "sprite".

Bonne journée
Merci cgandco j'y vois clair maintenant.
Bonne journée
Messages postés
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
sinon il y a comme solution de recupere dans une variable une reference au premier element sur lequel on clic puis au deuxieme clic recuperer le chemin (src)du premier element par l'intermediaire de la variable et celui de l'element cliqué et il n'y a plus qu'a assigné le chemin pour les deux elements

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>tt</title>
<style type="text/css">

body{
 background-color:white; 
}

</style>

<script type="text/javascript">

var elem=''

function clic(e){

 if(elem==''){
  elem=e.currentTarget.firstChild;
 }

 else{
  var image1=elem.src
  elem.src=e.currentTarget.firstChild.src
  e.currentTarget.firstChild.src=image1
  elem='';
 }
}
</script>

</head>
<body>
<table>
<tr>
<td id="5" onclick = "clic(event);"><img src="cards/10H.svg"></td>
<td id="6" onclick = "clic(event);"><img src="cards/QH.svg"></td>
<td id="7" onclick = "clic(event);"><img src="cards/2H.svg"></td>
<td id="8" onclick = "clic(event);"><img src="cards/empty.svg"></td>
</tr>
</table>
</body>
</html>

cgandco

l'idée d'utiliser un background est bonne mais pas sur que sa marche avec du svg


rien ne sert de courir il faut partir a point.
cours Forest cours !
Merci pour ton aide et bonne journée.