CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

begin process at 2009 07 06 01:54:24

SILVERLIGHT 3 : COMMUNICATION ET MULTICAST par KooKiz

[PERSO] DéCOUVERTES ESTIVALES : LINUX (PART I) par FREMYCOMPANY

[REFACTORING] RESHARPER POUR VISUAL STUDIO 2010 (PREVIEW) par tja

[REFACTORING] ANALYSER VOS EXCEPTIONS AVEC RESHARPER EXCEPTIONAL par tja

SHAREPOINT 2007 : PATTERNS & PRACTICES SHAREPOINT GUIDANCE par phil

RE : BOUCLES ! par cedcyr

BOUCLES ! par cedcyr

CODE POUR EDITEUR DE TEXTE AVEC PRISE EN CHARGE DU COPIER/COLLER GARDANT LA MISE EN FORME par lolhangman

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par Bul3

+ de logiciels à télécharger

1 464 966 membres
20 nouveaux aujourd'hui
15 046 membres club

Trouver une ressource

Trouvez une ressource parmi 40 095 codes, 1 303 045 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

CRÉATION D'ÉCHIQUIER AVEC JAVASCRIPT

Information sur la source

Catégorie :Jeux Classé sous : création échiquier, échiquier javascript, création javascript, échiquier créer, créer javascript Niveau : Débutant Date de création : 19/11/2008 Date de mise à jour : 20/11/2008 17:57:37 Vu : 1 160

Auteur : CodeurleGeek

Ecrire un message privé

Note :

5,50 / 10

Commentaire sur cette source (16)

Ajouter un commentaire et/ou une note

Description

Je galère actuellement pour créer un jeu d'échec, alors j'ai décidé d'aider un peu les gens qui seraient dans le même cas que moi.
Voici un code qui sert juste à créer un échiquier (8 cases sur 8).

Source

<head>
<style type="text/css">
<!--
.caseBlanc, .caseBrun{
height : 35px;
width : 35px;
border : 1px solid #000000;
}
.caseBrun {
background-color: brown;
}
.caseBlanc {
background-color: #ffffff;
}
-->
</style>
<body>
<script language="JavaScript">
var nombre=1;
document.write('<table>');
for(var l=1; l<9; l++) // CREER 8 LIGNES
{
document.write('<tr>');
for(var c=1; c<9; c++) // CREER 8 CASES PAR LIGNE
{
if (nombre/2 == Math.round(nombre/2)) // classe CHANGE UNE CASE SUR DEUX (SI NOMBRE EST PAIR OU PAS)
{var classe="caseBrun"}
else
{var classe="caseBlanc"}
document.write('<td><a onMouseOver="position('+l+','+c+')"><div id="'+l+'|'+c+'" class="'+classe+'"></div></a></td>'); // CREATION DES CASES (position('+l+','+c+') EST COMPLETE PAR UNE FONCTION DE LOCALISATION DES CASES DANS UN AUTRE SCRIPT)
nombre++;
}
nombre++;
document.write('</tr>');
}
document.write('</table>');
</script>
</body>

<head>

<style type="text/css">
<!--
.caseBlanc, .caseBrun{
height : 35px;
width : 35px;
border : 1px solid #000000;
}
.caseBrun {
background-color: brown;
}
.caseBlanc {
background-color: #ffffff;
}
-->
</style>

<body>
    
<script language="JavaScript">
var nombre=1;
document.write('<table>');
for(var l=1; l<9; l++) // CREER 8 LIGNES
{
document.write('<tr>');
for(var c=1; c<9; c++) // CREER 8 CASES PAR LIGNE
{
    
if (nombre/2 == Math.round(nombre/2)) // classe CHANGE UNE CASE SUR DEUX (SI NOMBRE EST PAIR OU PAS)
{var classe="caseBrun"}
else
{var classe="caseBlanc"}
    
document.write('<td><a onMouseOver="position('+l+','+c+')"><div id="'+l+'|'+c+'" class="'+classe+'"></div></a></td>'); // CREATION DES CASES (position('+l+','+c+') EST COMPLETE PAR UNE FONCTION DE LOCALISATION DES CASES DANS UN AUTRE SCRIPT)
nombre++;
}
nombre++;
document.write('</tr>');
}
document.write('</table>');
    
