Soy nuevo en la programación de HTML5 / Canvas / Game, pero he estado jugando con eso después de leer un par de libros. Creo que tengo una idea bastante buena de cómo funcionan las cosas. Esta pregunta hace varias preguntas más pequeñas, pero en general es básicamente una pregunta de "enfoque estructural". No estoy esperando respuestas verbales, pero con suerte pequeños punteros aquí y allá :) Aquí hay un enlace a un Super Mario World que no se desplaza y, en la actualidad, es bastante aburrido.

Super Mario World Test

NOTA: Los controles son Izquierda / Derecha y Barra espaciadora para saltar. Esto solo está configurado para Firefox ahora que estoy aprendiendo.

¿Hice algo mal en este punto?

Actualmente me he centrado en cómo Mario corre y salta, y creo que lo he conseguido bastante bien. La caja de monedas no hace nada y el fondo es solo una imagen cargada para apariencias. Aquí está mi enfoque, por favor, hágamelo saber si hay algo totalmente erróneo con esto:

Permite a Mario saltar actuando en velocidades 2 Y (variables Gravedad y Salto)Permite a Mario correr ejecutando a 1 velocidad (izquierda o derecha "Fricción" + Aceleración)Sprites se utilizan y se colocan de acuerdo con la pulsación de tecla / keydownNo estoy seguro de si esto es correcto, pero estoy usando una función constructora para construir un objeto, luego dentro del ciclo de animación principal, estoy llamando a la función prototype.draw para que ese objeto actualice todas las variables y vuelva a dibujar el objeto.Estoy limpiando todo el lienzo de cada Frame.¿Debo dividir esto en algo más que una función de dibujo, como Mario.move ()?He configurado una variable GroundLevel y JumpLevel para crear 2 planos de juego. El JumpLevel está configurado para permitir controlar qué tan alto puede saltar Mario sobre la marcha. Los 2 lugares permitirían que el suelo se elevara como una colina, manteniendo el punto en el que la Gravedad anula la fuerza de salto de Mario a la misma distancia del suelo.Para mayor claridad, todo está separado en diferentes archivos JS, pero obviamente se consolidaría.Avanzando:

Ahora que he terminado de configurar la forma en que Mario se mueve (creo que hay un par de cosas menores que podría hacer, como subir y bajar setas y lanzar bolas de fuego). Creo que puedo darme cuenta de eso, pero estoy realmente perdido cuando se trata de visualizar lo siguiente y cómo HTML5 / Canvas puede manejar esto fácilmente:

Fondo de desplazamiento (he intentado configurar Ground Tiles y usar Screen Wrapping, pero eso parece causar muchos problemas desiguales ya que estaba moviendo los tiles en la dirección opuesta. Desafortunadamente, ya que estoy tratando de explicar la aceleración, esto descarté el conteo y causé brechas en el suelo. Abandoné esta idea. ¿Sería la mejor solución un DIV debajo del lienzo con una imagen de fondo grande?

Enemigos: ¿Crearía enemigos de la misma manera y ejecutaría un ciclo para la detección de colisiones en cada enemigo durante cada cuadro?

Cuadros de fondo: estoy tratando de permitir que Mario se pare en los cuadros de fondo, pero no estoy seguro de cómo abordar esto. Actualmente tengo la configuración de límites para que Mario permanezca en el lienzo, ¿continúo expandiendo estas condiciones para configurar diferentes límites según las casillas? Puedo ver que tener varias casillas en la pantalla y hacerlo de esta manera se volvería loco, especialmente si estuviera haciendo el mismo golpe de prueba para los enemigos. Sé que me estoy perdiendo algo aquí ...

Movimiento de nivel: Esto está algo relacionado. Cuando se presiona la tecla derecha, básicamente todo lo que se encuentra en el nivel debe moverse hacia la izquierda. ¿Tendría que rastrear todas las posiciones de todo lo que pudiera tocar a Mario (cajas para que él se pare y enemigos para que choque) durante cada cuadro de animación? Esto parece que sería un poco ineficiente?

¡Gracias a todos! Mantendré esto actualizado con resultados / soluciones :)