Construí un juego de rol en JavaScript. Usted también puede. Así es cómo.

Entonces, ¿quieres intentar hacer un juego, pero estás un poco intimidado? ¡No te preocupes, yo también lo estaba!

Tenía miedo de usar objetos, por ejemplo. Eran esta gran cosa espeluznante que guardé para más tarde. ¡Pero ahora los uso todo el tiempo!

Voy a guiarte a través de todos los pasos que seguí para construir mi juego de rol de JavaScript.

Aquí está mi juego ejecutándose en CodePen. (Tenga en cuenta que aún no está optimizado para dispositivos móviles):

Primero ,elige el punto de tu juego. ¿Es un rompecabezas? ¿Un juego de rol? ¿Un hack & slash? Muy bien, ahora piensa en las dificultades técnicas de hacerlo. Un juego de rompecabezas requeriría mucho javascript complicado. Un hack & slash necesitaría un cuidadoso equilibrio, y así sucesivamente.

Además, decida si quiere que sea un juego de navegador, un juego para dispositivos móviles o ambos (un juego "web nativo").

Por ejemplo, mi juego no puede encajar bien en la pantalla del móvil, porque el jugador tiene 24 hechizos. No es cómodo hacer clic en estos pequeños botones en una pantalla pequeña, por lo que tendría que rediseñar el juego para dispositivos móviles.

En segundo lugar , escribe todas las cosas que necesitas programar para crear el juego. Para mi fue:

  • un sistema de inventario
  • un generador de artículos
  • un sistema de estadísticas de jugador
  • un sistema de ahorro

En tercer lugar , comience a crear su juego resolviendo estos problemas uno por uno.

¿Necesitas ayuda para crear el juego?

Es mucho más fácil dividir tu juego en pequeñas tareas. No estás creando un juego, estás creando un sistema de inventario. Entonces estás creando un sistema de combate. Y así.

A menos que ya seas bueno dibujando, o quieras pasar meses o años haciéndolo bien, usa estas herramientas para crear activos que harán que tu juego se vea bien:

  • Game-Icons.net: estos iconos son divertidos y fáciles de colorear
  • Arte de juego abierto: obtén excelentes recursos de dominio público
  • Bulk Resize Photos: una gran herramienta para crear tus propios íconos pequeños
  • Generador de sprites de CSS: te ayuda a crear hojas de sprites de CSS para tus iconos

Problemas que encontré y cómo los resolví

Spritesheets

¿Planeas tener más de 20 imágenes en tu juego? Si es así, no desea crear 20 imágenes con enlaces de imágenes a cada una. Puede que no creas que 20 imágenes es tanto, pero ¿si decides agregar 50 más? Ahí es donde las hojas de sprites son útiles. Coloque algunas imágenes en ellos, copie el archivo CSS a su proyecto y simplemente agregue la clase a su elemento que corresponda con la imagen deseada.

Guardando el estado de tu juego

¿Quieres que se guarde tu juego? Bueno, puede elegir entre usar LocalStorage del navegador y almacenar cosas en un servidor. Los servidores requieren conocimientos de back-end. Si no tiene ninguno, le sugiero que utilice LocalStorage. Guarda el juego siempre que el usuario no lo elimine con alguna herramienta de limpieza. Así es como lo hice:

Básicamente, guarde todos sus datos en un objeto, luego actualice sus elementos en carga. Use JSON stringify y analícelo más tarde.

Modulariza tu código

Averigüe qué parte codificar y qué partes modularizar. Por error comencé a codificar hechizos, que se pusieron feos rápidamente. Necesitaba 24 de estas funciones, junto con 24 funciones ifCritical.

Ahora puedes preguntar, ¿cómo funciona el segundo hechizo? Tengo una función playerAttack () que usa el objeto de hechizo para hacer cosas:

  • Primero ejecuta la función de actualización de hechizos, que llama al objeto de hechizos. Luego, el hechizo toma tus estadísticas actuales y las convierte en valores como "daño" y "costo de maná".
  • Comprueba si el daño es superior a 0. Si es así, le hace daño al jefe y muestra el daño, qué hechizo lo hizo y la cantidad. También hace esto para la mayoría de los demás valores. Podrías pensar que una prueba mayor que cero es inútil, pero lo pensarás de nuevo cuando el juego diga que hiciste 0 daños y restauraste 0 maná.
  • Luego ejecuta una función personalizada, si el hechizo tiene una. Esto podría usarse para dar a los hechizos efectos especiales que no son posibles mediante nuestra función de ataque principal.

El bucle del juego

Para mí, el ciclo del juego comprueba y actualiza cosas: estadísticas del jugador, si el jugador está muerto, si el jugador acaba de subir de nivel, si un jefe está muerto, etc.

Tendrás que resolverlo tú mismo. Creo que es una buena experiencia de aprendizaje. Piense para qué y cuándo deben ejecutarse las comprobaciones y actualizaciones. Por ejemplo, con una verificación de nivel, lo configuro para que se ejecute cada 20 segundos ya que nivelar no es tan importante.

