rendre une carte de tuiles en utilisant javascript

Il n'y a pas de logique là.

Si vous inspectez la source de la page, vous verrez que la dernière balise de script dans le corps, a une très vaste gamme de carreaux coordonnées.

Il n'y a pas de magie dans cet exemple qui démontre un "intelligente" du système pour comprendre comment les formes.

Maintenant, cela dit, il y a de telles choses... ...mais ils ne sont pas à distance simple.

Ce est plus simple, et plus facile à gérer, est une carte-éditeur.

---

Tuile Éditeurs

de la boîte:

Il y a beaucoup de façons de le faire... Il y a des gratuits ou à bas prix des programmes qui vous permettent de peindre des carreaux, et puis cracher XML ou JSON ou CSV ou quel que soit le programme de soutien des exportations.

Sol carrelé ( http://mapeditor.org ) en est un exemple.

Il en existe d'autres, mais en Faïence est le premier que je pouvais penser, c'est gratuit, et est en fait assez décent.

pour:

L'immédiat avantage est que vous obtenez une application qui permet de charger les tuiles d'image, et de la peinture dans les cartes.

Ces applications peuvent même en charge l'ajout de collision-couches et des entités des couches (mettre un ennemi à [2,1], un power-up à [3,5] et un "mal-joueur" déclencheur, sur la lave).

contre:
...l'inconvénient, c'est que vous avez besoin de savoir exactement comment ces fichiers sont formatés, de sorte que vous pouvez les lire dans vos moteurs de jeu.

Maintenant, les sorties de ces systèmes sont relativement standardisés... de sorte que vous pouvez brancher cette carte de données dans différents moteurs de jeu (ce qui est le point, sinon?), et tout jeu-moteurs n'utilisent pas tous des fichiers de recouvrement qui sont exactement les mêmes, la plupart des bons carreau des éditeurs de permettre à l'exportation dans de nombreux formats (certains vont vous permettre de définir votre propre format).

...donc, cela dit, l'alternative (ou vraiment, la même solution, il suffit de main), serait de créer votre propre de tuiles à l'éditeur.

BRICOLAGE

Vous pouvez créer en Toile, aussi facilement que de la création du moteur à peindre les tuiles.

La principale différence est que vous avez votre carte de carrelage (comme la tilemap .png de StarCr... euh... le "trouvés-art" à partir de l'exemple, y).

Au lieu d'une boucle dans un tableau, trouver les coordonnées de la mosaïque et de la peinture au monde-les coordonnées qui correspondent à l'indice, ce que vous voulez faire est de choisir une tuile de la carte (comme le choix d'une couleur dans MS Paint), et alors, où que vous cliquez sur (ou faire glisser), tableau qui point qui se rapporte à, et de définir cet indice sera égal à la tuile.

pour:

Le ciel est la limite, vous pouvez faire ce que vous voulez, faire rentrer n'importe quel fichier au format que vous souhaitez utiliser, et de faire gérer toutes les choses folles que vous voulez jeter à elle...

contre:

...ce qui bien sûr, signifie que vous avez à faire, vous-même, et de définir le format du fichier que vous souhaitez utiliser, et d'écrire la logique pour gérer l'ensemble de ces idées loufoques...

de base de la mise en œuvre

Alors que j'avais normalement essayer de faire de ce bien rangé, et JS-paradigme de l'amicale, qui entraînerait BEAUCOUP de code, ici.

Donc je vais essayer de désigner l'endroit où il devrait probablement être décomposé en modules distincts.

//assuming images are already loaded properly
//and have fired onload events, which you've listened for
//so that there are no surprises, when your engine tries to
//paint something that isn't there, yet


//this should all be wrapped in a module that deals with
//loading tile-maps, selecting the tile to "paint" with,
//and generating the data-format for the tile, for you to put into the array
//(or accepting plug-in data-formatters, to do so)
var selected_tile = null,
    selected_tile_map = get_tile_map(), //this would be an image with your tiles
    tile_width  = 64, //in image-pixels, not canvas/screen-pixels
    tile_height = 64, //in image-pixels, not canvas/screen-pixels

    num_tiles_x = selected_tile_map.width  / tile_width,
    num_tiles_y = selected_tile_map.height / tile_height,

    select_tile_num_from_map = function (map_px_X, map_px_Y) {
        //there are *lots* of ways to do this, but keeping it simple
        var tile_y = Math.floor(map_px_Y / tile_height), //4 = floor(280/64)
            tile_x = Math.floor(map_px_X / tile_width ),

            tile_num = tile_y * num_tiles_x + tile_x;
            //23 = 4 down * 5 per row + 3 over

        return tile_num;
    };

    //won't go into event-handling and coordinate-normalization
    selected_tile_map.onclick = function (evt) {
        //these are the coordinates of the click,
        //as they relate to the actual image at full scale
        map_x, map_y;
        selected_tile = select_tile_num_from_map(map_x, map_y);
    };

Maintenant, vous avez un système simple pour décider de la tuile a été cliqué.

Encore une fois, il y a beaucoup de moyens de ce bâtiment, et vous pouvez la rendre plus OO,

et de faire une "tuile" de la structure des données, que vous vous attendez à lire et à utiliser tout au long de votre moteur.

Droit maintenant, je suis juste de retour de la base zéro du numéro de la tuile, de la lecture de gauche à droite, de haut en bas.

Si il y a 5 carreaux par ligne, et que quelqu'un prend le premier carreau de la deuxième ligne, c'est la tuile #5.

Ensuite, pour la "peinture", vous avez juste besoin d'écouter une toile de clic, de comprendre ce que X et Y ont été,
la figure où dans le monde, et ce tableau endroit qui est égal à.

À partir de là, vous venez de vidage de la valeur de selected_tile, et c'est à ce sujet.

//this might be one long array, like I did with the tile-map and the number of the tile
//or it might be an array of arrays: each inner-array would be a "row",
//and the outer array would keep track of how many rows down you are,
//from the top of the world
var world_map = [],

    selected_coordinate = 0,

    world_tile_width  = 64, //these might be in *canvas* pixels, or "world" pixels
    world_tile_height = 64, //this is so you can scale the size of tiles,
                            //or zoom in and out of the map, etc

    world_width  = 320,
    world_height = 320,


    num_world_tiles_x = world_width  / world_tile_width,
    num_world_tiles_y = world_height / world_tile_height,

    get_map_coordinates_from_click = function (world_x, world_y) {
        var coord_x = Math.floor(world_px_x / num_world_tiles_x),
            coord_y = Math.floor(world_px_y / num_world_tiles_y),

            array_coord = coord_y * num_world_tiles_x + coord_x;

        return array_coord;
    },

    set_map_tile = function (index, tile) {
        world_map[index] = tile;
    };

    canvas.onclick = function (evt) {
        //convert screen x/y to canvas, and canvas to world
        world_px_x, world_px_y;
        selected_coordinate = get_map_coordinates_from_click(world_px_x, world_px_y);

        set_map_tile(selected_coordinate, selected_tile);
    };

Comme vous pouvez le voir, la procédure pour le faire est à peu près la même que la procédure à suivre pour faire les autres (parce que c'est -- compte tenu de x et y dans l'une de coordonner, de le convertir à une autre échelle).

La procédure de tirage des tuiles, alors, est presque à l'opposé.

Donné au monde de l'index et de tuiles nombre, le travail dans le sens inverse pour trouver le monde-x/y et tilemap-x/y.

Vous pouvez voir qu'une partie de votre code d'exemple, en tant que bien.

Ce carrelage-peinture, c'est la façon traditionnelle de faire les cartes 2d, si nous parlons de StarCraft, Zelda ou Mario Bros

Pas tous d'entre eux avait le luxe d'avoir un "peindre avec des tuiles" de l'éditeur (certains ont été par la main dans les fichiers-texte, ou encore des feuilles de calcul, pour obtenir l'espacement à droite), mais si vous charger de StarCraft ou encore WarCraft III (3D), et aller dans leurs éditeurs, une tuile-peintre, c'est exactement ce que vous obtenez, et c'est exactement la façon dont Blizzard a fait ces cartes.

ajouts

Avec le principe de base de la route, vous disposez maintenant d'autres "cartes" qui sont également nécessaires:
vous auriez besoin d'une collision-carte pour savoir lequel de ces tuiles vous pourrait/ne pouvais pas marcher sur, une entité sur la carte, pour montrer où il y a des portes, ou des power-ups ou minéraux, ou d'un ennemi-engendre, ou d'un événement déclencheurs pour les cinématiques...

Pas tous ces besoin pour fonctionner dans les mêmes coordonnées de l'espace-comme la carte du monde, mais ça pourrait aider.

Aussi, vous voudrez peut-être un plus intelligente "monde".

La possibilité d'utiliser plusieurs tuiles cartes dans un niveau, par exemple...

Et une liste déroulante dans une tuile-éditeur de swap de tuiles-cartes.

...une façon d'économiser à la fois de la tuile de l'information (et pas seulement de X/Y, mais aussi d'autres infos sur une tuile), et pour sauver le fini de la "carte" de tableau, rempli avec des tuiles.

Même une simple copie de JSON, et de le coller dans son propre fichier...

---

Procédure De Génération De

L'autre façon de le faire, de la façon dont vous l'avez suggéré plus tôt ("savoir comment connecter les rochers, herbe, etc") est appelée Procédure de Génération de.

C'est BEAUCOUP plus difficile et BEAUCOUP plus impliqués.

Des jeux comme Diablo utiliser, de sorte que vous êtes dans une autre générés aléatoirement, chaque fois que vous jouez. Warframe est un FPS qui utilise la procédure de génération de faire la même chose.

prémisse:

Fondamentalement, vous commencez avec des tuiles, et, au lieu d'une tuile étant une image, une tuile doit être un objet qui a une image et une position, mais a ÉGALEMENT une liste de choses qui sont susceptibles d'être autour d'elle.

Lorsque vous déposez un carré d'herbe, l'herbe aura une probabilité de générer plus d'herbe à côté d'elle.

L'herbe peut dire qu'il y a un risque de 10% d'eau, 20% de chance de rochers, une chance de 30% de la saleté, et 40% de chance de plus d'herbe, dans l'une des quatre directions autour d'elle.

Bien sûr, il est vraiment pas aussi simple que cela (ou peut-être, si vous vous trompez).

Alors que c'est l'idée, la partie la plus délicate de la procédure de génération est en fait en s'assurant que tout fonctionne sans casser.

contraintes

Vous ne pouvez pas, par exemple, ont la falaise, dans cet exemple, apparaissent à l'intérieur de la haute-sol. Il ne peut apparaître que là où il y a un terrain élevé au-dessus et à droite, et la basse-terre en dessous et à gauche (et l'éditeur de StarCraft fait cela automatiquement, comme vous l'avez peint). Les rampes peuvent se connecter uniquement les tuiles qui ont du sens. Vous ne pouvez pas le mur des portes, ou enveloppez-le monde dans une rivière/lac qui vous empêche de déplacer (ou pire, vous empêche d'un niveau de finition).

pros

Vraiment génial pour la longévité, si vous pouvez obtenir tous vos pathfinding et de contraintes de travail, non seulement pour les pseudo-aléatoire générant le terrain et la mise en page, mais aussi l'ennemi de placement, butin de placement, et cetera.

Les gens sont encore à jouer à Diablo II, près de 14 ans plus tard.

contre

Vraiment difficile d'obtenir le droit, quand vous êtes un homme d'équipe (qui n'a pas arriver à être un mathématicien/data-scientist dans leur temps libre).

Vraiment dommage pour garantir que les cartes sont fun/équilibré/compétition...

StarCraft n'aurait jamais utilisé à 100% aléatoire de la génération juste pour le gameplay.

Procédure de génération peut être utilisé comme une "graine".

Vous pouvez appuyer sur la touche "randomize" bouton, voir ce que vous obtenez, et ensuite modifier et corriger à partir de là, mais il y a tellement de fixation pour "l'équilibre", ou alors, de nombreux jeu-règles écrites pour limiter la propagation de l', que vous finirez par passer plus de temps à la fixation du générateur que juste la peinture d'une carte, vous-même.

Il y a quelques tutoriels là-bas, et l'apprentissage de la génétique des algorithmes, pathfinding, et cetera, sont tous d'excellentes compétences... ...buuuut, à des fins d'apprentissage pour faire de la 2D de haut en bas de vignette-jeux, sont-overkill, et plutôt quelque chose à regarder après que vous obtenez un jeu/moteur ou deux sous votre ceinture.