Proyecto final JS/jQuery - Juego shot´em´up scroll vertical/horizontal

pantocreitor

Introducción

Visto el hilo del compi Kazulu me animo a abrir un hilo con un proyecto que debo hacer para la asignatura de interfaces.
Este proyecto no es el proyecto que hay que hacer al final durante las prácticas sino un proyecto que el profesor quiere que hagamos en vez de un examen.
Voy a explicar un poco como va la cosa.

La propuesta

El tema del proyecto para toda la clase es "Juego de acción o aventura" y hay ciertas premisas a cumplir:

  • No puedo usar frameworks, se debe hacer todo con jQuery y JS tal cual.
  • En el juego el personaje del jugador debe poder moverse en cualquier dirección (al controlarse con el teclado se entiende qu eel movimiento sea en 8 direcciones)
  • El personaje no muere de un golpe, debe tener puntos o barra de vida.
  • Los enemigos también tienen barras de vida, aunque pueden morir de un golpe si son débiles.
  • El movimiento del personaje debe ser fluido.
  • Los enemigos deben atacar al personaje o dispararle, es decir, que vayan por él.
  • Aumento de dificultad por puntuación o tiempo. Ya sea que lo enemigos ataquen mas rápido, se muevan mas rápido o quiten mas vida.
  • Debe haber zonas que limiten el movimiento y que hagan contacto con el personaje o los enemigos.
  • El personaje debe poder mejorar, sea por power ups o por sistema de experiencia.

Creo que no me dejo nada mas, en caso contrario actualizaré esta lista.

Mi proyecto

Pues aplicando las condiciones anteriores la propuesta que le he pasado he pasado al profesor y me ha aprobado ha sido la de un shot´em´up de scroll vertical y horizontal:

  • Tendría límites "físicos" alrededor para que la nave no pueda salirse de la pantalla.
  • Los enemigos se generarían justo enfrente del personaje, apareciendo justo por el borde de la pantalla.
  • El personaje tiene barra de vida y cada golpe la va disminuyendo según el enemigo.
  • Varios enemigos (de 3 a 5) cada uno con un patrón de movimiento diferente que te disparan cuando te tienen en frente.
  • Enemigo final con mas vida, una vez lo matas pasas al siguiente nivel en el que los enemigos quitan mas vida y se mueven mas rápido.
  • El personaje, en este caso la nave, puede pillar power ups que le mejoran el tipo de disparo (empezamos con disparo simple y pasamos a disparo doble, se le añade diagonal, diagonal doble, etc...)
  • La vida se regenera solo al superar un nivel.

Como en el punto anterior creo que no me dejo nada atrás importante, en caso contrario actualizaré.

Empezando

El proyecto nos lo mandaron hace unos días, pero entre exámenes y esperar a que aprobasen las propuestas, hasta hoy no había nada seguro.
En estos momento me estoy tomando un break de repasar PHP, escribiendo esto y con un cuaderno dibujando un poco la idea y alguna mecánicas para ir teniendo las cosas claras, vamos, que de momento he picado cero código.
El tema importante de esta práctica es que partimos de cero, es decir, tenemos que buscarnos la vida para hacer el proyecto.

Como el compañero subiré el proyecto a Git Hub e iré comentando por aquí como va la cosa si a la gente le parece interesante.
Siendo la primera vez que hago algo de este tipo cualquier opinión es bienvenida.

6
MisKo

Me quedo por aqui a ver que tal avanzas.

Hacer una cosa así a pelo en JS no tiene que ser nada facil, así que mucho ánimo

1 1 respuesta
mikki

Pillo sitio, tiene buena pinta tu vaina.

1
_Rpv

DEP

3
B

La hostia, mira, si me dices que puedo usar algún framework o lo que sea de juegos bien. Pero a pelo con JS y Jquery....

Ánimo.

1 1 respuesta
pantocreitor

#2 #5 En principio es algo "sencillo", pero si, sin usar ningún framework se me hace cuesta arriba. Hoy ya me pondré a meterle mano y picar código.
A ver si luego pongo un par de imágenes de lo que tengo pensado hacer y monto el tema en GitHub.
Me tengo que poner también a buscar algunos assets de pixel art para la nave, enemigos, fondo y algo tipo rocas o paredes para crear los límites y obstáculos.

1 respuesta
B

#6 para assets yo siempre he utilizado https://itch.io/game-assets tirando de los free, a ver si te sirve

2 1 respuesta
pantocreitor

#7 Thanks!!! Haciendo un poco de scroll en los free ya eh encontrado 2 o 3 packs que me van a venir muy bien.

RaymaN

👏 FRAMEWORKS 👏 FRAMEWORKS 👏 FRAMEWORKS 👏 FRAMEWORKS 👏 FRAMEWORKS 👏

1 1 respuesta
pantocreitor

#9 pues hablando con el profesor me ha comentado que me dejaría usar frameworks mientras todos sean de JS, es decir, nada de llamadas a funciones con otros lenguajes y tal.

Aun con eso creo que se me facilita bastante el trabajo, así que esta tarde en el curro iré mirando a ver qué frameworks me pueden venir bien para esto.

3 respuestas
B

#10 no es un framework si no librería pero si te deja usar yo usaría:

https://p5js.org/

RaymaN

#10 mi comentario realmente es irónico xD

Ya van dos hilos donde tenéis que hacer un proyecto básico para clase y lo primero que echáis en falta es un framework. Fun fact: vais a tardar lo mismo que sin fws pero aprenderéis la mitad.

Todo esto sin entrar a valorar obviamente vuestros conocimientos, solo el nivel académico donde os encontráis.

1 respuesta
B

#10 Making of https://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/

Demo https://tympanus.net/Tutorials/TheAviator/

2 respuestas
B

#13 vaya pasada.

PD: 4554

1
pantocreitor

#12 El tema ha sido que le estaban preguntando un par de chavales de mi clase y lo que nos comentaba era eso, que no quiere que abusemos de frameworks porque quiere que aprendamos, pero que si el proyecto se nos va un poco de las manos y queremos usar un framework que nos ayude a acortar un poco los tiempos que no lo ve mal.

#13 Eso pinta brutal xD
Si puedo extrapolarlo a mi idea de juego podría salir algo bastante chulo

1 1 respuesta
Grise

#15 Gasta Three.js, que es lo que se usa en el proyecto ese y es de lo más fácil para hacer movidas gráficas en JS.

También te aviso que como no tengas fluidez te vas a querer pegar cabezazos con la pared.

2

Usuarios habituales