[HTML] Jeu d'échecs en HTML : renvoyer l'état du jeu

Jeu d'échecs en HTML : renvoyer l'état du jeu [HTML] - HTML/CSS - Programmation

Marsh Posté le 21-04-2020 à 00:27:44    

Bonjour,
 
Je suis pas bien au point avec le html.
Je voudrais savoir comment spécifier en html le contenu du jeu d'echecs.
Je dois spécifier l'état du jeu pour le renvoyer à une CGI.
 
Vous feriez comment ? S'il vous plait !
 
Merci.


Message édité par Profil supprimé le 21-04-2020 à 00:33:56
Reply

Marsh Posté le 21-04-2020 à 00:27:44   

Reply

Marsh Posté le 21-04-2020 à 09:59:13    

Utilise un format existant ?
https://fr.wikipedia.org/wiki/Notation_aux_%C3%A9checs


---------------
D3
Reply

Marsh Posté le 21-04-2020 à 22:51:18    

C'est pas passé de mode les CGI avec les langages côté serveur :??:
 
Mais si tu veux faire un jeu d'échecs avec la logique métier côté serveur, côté client, t'as juste à envoyer le coup joué au serveur. Le serveur mettra à jour l'état de la partie (position des pièces) et enverra un code retour au client ainsi que le prochain coup joué s'il y a une IA. Ca peut se faire soit par un formulaire avec un seul champ caché envoyé qui va contenir les coordonnées du coup joué + un bouton "valider" qui va poster le formulaire et réafficher la page avec la nouvelle situation, soit via une requête Ajax qui va envoyer le coup jour et récupérer la réponse du serveur puis mettre à jour la partie.
Pour le coup, joué, tu fais tout en javascript (pièce sélectionnée par un 1er clic dessus et clic sur la position de destination). Là, tu pourras pas le faire en ADA :D
 
Pour le dessin de l'échiquier, le plus simple est de faire un <table> de 8x8.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 22-04-2020 à 08:26:46    

En pre c'est plus léger si tu renvoie tout l'état et ré-affiche tout, alors qu'avec un table il sera plus facile d’accéder aux 2 noeuds qui ont changé pour actualiser leur affichage si tu neveux pas actualiser tout l’échiquier...


---------------
D3
Reply

Marsh Posté le 22-04-2020 à 09:33:10    


J'ai jamais parlé d'identifiant.
 
Pour ta question entre <pre> et <table>, d'un point de vue sémantique, <table> est ce qui correspond le mieux à un plateau d'échecs. Tu aurais pu passer par une <div> contenant 8x8 <div> mais tu vas te faire chier avec les float: left :/
 
Edit : et comme l'a dit mechkurt, <table>, avec ses <tr> et <td> va te permettre de bien plus facilement repérer les coups joués (par détection de l'événement click sur les cellules (ie. <td> )) et de mettre à jour la position des pièces que <pre>.


Message édité par rufo le 22-04-2020 à 09:35:07

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 22-04-2020 à 14:31:12    

Merci pour vos réponses.

Reply

Marsh Posté le 22-04-2020 à 14:57:31    

Je sais qu'en HTML les gens considèrent ça comme un outil de Satan, mais il y a quand même des cas où ça se justifie très bien d'utiliser des tableaux.
 
Sinon pour les divs faut utiliser les grids CSS, mais je ne sais en effet pas si ça fait parti de ses compétences.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 22-04-2020 à 16:51:54    

Le pb des <table>, c'est qu'ils ont été beaucoup utilisés pour la mise en page (cf mise en page par tableaux) à une époque où le CSS n'était pas aussi puissant. Mais quand on veut faire un tableau, ben on utilise <table>. Il faut utiliser les balises pour leur sens sémantique et non leur représentation visuelle :o
 
Un échiquier peut être vu comme un tableau, donc c'est bon ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 23-04-2020 à 13:40:31    

Je dirais que tu met la charrue avant les boeufs, poses toi la question de comment tu gère les actions et les états coté serveur, et ensuite tu pourras voir comment afficher et renvoyer l'info pertinente...
 
...enfin c'est comme ça que moi je fonctionnerais ! ^^
Pour répondre il faut savoir si tu fait 100% confiance en l'utilisateur (tu ne vérifies pas les ordres qu'il envoie et ne stocke pas un modèle du jeu coté serveur) ou si tu ne lui permets pas de tricher et donc vérifies tout.
 
