Création d'une map en html/css/js pour un jeu vidéo

Bonjour,

Je viens à vous car je suis actuellement en train de coder un jeu par navigateur et je me heurte à un problème. Je souhaiterais faire une carte diviser en 25 cases par 25 (un carré donc). Je vais résumer les contraintes :

• Dimension de 25 carrés par 25
• Une image par carré qui représente un type de décor (forêt, plaine, eau, ville)
• Une image en forme de pointeur qui se superpose pour indiquer la position du joueur sur un carré donné

Je ne sais pas tellement par où commencer et je ne sais pas non plus superposer deux images en css si c’est possible. Avez-vous des tuyaux pour démarrer ce chantier ?

Si vous avez besoin de plus de précisions n’hésitez pas. Il y aurai bien les balises map et area. Suis je dans la bonne voie ?

http://www.corelangs.com/css/box/ontop.html http://www.webdesigndev.com/position-one-image-image-css/ Tiens ça devrait faire ton bonheur. Par contre pour pas avoir un truc dégueulasse blanc tout ça, va falloir jouer avec le rgba ( indice : le 'a' ). J’ajoute que si tu n’as jamais fais de web, ou en tout cas pas suffisamment pour te sentir vraiment à l’aise dessus, tu devrais commencer par expérimenter hors du cadre de ton jeu. J’explicite :

• Essaie de faire bouger une image. A part
• Essaie de créer la map. A part.
• Essaie de superpositionner deux images. Ensuite ajoute cette mécanique à ta map
• Inclus la mécanique de mouvement d’images pour la seconde image, celle du curseur pointant sur le joueur. Tu verras que tu as déjà énormément de boulot rien qu’avec ça. En tout cas bonne chance dans ton projet

Shika

ah merci pour ta réponse Shikamarus_Shadows.

Si je résume ce que tu me dis de faire, c’est de passer par des div que j’empile de manière classique finalement. Pas de balise area ou map. Je ne souhaite pas faire de déplacement donc pas de mouvement.

La map doit être créé en procédurale car chaque joueur aura sa carte personnalisée.

Merci pour le tuto d’image overlap.