</script>
    
</body>

Conclusion

Ceci n'est pas un script pou créer un jeu d'échec entier, mais juste l'échiquier. Si vous pouvez m'aider pour une fonction de déplacement
des pièces, je suis preneur ! Dites-le moi par message privé !

Historique

19 novembre 2008 18:10:28 :: Je rajoute les commentaires.
20 novembre 2008 17:57:37 :: Modifications suite au post de Arto_8000 (Merci à lui !).

Sources du même auteur

API GOOGLE TRADUCTION

COOKIES EN JAVASCRIPT

CARTE GOOGLE MAPS

LES TOURS DE HANOÏ

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT

Toutes les sources de CodeurleGeek

Sources de la même categorie

ATTRAPE MOI SI TU PEUT par kazma

LE CÉLÈBRE JEU SNACK par lesnouesremy

QUIZZ MASTER : 2000 QUESTIONS POUR TESTER VOTRE CULTURE par amrounix

BILLARD EN JAVASCRIPT C'EST POSSIBLE ! par amrounix

COLLISION V1.2 : GESTION DE CHOCS par amrounix

Toutes les sources de la catégorie Jeux

Commentaires et avis

Commentaire de Kimjoa le 19/11/2008 21:25:36

salut, évite le document.write, cette fonction ne permet pas de passé une fonction, elle réécrit la page entierrement, utilise plutot innerHTML, voir le DOM.
a +

Commentaire de Kimjoa le 19/11/2008 21:28:41

je me suis un peu mal exprimé :) , document.write est une fonction que si on utilise dans une autre fonction après le chargement du DOM, modifie complétement la page voila bye

Commentaire de Arto_8000 le 19/11/2008 22:20:08

Pour l'alternance entre les case, on utilise habituellement le modulo. Aussi la variable nombre n'est pas nécessairement utile, car on peut tout simplement utiliser le numéro de la ligne et de la colonne.

if ((l+c)% 2 == 0) {
   [...]
}

Aussi pour le style des cases, utiliser des css aurait permis d'aléger le code. Ainsi tu mets l'attribut "class" à "caseBlanc" ou "caseBrun" en alternance pour chaque case et après pour le css :

.caseBlanc, .caseBrun{
    height : 35px;
    width : 35px;
    border : 1px solid #000000;
}

.caseBrun {
    background-color: brown;
}

.caseBlanc {
    background-color: #ffffff;
}

Tant qu'à moi c'est plus visuelle et plus facile à modifier par la suite.

Commentaire de PetoleTeam le 19/11/2008 23:05:05

Bonjour,
pour faire une rotation autour de 8 on peut également utiliser l'opérateur & (AND)

for( var i=0; i < 32; i++)
document.write( (i & 7) +" - ");

pour le % 2 (MODULO 2) on peut utiliser l'astuce

var k = 1;
for( var i = 0; i < 32; i++)
document.write( (k = 1-k) +"-");

et comme le dit Kimjoa le document.write est à éviter autant que faire ce peut...
;O)

Commentaire de CodeurleGeek le 20/11/2008 17:52:53

Je vous remercie de vos réponses et de vos conseils, pouvez-vous mettre quand même une note, par principe ?
Merci de votre attention,

CodeurleGeek

Commentaire de mickaelpfr le 23/11/2008 18:34:05 1/10

la note version objective ??? 1 et encore ....
cette source n'apporte absolument rien que ce sois au niveau pédagogique ou autre ...

tu as eu une soucis que tu as résolu par toi même soit , tu veux en faire profiter les autres soit , mais cette source n'apprend rien a quiconque désolé

ps : mes excuses si certain y perçoive du mépris ^^

Commentaire de CodeurleGeek le 24/11/2008 16:06:02

MICKAELPFR : j'ai trois choses à te dire :