Pero también tengo un control de muerte de Boss que se ejecuta cada segundo después de que comienza la batalla. ¿Por qué? Por lo tanto, los jugadores no tienen que esperar 20 segundos para que muera un jefe.

Algunas otras cosas ni siquiera necesitan estar en un bucle. Las funciones solo se pueden llamar cuando se necesitan. Tome mi función de actualización de hechizo, por ejemplo. Solo se llama cuando un jugador usa un hechizo.

Algunas cosas que he aprendido:

  • Los objetos son buenos. De esta forma, cuando tenga que guardar datos, solo tendrá que guardar el objeto, no las 50 variables individuales.
  • Establezca siempre tiempos de espera e intervalos como variables, para que puedan borrarse más adelante, a menos que sean efectos permanentes y esté seguro de que nunca necesitará borrarlos.
  • Un archivo grande de JavaScript puede no ser una buena idea. CodePen solo permite un archivo JavaScript, pero lo ideal es que separe todo en módulos.
  • Si no le preocupa el rendimiento, puede copiar y pegar el objeto cuando sea necesario actualizarlo, sin necesidad de actualizar la mitad de los valores individualmente. Si el objeto es enorme, incluso puede definir el objeto primero como una variable como: var object; y luego compruébelo utilizando alguna otra función cuando desee que se actualice. Hice esto con mis hechizos. Cada vez que el jugador lanza un hechizo, la función updateSpell () primero define el objeto del hechizo nuevamente, calcula todo el daño y las estadísticas, y luego lanza el hechizo.

Cosas divertidas en las que me he comprometido:

  • Los costos de maná de habilidad son por nivel de jefe, porque si estuvieran en el nivel de jugador, castigaría a los jugadores por subir de nivel. Esto también hizo que los jefes de nivel superior fueran mucho más difíciles, lo que me gustó.
  • Los elementos se crean con todas las estadísticas, pero no se muestran si son 0. De esta manera, no necesito verificar si están indefinidos, y puedo evitar mostrar estadísticas si se generan como 0. ¡Doble ganancia!
  • He simplificado muchas ventajas y desventajas. Básicamente, hay un var buffStat, nerfStat, totalStat y stat. Así que las mejoras o desventajas nunca se acumulan.
  • Con los jefes, la habilidad de nerf stat en realidad no la reduce a 0. Esto es mucho más sofisticado que eso. Nerfs la estadística en 9999999, luego verifica si es menor que 0. Si es así, lo establece en 0. Entonces, si logras alcanzar un nivel en el que tienes estadísticas que están en los miles de millones, podría tener que agregar más ceros.

Lo que todo esto me ha pensado es que debería planificar un poco más adelante, incluso si solo estoy construyendo un proyecto divertido para expandir mis propias habilidades.

Además, ahora entiendo mucho mejor cómo surgen los errores: a veces no te das cuenta de todos los casos extremos en los que las cosas pueden fallar en el camino. Y ahí es cuando pican los insectos.

Errores y exploits

Este me asombró y me asustó un poco. ¡No podía creer que mi obra de arte perfecta tuviera errores!

Ok, estoy exagerando un poco. Pero subestimé la gran cantidad de cosas que podrían salir mal sin que yo me diera cuenta.

Aquí hay algunos errores y exploits que surgieron, en la parte superior de mi cabeza:

  1. Podrías cambiar los niveles de jefe mientras luchas contra un jefe y obtener mejores botines de esa manera
  2. Las barras de HP y Mana se desbordarían en algún momento
  3. Podrías atacar al jefe incluso antes de que comenzara la batalla. ¡Habla de un golpe de ventosa!
  4. El maná podría volverse negativo, lo que le impidió realizar incluso ataques básicos, que es la principal forma en que puede restaurar su maná.
  5. Las curaciones aumentaron temporalmente tu salud máxima.
  6. En realidad, no se podía hacer clic en un hechizo la mayor parte del tiempo debido a un problema de CSS
  7. Atacar mientras no estás en combate pone tus hechizos en enfriamiento infinito

Todos estos suenan horribles, ¿verdad? En un MMORPG, estas cosas serían abusadas desde el primer día y arruinarían todo.

Bueno, la buena noticia es que la mayoría de ellos se pueden arreglar fácilmente, generalmente con menos de una línea de código.

Sin embargo, otros errores me obligaron a reelaborar completamente todo el sistema. Con el sistema de hechizos, pasé de tener que escribir 3 funciones completas para cada hechizo a necesitar solo un objeto pequeño que solo toma unos segundos de edición.

Nuevamente, aquí está mi juego si quieres probarlo (ten en cuenta que no está optimizado para dispositivos móviles):

Y aquí está el código (que también es de código abierto y editable en CodePen):

RobertSkalko / LOOT-RPG-v1.0

LOOT-RPG-v1.0 - ¡Mata jefes, obtén LOOT! github.com

Tenga en cuenta que soy un principiante (solo 2 meses en la programación), por lo que algunas de mis soluciones se pueden mejorar. Sin embargo, con suerte, ¡te di al menos lo básico para comenzar!

¡Diviértete creando tu juego de Javascript!