A part ça effectivement les champs de formulaire hidden peuvent être une solution mais ça peut sans doute être optimisé, une case vide peut ne pas avoir de valeur plutôt que la valeur "Blank" par exemple.


---------------
D3
Reply

Marsh Posté le 23-04-2020 à 18:26:28    

A mon sens, l'état de l'échiquier doit être géré côté serveur et non côté client (pour éviter les hacks) et le client envoie juste les changements de position des pièces.
A l'initialisation d'une partie, le serveur envoie toutes les positions des pièces.
Pas besoin d'un form avec 64 inputs hidden


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 23-04-2020 à 18:26:28   

Reply

Marsh Posté le 23-04-2020 à 19:22:22    

Ben un cgi, c'est un composant côté serveur. Quand je parle de serveur, je parle de serveur web, donc genre Apache.. Le client et le serveur peuvent être sur la même machine (ex : environnement Wamp sous Windows, Lamp sous Linux). Et les CGI, aujourd'hui, on s'en passe le plus souvent avec des technos genre Java/Tomcat, C#, PHP... Bizarrement, j'ai jamais vu un site web avec une logique métier codée en Ada. :whistle:


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 23-04-2020 à 23:20:04    

Avant d'imlpémenter les trucs "compliqués" comme la promotion ou le rock, commence par implémenter le minimum syndical : le déplacement autorisé des pièces :/ Là, ma tour passe tranquille au-dessus des pions et va même en diagonale. Je peux avancer un pion de 4 cases.
 
Niveau ergonomie, fais-le par clic point de départ, clic point d'arrivée. Parce que je me vois mal gérer les déplacements par ton formulaire de 4 listes.
 
Il manque aussi un espace affichant tous les coups joués et le compteur de temps des 2 joueurs.
 
Au passage, ça serait pas mal d'avoir un échiquier plus gros. Là, c'est très petit et on distingue mal les blancs des noirs (ex : la reine blanche ressemble beaucoup à la noire).
 
Edit : utilise des images en 64x64 plutôt que des caractères pour les pièces et l'échiquier. Utilise la propriété z-index (css) pour les superpositions ;)


Message édité par rufo le 23-04-2020 à 23:22:09

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 24-04-2020 à 02:36:48    

La promotion ça a pas marché :o
 
Et j'ai joué que des coups légaux, mais on peut effectivement jouer ce qu'on veut.
 
Faudra se pencher sur l'ergonomie aussi, le formulaire pour jouer est pas terrible.
 

Reply

Marsh Posté le 24-04-2020 à 09:25:08    

C'est ce que je lui ai fait remarquer. Implémenter le clic sur les cellules, c'est quand même pas la mort par rapport à l'implémentation d'un min/max :/


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 24-04-2020 à 09:38:31    


Bordel, mais les conseils qu'on te donne sont tout à fait pertinents, et tu les prend de haut sans jamais en tenir compte ! C'est vraiment saoulant ce genre d'attitude. Tu peux pas écouter ce qu'on te dit au lieu de n'en faire qu'à ta tête ?


---------------
J'ai un string dans l'array (Paris Hilton)
Reply

Marsh Posté le 24-04-2020 à 12:51:26    

Mackila a écrit :

La promotion ça a pas marché :o
 
Et j'ai joué que des coups légaux, mais on peut effectivement jouer ce qu'on veut.
 
Faudra se pencher sur l'ergonomie aussi, le formulaire pour jouer est pas terrible.
 


 
Merci pour le retour.

Reply

Marsh Posté le 25-04-2020 à 11:46:41    

Harkonnen a écrit :


Bordel, mais les conseils qu'on te donne sont tout à fait pertinents, et tu les prend de haut sans jamais en tenir compte ! C'est vraiment saoulant ce genre d'attitude. Tu peux pas écouter ce qu'on te dit au lieu de n'en faire qu'à ta tête ?


Je ne relève plus ce genre de remarque déplacée. Je luis fais des critiques constructives, il en fait ce qu'il veut. Mais quand on demande l'avis à des personnes, il faut s'attendre à des critiques. Charge à ceux qui les font d'être constructif et pas juste critiquer pour critiquer.
Perso, j'ai toujours pris l'habitude que lorsque je critiquais une chose, de toujours proposer une alternative réalisable. Si je n'en suis pas capable, alors je me tais. En résumé, si je ne suis pas capable de faire mieux, je la ferme. Je pense que pas mal de monde devrait s'inspirer de ce principe  :whistle:


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 25-04-2020 à 13:41:53    

