HTML Carte personnalisée - Zoom et point d'intérêt

Question

J'ai vraiment voulu faire une carte (pour un jeu). Je voulais ajouter des points d'intrest (Clickables) et permettre aux utilisateurs de zoomer sur les pièces. Mais je n'ai aucune idée comment ou où je commencerais?

J'ai codé de simples sites HTML/PHP depuis des lustres mais j'ai toujours ignoré JS pour la plupart.

Merci

Answer 1

Afin de le faire que vous voulez la puissance de feu supplémentaire sera nécessaire parce que html/php ne sont pas tout à fait approprié pour faire des jeux. Bien que chacun d'eux puisse jouer un certain rôle en ce qui concerne l'interface utilisateur (html5) et une certaine persistance logicielle et persistance des données côté serveur (php + msql), vous devez généralement mélanger plusieurs couleurs différentes pour y parvenir. Par exemple, pour faire la carte du jeu, l'approche la plus simple et la plus efficace consiste à utiliser une matrice pour tracer tous les points d'intérêt et toutes les autres choses que vous pourriez vouloir montrer.

var map = [ 
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], 
    [1,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], 
    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], 
    [1,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1], 
    [1,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1], 
    [1,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,1], 
    [1,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1], 
    [1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], 
    [1,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1], 
    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1], 
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] 
]; 

L'exemple ci-dessus utilise des données binaires pour représenter cette idée, où 0 signifie littéralement rien là-bas et 1 signifiant autre chose (pourrait un rocher, un mur, ou quoi que ce soit.

Bien sûr, vous pouvez créer comme nombre beaucoup et symboles que vous voulez représenter beaucoup plus de choses, y compris le vôtre points d'intérêt.

pour le rendre tout à fait que vous aurez à parcourir cette matrice remplaçant chaque numéro pour son image correspondant ou sprite.

draw: function(){ 
    var self = this; 
    this.context.clearRect(0, 0, this.w, this.h); 
    this.context.fillStyle = "rgba(255,0,0,0.6)"; 
    _(this.map).each(function(row,i){ 
    _(row).each(function(tile,j){ 
     if(tile !== 0){ //if tile is not walkable 
     self.drawTile(j,i); //draw a rectangle at j,i 
     } 
    }); 
    }); 
}, 

Je vous recommande fortement d'apprendre à votre propre rythme à propos de JQuery, HTML5 pour élargir vos connaissances actuelles, car la programmation de jeux pourrait être exponentiellement compliquée sans en connaître les bases. Maintenant, en ce qui concerne les fonctions de zoom avant et arrière, j'ai trouvé un petit extrait publié ici par GOK (HTML5 Canvas: Zooming), et je parviens à l'extraire de ce fil pour le rendre plus simple pour vous de l'étudier.

Cela fonctionne plutôt bien. S'il vous plaît le chercher à:

https://jsfiddle.net/caiubyfreitas/boyr68vg/

:)