1) Quand comme toi, on a rien à dire, on se tait !
2) Tu n'es pas le centre du monde, si cette source ne t'as rien apporté, ce n'est pas forcément le cas de tout le monde.
3) J'essaye moi aussi d'être objectif, mais je ne trouve rien d'intelligent dans ta réponse.

=> Si tu n'as rien a faire mis à part dénigrer les gens, passe ton chemin.

Cordialement,
CodeurleGeek

Commentaire de mickaelpfr le 24/11/2008 18:19:00

Droit de réponse effective :)
effectivement mon commentaire n'était pas constructif car je ne t'ai pas donnée de méthode particulière pour te dire en quoi ta source était inintéressante :).
je ne suis pas le centre du monde ? on m'aurait mentis ?
tu demandais a mettre une note je t'en es mis une en argumentant pourquoi je te mettais cette note , tu aurais été sur un forum pour demandé de l'aide , je t'aurais volontier aidé et t'expliquer comment réaliser ta source d'une manière plus simple et pt plus fonctionnelle ....

comme tu peux le voir je ne fais pas que dénigrer les gens j'ai également posté quelques sources :)

je te l'ai dis ne vois aucun mépris dans mes propos mais plutôt une remarque PERSONNELLE concernant ta source :)

Cordialement

Commentaire de PetoleTeam le 24/11/2008 19:03:09 10/10

Bonjour,
J'aurais tendance à dire que tu as donné le bâton pour te faire battre.
En effet le but du dépôt de source est de faire partager avant toutes autres choses, si une note arrive, tant mieux surtout si elle est bonne, mais cela doit rester accessoire.

En ce qui me concerne je ne note pas les sources, même par principe, attendu que cela est très subjectif.

Il faudrait prendre en compte, la clarté du code, sa maintenance, sa lisibilité, sa réutilisabilité, ses commentaires, sa concision, son optimisation, j'en oubli et non des moindres, mais pour la plupart de ces critères il y a une très forte subjectivité.

Quant à l'intérêt il va de soit qu'il est important mais à mes yeux ce n'est pas le plus important car on trouvera toujours quelqu'un qui le trouvera à son goût.

Les notes ne sont que le reflet de celui qui la donne et ce à un moment donné.

Donc il est inutile de réclamer une note à tout prix, attaches toi plutôt à améliorer sans cesse ta façon de coder, à observer les sources qui te paraissent bien faites, encore de la subjectivité, pour en retirer le meilleur et te permettre ainsi de progresser.

Je te mets quand même 10/10 pour rééquilibrer ta note, excuses moi mickaelpfr, encore une preuve, s'il en fallait, quelle signifie peu.

;0)

PS:
pour ton problème de déplacement vois du coté des DRAG and DROP.

Commentaire de mickaelpfr le 25/11/2008 00:25:01

aucune soucis petoleteam ;)