Ici il fallait coder en HTML.
 
Point barre.

Reply

Marsh Posté le 25-04-2020 à 14:19:06    

Le HTML étant un langage statique de structuration de l'information, tu risques pas de coder un jeu (dynamique donc) avec :/ Il te faut soit un langage côté serveur (PHP, Java, .net... voire un vieux CGI) soit un langage côté client comme le Javascript.
Dans les 2 cas, pas besoin d'un formulaire 8x8 champs.  
Côté client, une bête variable Array stockera la position des pièces et un clic de départ/un clic d'arrivée permettra de mettre à jour l'état du jeu (en mémoire et à l'affichage).
Côté serveur, tu as le choix entre un fichier, une variable de session ou en mode bourrin, une BD pour stocker l'état du jeu. Un clic de départ/un clic d'arrivée déclenche une requête Ajax pour envoyer en GET au serveur le coup joué. Ca met à jour l'état de la partie en mémoire. Le serveur renvoie qu'il a bien pris en compte le coup joué et indique le coup qu'il joue si y'a un des 2 joueurs qui est une IA. Le client, via Javascript, met à jour l'affichage.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 25-04-2020 à 14:26:14    

Non, mais laisse tomber.
Tu sais pas lire le titre.

Reply

Marsh Posté le 25-04-2020 à 14:27:11    

Avec un Get. Et ben ça alors....
 
BREF.

Reply

Marsh Posté le 25-04-2020 à 15:10:44    

Faudrait peut-être annoncer qu'elle couleur on joue...
J'ai joué les noirs au premier tour (pour éviter qu'on me dise que je suis raciste :o ), je bouge mon pion, ça mouline pendant 30 secondes et là ça m'affiche mon pion correctement déplacé mais avec en plus mon fou qui c'est aussi déplacé par intervention divine.
J'en conclue que l'IA joue les noirs, et que ça ne la dérange pas qu'on bouge ses pions. :pt1cable:


Message édité par MaybeEijOrNot le 25-04-2020 à 15:11:30

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 25-04-2020 à 16:57:23    

exact. mdr.

Reply

Marsh Posté le 25-04-2020 à 16:58:11    

On joue les blanc.
Proposer le choix était quelque chose de beaucoup plus complexe en l'état.

Reply

Marsh Posté le 25-04-2020 à 18:25:10    

à la même adresse vous avez :
 
partie à 1 joueur niveau 0 : chess-0.html
partie à 0 joueur niveau 0 : chess-a0.html
 
Vous pouvez constater les bugs. Mais c'est un autre sujet.
 
 
Au revoir et merci.

Reply

Marsh Posté le 26-04-2020 à 12:26:40    


 
 
 
Sérieux t'es lourdingue... Rufo a totalement raison, et n'importe qui ici te dira la même chose : le HTML est un langage de présentation uniquement.
Pourquoi tu postes des messages pour demander de l'aide si tu envoies chier ceux qui cherchent à t'aider ? Tu veux qu'on te marque ce que tu veux lire ? En quoi ça t'aidera à progresser ?


---------------
J'ai un string dans l'array (Paris Hilton)
Reply

Marsh Posté le 26-04-2020 à 12:53:42    

A ouais.
 
Merci quand même rufo.
Ca peut servir,
 
Harko, je peux rien pour vous.

Reply

Marsh Posté le 26-04-2020 à 13:42:27    


Ca fait plus de 10 ans que je l'ai compris [:petrus75]


---------------
J'ai un string dans l'array (Paris Hilton)
Reply

Marsh Posté le 26-04-2020 à 15:36:40    

Il faut revoir l'IA :  
1 e2-e4 , e7-e6  
2 d2-d4 , Dd8-g5 ??
3 Cg1-f3, Cb8-c6 ??
Sacrifice de dame au 3ème coup !

Reply

Marsh Posté le 26-04-2020 à 16:29:36    

Trap D a écrit :

Il faut revoir l'IA :  
1 e2-e4 , e7-e6  
2 d2-d4 , Dd8-g5 ??
3 Cg1-f3, Cb8-c6 ??
Sacrifice de dame au 3ème coup !


 
 
