Bonjour,
 
Je cherche un moyen simple de détecter les collisions dans un jeu que je tente de programmer.
 
Voyez le http://www.creatik.ca/chat/ (Avec Chrome, ou Firefox avec la console JS de Firebug activée, déplacez vous avec les flèches)
 
Je veux simplement que Mario ne puisse pas foncer dans les bâtiments. Ce serait simple si les batiment étaient carrés, je vérifierais avec un simple if l'emplacement de Mario. Mais comme c'est un faux-3D, je dois tester les collisions dans des angles/diagonales, et je n'ai pas la moindre idée de comment m'y prendre, excepté pixel par pixel (nul) ou par une matrice qui ferait des zones carrées (trop peu précis, nul).
 
Auriez-vous une solution simple que je pourrais envisager?
 
Merci de votre précieuse aide!

Y a t-il un moyen de détecte si un div se trouve par dessus un élément map (qui me permettrait de spécifier des zones en formes diverses, plutôt que toujours rectangulaires)?
 
Je continue de réfléchir...

Salut.
Je suis aussi en train de programmer un jeu.
Voici le résultat :
http://yarflam.web44.net/temple/zombriel.html

Les collisions sont pas carrés, carrés.

Voici l'algorithme que j'utilise :
J'utilise 4 variables pour déplacer mon personnage.
X; Y; X'; Y'.

X et Y sont stocké dans un input invisible, déterminant la place du personnage.
X' et Y' sont les mouvements associés après un mouvement.
Une fois X' et Y' calculés on soustrait avec les collisions.
Qui donne en gros :
SI (X' == 14 et Y' == 15) { X' = X; Y' = Y; }
Une fois les collisions accomplis, on modifie l'input et la position du personnage.

J'utilise un éditeur fait maison pour créer les collisions :
http://membres.multimania.fr/yarfl [...] iteur.html

Qui se présente sous cette forme :
if((ya==25)&&(xa==-10)) { xa=x;ya=y; }
if((ya==25)&&(xa==-5)) { xa=x;ya=y; }
if((ya==30)&&(xa==0)) { xa=x;ya=y; }
if((ya==30)&&(xa==5)) { xa=x;ya=y; }
if((ya==30)&&(xa==10)) { xa=x;ya=y; }
if((ya==25)&&(xa==10)) { xa=x;ya=y; }
if((ya==20)&&(xa==10)) { xa=x;ya=y; }

Je sais que tu veux éviter les carrés, mais le problème réside plutôt dans la vitesse de déplacement.
Si tu crée une collision au point (5;5) avec comme vitesse +1 ce sera moins carré que si la vitesse est +3.
Le principe de l'échelle.

Et puis look le script suivant :
http://yarflam.web44.net/temple/mapvillageun.js
A la fonction : function move_villageun(move)

Voilà ! Bonne chance. Je ne sais pas si je t'ai donné une réponse correcte.

Il y a trop largement moyen d'optimiser ton JS pour décoration.  
Tu utiliserais plutôt une map, et ensuite tu bouclerais dessus, ça ferai moins lourd au chargement.
 
Car ton jeu est LOURD
 
mais il y a beaucoup de travail mais beaucoup d'optimisations possibles dans tous les sens

Merci Gatsu35, c'est vrai qu'il est lourd mon jeu.
Si tu as une idée pour la cinématique, je suis preneur.
Et effectivement mon JS est surchargé. Je vais résoudre ce problème.

Moi j'utiliserai 2 matrice :
 
1 pour les div et image
et une de ce genre la  
 

0 pas d'objet, 1 objet (ca bloque) ...
 
Mais vu comment t'es parti avec un background ne representant qu'une image, ta pas compris (selon moi) comment marche un jeu en 2D ISO ...
 
Tu devrais aller voir comment on code ca avec un systeme de "tile", bonne chance

@GordonF_69 :
Ah oui, j'ai oublié de lui parler de ça.
Une seul image c'est trop long à charger.
J'exclus notamment la réponse de Gatsu35 :

 
Le système de tileset est très simple seozus :
Tu crées d'abord un cadre pour ton jeu, centré (avec les %).
Ensuite, tu inclus des div : (J'utilise 3 couches comme dans RPG MAKER XP => pixa, pixb, pixc + n°)
 
<div style="position: absolute; top: 0px; left: 0px; height: 32px; width: 32px; background: url(&quot;Data/0.png&quot; ) no-repeat scroll 0px 0px transparent;" id="pixa0"></div>
 
Position:absolute permet de le superposer sur le fond (sinon ça ne se glisse pas en tableau).
background: url(&quot;Data/0.png&quot; ) no-repeat scroll 0px 0px transparent; permet d'indiquer la position de l'image dans le tileset.
height: 32px; width: 32px; c'est la taille de l'image; j'utilise des tilesets de RPG MAKER; ils sont de 32x32 pixels.
 
Le tableau de @GordonF_69 schématise très bien le but à atteindre; seulement y a des défauts = l'inclure dans un textarea c'est trop long; trop complexe.
 
Pour ce qui est des 3 couches; la 1ère et la 2ème sont en dessous du héro et la 3ème au dessus.
La 1ère couche pour la terre (l'herbe, falaise, plage ... => type de terrain).
La 2ème couche pour les éléments naturels (item, pnj, fleurs, champignons, monstres ...)
La 3ème couche pour élevé des éléments (maisons, arbres ... gratte-ciel pour les jeux futuristes ...)
 
Et la 4ème couche / à inclure si besoins est => le temps (la pluie, la neige, la nuit, le brouillard ...) & les événements de cinématique.  
 
Tuto / utilitaire :
http://www.megaupload.com/?d=A2JYY4S3 (fait maison, c'est un exemple concret // c'est vieux, j'ai fait mieux depuis le temps).
http://websitetips.com/articles/css/sprites/ (Tuto simple -- sinon cherche sur internet)
http://www.rpg-maker.fr/ (Pour comprendre ce qu'est un tilesets / sprite)
http://spritegen.website-performance.org/ (utilitaire pour créer un sprite)
http://css-sprit.es/ (utilitaire pour découpé un sprite // peut conseillé en faite -- tu le fais en code)
 
@++