et comme je suis bon joueur je fournis même le code du drag and drop avec exemple ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.Draggable{
border:1px solid #666;
background-color:#4C9294;
}
.inDrag{
border:2px dashed #ED3C12;
background-color:#4395BC;
}
</style>
<script type="text/javascript">
var Drag = {

MyObj : null,
MyObjToLimit : null,

init : function(o,MyObjToLimit)
{
Drag.MyObj = o ;
//Sauvegarde de la classe d'origine de l'objet
Drag.MyObj.MyClassName = o.className;
//On vérifit si l'objet est limité a un autre objet
Drag.MyObj.MyObjToLimit = (MyObjToLimit != null) ? MyObjToLimit:null;
//On assigne la méthode au click de la souris sur l'MyObjet
Drag.MyObj.onmousedown = Drag.start;

//Si l'élément n'as pas de propriété let et top on lui en assigne par défault
if (isNaN(parseInt(Drag.MyObj.style.left  ))) Drag.MyObj.style.left   = "0px";
if (isNaN(parseInt(Drag.MyObj.style.top   ))) Drag.MyObj.style.top    = "0px";

//Si l'on doit limiter le déplacement a une zone on calcul les points
if(Drag.MyObj.MyObjToLimit){
Drag.MyObj.minLeft = 0;
Drag.MyObj.maxRight = Drag.MyObj.minLeft + Drag.MyObj.MyObjToLimit.offsetWidth ;
Drag.MyObj.minTop = 0;
Drag.MyObj.maxBottom = Drag.MyObj.minTop+Drag.MyObj.MyObjToLimit.offsetHeight;
}

},

start : function(e)
{
Drag.MyObj = this;
//On récupère l'évènement , bug sous ie on doit redéclarer l'évènement
e = Drag.GetEvent(e);
//On affecte la classe InDrag
Drag.MyObj.className = "inDrag";
//On récupère l'endroit ou se trouve la souris par rapport a l'objet clické
Drag.MyObj.ecartX = e.clientX - parseInt(Drag.MyObj.style.left);
Drag.MyObj.ecartY = e.clientY - parseInt(Drag.MyObj.style.top);
//On affecte les méthodes drag et end au évènement lié au document et non a l'MyObjet
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;

return false;
},

drag : function(e)
{
//On récupère l'évènement , bug sous ie on doit redéclarer l'évènement
e = Drag.GetEvent(e);
//Récupération de la position de la souris
var curX = e.clientX;
var curY = e.clientY;

var newPosX = curX - Drag.MyObj.ecartX;
var newPosY = curY - Drag.MyObj.ecartY;

//Si l'élément les limités a  un conteneur
if(Drag.MyObj.MyObjToLimit != null){
document.getElementById('test').innerHTML =newPosX + " ecart : " + Drag.MyObj.ecartX + " position : " + curX;
//Déplacement de l'objet
if(newPosX < (Drag.MyObj.minLeft+5)){
Drag.MyObj.style.left = Drag.MyObj.minLeft+5 + "px";
}
else if((newPosX + Drag.MyObj.offsetWidth) > (Drag.MyObj.maxRight-5)){
Drag.MyObj.style.left = Drag.MyObj.maxRight - Drag.MyObj.offsetWidth - 5 + "px";
}
else{
Drag.MyObj.style.left = newPosX + 'px';
}

if(newPosY < (Drag.MyObj.minTop+5)){
Drag.MyObj.style.top = Drag.MyObj.minTop + 5 + 'px';
}
else if((newPosY + Drag.MyObj.offsetHeight) > (Drag.MyObj.maxBottom-5)){
Drag.MyObj.style.top = Drag.MyObj.maxBottom - Drag.MyObj.offsetHeight - 5 +"px";
}
else{
Drag.MyObj.style.top = newPosY + 'px';
}
}
//Sinon déplacement normalement
else{
Drag.MyObj.style.top = newPosY + 'px';
Drag.MyObj.style.left = newPosX + 'px';
}

return false;
},

end : function()
{
//On remet la classe de l'objet
Drag.MyObj.className = Drag.MyObj.MyClassName;
//On supprime les évènements liés au déplacement :)
document.onmousemove = null;
document.onmouseup   = null;
//On détruit l'MyObjet
Drag.MyObj = null;
},

GetEvent : function(e)
{
if (!e) e = window.event;
return e;
},
findPos : function(obj){
//position x / y de l'objet
    var x = obj.offsetLeft || 0;
    var y = obj.offsetTop || 0;
//tant qu'il y a un parent, on ajoute la position de son parent
    while (obj = obj.offsetParent) {
        x += obj.offsetLeft
        y += obj.offsetTop
    }
//Ici on retour x ou y ( ou les deux dans un tableau ou un hash
    return new Array(x,y);
}
};
</script>
</head>
<body>

<div id="titi" style="width:500px;height:500px;border:1px solid #666">
<div id="debug" style="width:50px;height:50px;position:absolute" class="Draggable"> ici
</div>
</div>
<div id="test" style="width:200px;height:100px;position:absolute" class="Draggable">
</div>

<script type="text/javascript">
Drag.init(document.getElementById('debug'),document.getElementById('titi'));
Drag.init(document.getElementById('test'));
</script>
</body>
</html>

Commentaire de Kimjoa le 25/11/2008 10:49:02