Niveau zéro ou niveau 2 ?
 
Niveau zéro la réponse est immediate.
 
Mais c'est vrai qu'il est décevant.  [:aelenia]

Reply

Marsh Posté le 26-04-2020 à 17:10:55    

Je pense que de toute façon, il faut que le programme connaisse au moins 5 mouvements  (et encore) des débuts de partie les plus courants, (et y'en a un paquet ...) car sinon, ça conduira à la catastrophe.

Reply

Marsh Posté le 26-04-2020 à 17:28:52    

Ben en même temps, c'est Jovalise qui programme une IA : tu t'attendais à quoi :??: Avec un code d'IA aussi court, tu peux pas faire de miracles... :/ Et bien entendu, le code est toujours autant commenté.
 
Jovalise, pour ta gouverne, tu peux aussi envoyer les infos d'un formulaire au serveur en POST et pas uniquement en GET :o


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 26-04-2020 à 17:33:42    

Harkonnen a écrit :


 
 
 
Sérieux t'es lourdingue... Rufo a totalement raison, et n'importe qui ici te dira la même chose : le HTML est un langage de présentation uniquement.
Pourquoi tu postes des messages pour demander de l'aide si tu envoies chier ceux qui cherchent à t'aider ? Tu veux qu'on te marque ce que tu veux lire ? En quoi ça t'aidera à progresser ?


 
 
J'adore, tu lui dis de laisser rufo tranquille, il s'excuse vaguement auprès de rufo mais du coup il s'attaque à toi [:rofl]


---------------
Réalisation amplis classe D / T      Topic .Net - C# @ Prog
Reply

Marsh Posté le 26-04-2020 à 17:34:05    

En théorie si tu descend en profondeur mais pas trop tu doit pouvoir jouer.
Je suis à 2 max selon les perf de mon pc commun.
 
Faut tester minmax avant de trop s'avancer.
Il faut l'implémenter et voir ce que ça donne.
C'est complexe avec un jeu d'echec.

Reply

Marsh Posté le 26-04-2020 à 17:34:23    


J'admire ta patience et ton dévouement depuis le début de ce sujet :jap:


---------------
Réalisation amplis classe D / T      Topic .Net - C# @ Prog
Reply

Marsh Posté le 26-04-2020 à 17:36:34    

Un code bien documenté et un code autodocumenté.

Reply

Marsh Posté le 26-04-2020 à 18:23:37    

Un code doit avoir des commentaires et les variables/fonctions doivent avoir des noms parlants. C'est effectivement ce qu'on appelle un code autodocumenté. Mais ce n'est pas le cas de tes codes.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 26-04-2020 à 19:38:59    

rufo a écrit :

Un code doit avoir des commentaires et les variables/fonctions doivent avoir des noms parlants. C'est effectivement ce qu'on appelle un code autodocumenté. Mais ce n'est pas le cas de tes codes.


Mes code sont très bien. je suis noté 20/20 avec Ada.
Donc.... Ste plait evite de la ramener.

Message cité 1 fois
Message édité par Profil supprimé le 26-04-2020 à 19:39:09
Reply

Marsh Posté le 26-04-2020 à 20:16:53    

Noté par qui ?
Y'a pas un poil de commentaire dans ton code qui explique ce que tu fais. Et tu mélanges tranquille des variables en anglais (line, The_Successors, while, black... colum <- il manque un "n" ) et en français (Echiquier). Et tu noteras que mes remarques sont sur la méthode, pas sur le langage. J'ai aucun doute que tu coderais en C/C++, Java, Python, PHP... mes remarques seraient les mêmes. Depuis le début, mes interventions sur tes topics ont toujours été relatives à ton manque de méthode et de connaissances théoriques en algorithmie, mes interventions reposant à chaque fois sur des faits provenant de tes codes postés. Jamais de critique gratuite, mais toujours dans le but d'être constructif pour t'aider à progresser et te permettre de finir, peut-être enfin, un projet.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 27-04-2020 à 00:39:34    

TotalRecall a écrit :


J'adore, tu lui dis de laisser rufo tranquille, il s'excuse vaguement auprès de rufo mais du coup il s'attaque à toi [:rofl]


C'est mon coté sado maso qui ressort  [:caillace81100:2]


---------------
J'ai un string dans l'array (Paris Hilton)
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed