CRÉATION D'ÉCHIQUIER AVEC JAVASCRIPT
cs_Kimjoa
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014
-
19 nov. 2008 à 21:25
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 - 26 nov. 2008 à 01:54
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 - 26 nov. 2008 à 01:54
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/48490-creation-d-echiquier-avec-javascript
https://codes-sources.commentcamarche.net/source/48490-creation-d-echiquier-avec-javascript
26 nov. 2008 à 01:54
25 nov. 2008 à 19:36
25 nov. 2008 à 19:09
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.
25 nov. 2008 à 18:33
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 .
25 nov. 2008 à 11:15
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 ^^
25 nov. 2008 à 10:49
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+
25 nov. 2008 à 00:25
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>
ici
<script type="text/javascript">
Drag.init(document.getElementById('debug'),document.getElementById('titi'));
Drag.init(document.getElementById('test'));
</script>
</html>
24 nov. 2008 à 19:03
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.
24 nov. 2008 à 18:19
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
24 nov. 2008 à 16:06
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
23 nov. 2008 à 18:34
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 ^^
20 nov. 2008 à 17:52
Merci de votre attention,
CodeurleGeek
19 nov. 2008 à 23:05
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)
19 nov. 2008 à 22:20
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.
19 nov. 2008 à 21:28
19 nov. 2008 à 21:25
a +