salut , a vue d'oeil , ton code est utilisable que sur ff, car tu utillise e.clientX. tu ferait mieux de passer par un framework , genre prototype, pour que ton code soit portable, et puis tu ne réinventerais pas la roue ...
j'ai fais un systeme de drag http://www.javascriptfr.com/codes/WINDOWS-FAIRE-JOLIE-FENETRE_48450.aspx, tu pourrais t'en inspiré , sinon j'ai pas testé, j'ai pas le temp , mais a par ca ca a l'aire correcte a+

Commentaire de mickaelpfr le 25/11/2008 11:15:51

lol ...
code fonctionnant sur IE6/IE7/FF/SAFARI/CHROME :)

et ce n'est pas réinventer la roue d'utiliser une source de qqs ligne pour un besoins ciblé qu'un librairie complète :)
c'est comme prendre une tronçonneuse pour couper une tranche de beurre ^^

Commentaire de Kimjoa le 25/11/2008 18:33:29

ok autant pour moi, event.clientX n'est pas compatible netscape , mais l'est bien pour ie.
il te reste un beug , sur la zone de drag on la dépasse facilement , tu aurais utilisé prototype tu aurais pas eu ce problème (pb de gestion des scroll je pense ).
C'est sur pour 30 ligne de code ca peux paraitre abusif, mais c'est aussi fait pour que l'on puisse réutiliser ton code. par exemple tu définit une fonction position , alors que dans bcp de site celle ci existe déja, ou encore tu bidouilles l'objet event, si j'ai deja une gestion des evenement par exemple sur un rollover je fais koi ...
D'ailleurs pk avoir mit ses fonctions dans ton espace de nom Drag??
bref ton code est très intéressant mais inutilisable, du moin dans un environnement pro, si tu veux donner des conseils à des débutants, donne en leurs des bon avec des bases solide directement, et non pas les lancé tête baisser dans les problèmes de compatibilité inter navigateur, ou de gestion de position indispensable , mais dont meme un qqu d'un bon niveau comme toi n'assimile pas tout , ... tu aura vite fait de leur faire changer de route .

Commentaire de Arto_8000 le 25/11/2008 19:09:11

Personnelle, je ne suis pas pour l'utilisation de framework du genre prototype, parce que c'est relativement lourd et que l'utilitÃ© est limitÃ© pour des petits scripts. On peut faire des scripts portables et rÃ©Ã©tulisable sans nÃ©cessairement passer par une librairie qui peut atteindre 1 mo (que tous les visiteurs doivent tÃ©lÃ©charger)

Pour le cÃ´tÃ© rÃ©Ã©utilisable, je dirai que Ã§a peut mÃªme devenir un handicap si l'on veut avoir un script qui fonctionne avec un framework et un autre script qui fonctionne sur un autre framework. Deux framework en mÃªme temps Ã§a mets le bordel assez vite dans le code. Aussi, un code fait avec un framework n'est pas nÃ©cessairement facilement rÃ©utilisable cela veut seulement dire qu'il a besoin des ces librairies pour fonctionner.

Tant qu'Ã moi, la vÃ©ritable utilitÃ© de ces frameworks se trouve dans le fait que sur de gros projet, on Ã©conomise beaucoup de temps pour coder puisque le soucis de compatibilitÃ© est enlevÃ© et que le code est plus court et simple Ã comprendre.

Netscape ... juste Ã entendre ce mot on se croierait dans le temps des dinausores. Si tu regardes sur Wikipedia, tu liras que le dÃ©veloppement a Ã©tÃ© arrÃªtÃ© depuis fin 2007 et qu'il n'y a plus de support depuis mars 2008.

Commentaire de Kimjoa le 25/11/2008 19:36:39

pour netscape , c'éatit just epour préciser j'utilise jamais , pour prototype la librairie est dispo en mode compressé pour 17Ko ...

Commentaire de Arto_8000 le 26/11/2008 01:54:26

Si tu peux faire un script qui prend 2ko tu économises quand même 15ko par visiteur unique, ce qui peut représenter plusieurs go de bande passante en moins. Aussi, en période de pointe, pour un site le fait d'avoir des pages plus légère permet aussi d'assurer une meilleur connexion aux utilisateurs.