Mapa de mapa de células de mesa -- javascript campo con game camp codereview Relacionados El problema

Table cell map engine


3
vote

problema

Español

Estoy diseñando un diseño de mapa basado en células de mesa para un pequeño juego que estoy construyendo, y esperaba poder conseguir algunos punteros de limpieza o consejos de diseño para "perfeccionar" el diseño de mi motor. Básicamente, en el resultado final, caminarás por el mapa un azulejo a la vez. En cualquier baldosa visible, puede caminar hasta él, pero solo la baldosa en la que está, tendrá "acciones" (generadas al azar).

Aquí está mi diseño prototipo:

  function Map() {     this.x;     this.y; }  Map.prototype = {     move:function() {         var new_x = this.x - 1;         var new_y = this.y - 1;         Map.prototype.render(new_x, new_y);     },     render:function(p_x,p_y) {         //check for map boundaries         var max_divs = 2;         if(!p_x) p_x = 1;         if(!p_y) p_y = 1;         if(p_x >= 99) p_x--;         if(p_y >= 99) p_y--;          divs_x = max_divs + p_x;         divs_y = max_divs + p_y;         //create new table         var root = document.createElement("table");         root.id = 'root_table';         //loop coordinates and generate surrounding cells         for (var x = p_x; x <= divs_x; x++) {             var row = document.createElement("tr");             for (var y = p_y; y <= divs_y; y++) {                 var cell = document.createElement("td");                 if (x <= 0 || y <= 0 || x >= 101 || y >= 101) {                     cell.textContent = "";                 }                 else {                     this.x = x; this.y = y;                     cell.textContent = "("+this.x+","+this.y+")";                     //add event handler for the click event (move)                     cell.addEventListener("click", this.move, false);                     cell.x = x; cell.y = y;                     cell.className = 'map';                 }                 //add cell to row                 row.appendChild(cell);             }             //add row to table             root.appendChild(row);         }         var main = document.getElementById("container");         var old_table = document.getElementById('root_table')         if(old_table) main.removeChild(old_table);          //remove old table, add new one         main.appendChild(root);     } }  var map = new Map(); map.render();   

Y aquí hay un enlace de trabajo actual a mi mapa: zombiesssss ahhhh

Original en ingles

I'm designing a table cell based map design for a little game I'm building, and I was hoping I could get some cleanup pointers or design tips to "perfect" my engine's design. Basically, in the end result, you'll walk around the map one tile at a time. On any visible tile you can walk to it, but only the tile you're on will have "actions" (randomly generated).

Here is my prototype design:

function Map() {     this.x;     this.y; }  Map.prototype = {     move:function() {         var new_x = this.x - 1;         var new_y = this.y - 1;         Map.prototype.render(new_x, new_y);     },     render:function(p_x,p_y) {         //check for map boundaries         var max_divs = 2;         if(!p_x) p_x = 1;         if(!p_y) p_y = 1;         if(p_x >= 99) p_x--;         if(p_y >= 99) p_y--;          divs_x = max_divs + p_x;         divs_y = max_divs + p_y;         //create new table         var root = document.createElement("table");         root.id = 'root_table';         //loop coordinates and generate surrounding cells         for (var x = p_x; x <= divs_x; x++) {             var row = document.createElement("tr");             for (var y = p_y; y <= divs_y; y++) {                 var cell = document.createElement("td");                 if (x <= 0 || y <= 0 || x >= 101 || y >= 101) {                     cell.textContent = "";                 }                 else {                     this.x = x; this.y = y;                     cell.textContent = "("+this.x+","+this.y+")";                     //add event handler for the click event (move)                     cell.addEventListener("click", this.move, false);                     cell.x = x; cell.y = y;                     cell.className = 'map';                 }                 //add cell to row                 row.appendChild(cell);             }             //add row to table             root.appendChild(row);         }         var main = document.getElementById("container");         var old_table = document.getElementById('root_table')         if(old_table) main.removeChild(old_table);          //remove old table, add new one         main.appendChild(root);     } }  var map = new Map(); map.render(); 

And here is a current working link to my map: zombiesss ahhhh

     

Lista de respuestas

4
 
vote

Me temo que su código es muy difícil de entender. Parte del problema es su nombramiento de variables: no estoy seguro de qué es exactamente p_x y lo que distingue del 9988776665544331 Eso es parte del Map Objeto, por ejemplo. También no ayuda que sus comentarios simplemente describa el comportamiento de las líneas de código completamente obvias, pero no describen ninguno de los aspectos poco claros de su código, por ejemplo, por lo que está haciendo lo que está haciendo.

a comentarios más específicos, esta línea de código es confusa:

  Map.prototype.render(new_x, new_y);   

¿Hay alguna razón por la que no está usando this.render(new_x, new_y) aquí, pero en su lugar llamando al método directamente en el objeto prototipo? Si es así, sería mejor explicárselo con un comentario, ya que este es un comportamiento bastante inusual. Además, ¿qué son new_x y new_y , y por qué se calculan en la forma en que son? Por lo que puedo ver, Map.x y Map.y nunca se establecen en nada que tenga algún significado particularmente útil.

En su bucle interno en el método render 99887766555443310 x1 , pero los valores almacenados aquí nunca se leen por código fuera del método, porque se sobrescriben por la próxima iteración del bucle antes de que cualquier otra cosa pueda tocarla. No está claro por qué está haciendo esto, pero en general sería mejor actualizarlos una vez, y usar variables locales cuando esté calculando los valores para usar solo dentro de un solo método.

Tiene una serie de valores en su código que aparentemente están relacionados, es decir, 99 y 101 usados ​​en dos lugares diferentes. Puede ser mejor usar una variable para almacenar uno de estos valores (creo que 100 celdas es el tamaño de su mapa) y derive uno del otro según sea necesario.

Actualización después de la aclaración en los comentarios

TENER x2 SER PARTE DEL OBJETIVO x3 Cuando no se llama en ese contexto es confuso. También es poco probable que se refiera a x4 sea lo que desea hacer, ya que básicamente evita que tenga más de un 99887766655443315 , negando así un beneficio clave de usar objetos en todos.

Así es como lo manejaría: no declararía el manejador de eventos como una función separada, sino que lo declaro en línea cuando establezca el manejador de eventos. También me aseguraría de que tuviera una variable en el alcance que se refiere al objeto 99887766655443316 , por lo que no es necesario acceder al prototipo. Luego, me volvería a llamar a una función de manejo de eventos que en realidad es correctamente parte del objeto MAP. Esto es lo que podría parecer:

En el bucle interno del x7 Función:

  x8  

y el nuevo x9 FUNCIÓN:

  Map0  
 

I'm afraid your code is very hard to understand. Part of the problem is your variable naming: I'm not sure what exactly p_x is and what distinguishes it from the x that's part of the Map object, for example. It also doesn't help that your comments mostly just describe the behaviour of entirely obvious single lines of code but don't describe any of the unclear aspects of your code, for instance why it is doing what it is doing.

On to more specific comments, this line of code is confusing:

Map.prototype.render(new_x, new_y); 

Is there a reason you aren't using this.render(new_x, new_y) here, but instead calling the method directly on the prototype object? If so, it would be best to explain it with a comment, as this is quite unusual behaviour. Also, what are new_x and new_y, and why are they calculated in the way they are? As far as I can see, Map.x and Map.y are never set to anything that has any particularly useful meaning.

In your inner loop in the render method, you repeatedly update this.x and this.y, but the values stored here are never read by code outside of the method, because they are overwritten by the next iteration of the loop before anything else can touch it. It is unclear why you are doing this, but generally it would be better to only update them once, and to use local variables when you are calculating values for use only within a single method.

You have a number of values in your code that are seemingly related, i.e. 99 and 101 used in two different places. It may be best to use a variable to store one of these values (I think 100 cells is the size of your map?) and derive one from the other as necessary.

Update after clarification in comments

Having move be part of the Map object when it isn't called in that context is confusing. Also referring to Map.prototype is unlikely to be what you want to do, as it basically prevents you from ever having more than one Map, thus negating a key benefit of using objects at all.

Here's how I would handle it: I wouldn't declare the event handler as a separate function at all, but instead declare it inline when I set the event handler. I would also make sure it had a variable in scope that refers to the Map object, so it doesn't need to access the prototype. Then I'd have it call back to an event-handling function that's actually properly part of the Map object. Here's what that might look like:

in the inner loop of the render function:

                var map = this;                 cell.addEventListener("click", function () {                      map.cellClicked (this);                 }, false);                 cell.x = x; cell.y = y; 

and the new cellClicked function:

Map.prototype = {    cellClicked: function (cell) {       this.render (cell.x - 1, cell.y - 1);    }, 
 
 
     
     
1
 
vote

Creo que lo estás haciendo mal.

Parece una sobremejne masiva para volver a generar una tabla y adjuntar oyentes cada vez que se mueve, mientras que simplemente podría actualizar el 99887766655443321 de las celdas.

Si tuvo una tabla HTML como esta:

  Map2  

Luego, su renovación de render podría ser tan simple como

  Map3  

¿Dónde Map4 y Map5 representan la celda central del reproductor?

Le dejaré el manejo del evento, pero sugeriría agregar cada celda los valores del vector (así que la parte superior izquierda es (-1, -1)) y desde allí calcule el nuevo Map6 y Map7 y luego vuelva a renderizar el mapa.

 

I think you are doing it wrong.

It seems massive overkill to re-generate a table and attach listeners every time you move, while you could simply update the textContent of the cells.

If you had an HTML table like this:

<table>   <tr><td id="0,0"></td><td id="1,0"></td><td id="2,0"></td></tr>   <tr><td id="0,1"></td><td id="1,1"></td><td id="2,1"></td></tr>   <tr><td id="0,1"></td><td id="1,2"></td><td id="2,2"></td></tr> </table> 

Then your render routine could be as simple as

render:function() {    var viewRow, viewColumn, element;    //Loop over view and update text content    for (viewRow = 0; viewRow < this.viewRows; viewRow++) {      for (viewColumn = 0; viewColumn < this.viewCols; viewColumn++) {        element = document.getElementById( viewColumn + ',' + viewRow )        element.textContent = ( viewColumn + this.col - 1 ) + ',' + ( viewRow + this.row - 1 );      }    } } 

Where this.row and this.col represent the center cell the player is on.

I will leave the event handling to you, but I would suggest to add each cell the vector values ( so top left is (-1,-1 ) ) and from there calculate the new this.row and this.col and then re-render the map.

 
 

Relacionados problema

6  Sistema de eventos personalizado en C #  ( Custom event system in c ) 
Actualmente estoy escribiendo un juego y quiero codificar todo lo que sucede (GameObject se ha movido, HP cambió, fue creado / destruido, se ha creado / perdi...

5  Mouselistener Lag en el juego de azulejos de piano  ( Mouselistener lag in piano tiles game ) 
Estaba intentando escribir mi propia versión simple de la aplicación de juegos de piano azulejos en Java, así como un ejercicio divertido. gamelogic.java ...

8  IOS7 CHESSGAME UichessOarkView Design  ( Ios7 chessgame uichessboardview design ) 
He estado diseñando UichessboardView en la semejanza de UITYVIEW usando protocolos y delegados. uichessboardview.h @interface UIChessboardView : UIView...

7  Mecánica de índice para tijeras de papel de roca  ( Index mechanics for rock paper scissors ) 
Acabo de pasar por un ejemplo en línea muy fácil Creando un juego de tijeras de rock-papel, pero parecía que no era un gran uso del poder de la computación. ...

1  Piedra Papel tijeras  ( Rock paper scissors ) 
Gracias por su tiempo, soy nuevo en la programación y pasé algunos días haciendo este rock, papel y amp; Juego de tijera. ¿Qué otras mejoras posibles podrían ...

4  Atomas Clone en Python  ( Atomas clone in python ) 
Aquí está mi clon de mierda de atomas , un juego de rompecabezas donde combina pequeños átomos en otros más valiosos. 9988776655544337 ¿Hay algún códig...

5  Revisión de código para Hangman en C ++  ( Code review for hangman in c ) 
Tengo el siguiente programa C ++: autoConnect.py1 que se supone que replica visualmente el juego clásico de Hangman. ¿El código está totalmente optimiza...

5  Estructura de datos para entidades  ( Data structure for entities ) 
Estoy trabajando en un motor de componentes de la entidad-componente para juegos, que básicamente significa que una entidad es un objeto que apunta a los comp...

4  Juego de Runas: Versión 3  ( Game of runes version 3 ) 
He escrito una versión muy revisada y desarrollada de la juego de runas . Los cambios principales se enumeran: Convertir runas para usar maldiciones. ag...

6  Prototipo de javascript blackjack  ( Javascript blackjack prototype ) 
¿Cuál sería la mejor manera de organizar Blackjack en JavaScript y tal vez comience con la pizarra en blanco? Áreas específicas: Actualizando la UI Inc...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos