[devLog] Parchis ( HTML, CSS,Javascript )

MisKo #1 Mar '22

Buenas!

Pues inicio este proyecto basándome un poco en lo que usé en el anterior juego, y la idea, como bien comenta el título, es hacer un Parchis utilizando HTML, CSS y Javascript (front y back).

Funcionalidades que me gustaría implementar

Poder jugar entre 2 y 8 jugadores
- 2-4 => tablero 4 personas
- 5-6 => tablero 6 personas
- 7-8 => tablero 8 personas
Elección de nombre/avatar
Partídas públicas y privadas con un lobby de partidas publicas
Activar/Desactivar reglas de partida
- Tres 6 seguidos => última ficha a casa
- Límite de tiempo a la hora de tirar
- La partida acaba: cuando gane el primero / cuando lleguen a casa (nPlayers - 1)
Funcionalidades en la partida
- Chat de voz en la propia partida (con opción para dejar de oir a alguien)
- Chat normal de texto (con opción para dejar de leer a alguien)
- Emoticonos ( eliges uno y sale por el medio de la pantalla )
Otras funcionalidades
- Número de personas que están conectadas en ese momento

Estado actual

Actualmente no tengo nada salvo las ideas y algun concepto que he hecho en photoshop. No creo que el juego se pueda jugar hasta verano.

Algunos concepts

spoiler

Versión responsive

Con tanta info en pantalla y un tablero grande, no se muy bien como llevaría esto a un movil, así que, salvo que se me ocurra como adaptar esto, seguramente llegue como mucho a una tablet en horizontal

Tecnologías

Como he comentado, usare HTML, CSS y Javascript. El server me lo picaré a mano con NodeJS y SocketIO y el front será con Nuxt/Vue. Es posible que utilice Nuxt3, que sale una RC más pronto que tarde.

Usuarios

En el anterior juego, no había puesto nada relacionado con los usuarios (como registro y tal), simplemente elegías tu nombre/avatar y se almacenaba en el navegador para preconfigurarlo la proxima vez que entrabas.

Esta vez, la idea inicial es la misma, aunque igual tiro de AWS Serverless y AWS Cognito para gestionar usuarios en un futuro, primero que funcione y luego ya veremos

FIN

Ale, no doy más la chapa y a ver si voy haciendo cosas y poniendolo por aqui.

5

Jastro #2 Mar '22 Moderador

#1 el uno que hiciste en su dia me gustó

Habra que darle un tiento a la version parchis. Entiendo que este tipo de juegos los estas haciendo para practicar tecnologia? o tienes intencion de sacarle partido?

Ya nos echaremos unos vicios al parchis por aquí

MisKo #3 Mar '22

En su día, el uno lo hice para pegarme con sockets.io y coger soltura en temas de eventos y tiempo real.

La idea de este es seguir por ese camino pero con un poco más de idea por el anterior proyecto, ya que en el otro iba más a prueba y error ajajaj.

Además me gustaría modularizar la primera parte (usuarios, lobby, búsqueda de partidas, reglas..) para poder llevármelo a futuros juegos (tengo otro planeado tipo hundir la flota pero este va primero XD).

En el del UNO buscaba hacer esto también y al final había mucho del propio juego por el medio y no lo conseguí, a ver si con este me redimo en esa parte.

No tengo intención de sacarle partido, lo q no quita que si de repente tengo 10mil usuarios busque como hacerlo

2

Ridote #4 Mar '22

Tiene buena pinta, a favs!

MisKo #5 Jul '22

Aunque ha pasado un tiempo, sabed que sigo con esto xDDD. He estado bastante liado estos ultimos meses, pero he ido sacando tiempo de vez en cuando para tocarlo y hacer alguna cosilla.

Actualmente, he montado la primera parte de la plataforma, que se encarga de centralizar toda la información de partidas, usuarios, reglas, etc.. de los distintos juegos que vaya a agregarle posteriormente.

Plataforma actual

Básicamente, la plataforma actualmente puede:

En General

Mostrar estadísticas (gente conectada, partidas realizadas)
Guardar la información del usuario ( avatar y nick )
Mostrar una lista de partidas públicas del juego elegido
Poder crear una partida del juego elegido
- Pública o Privada
- Seleccionar el número de jugadores (dependiente del juego)
Unirse a una partida indicando su identificador (para partidas privadas)
Multi idioma
- Actualmente castellano e ingles vía deepL, no me apetecía pensar xD
Información de partidas y usuarios almacenadas en DDBB por si petara el server, que las partidas no se queden a medias.

En el lobby de una partida

Administrador

Cambiar las reglas de la partida (si las tiene)
Indicar si está listo

Usuarios normales

Indicar si están listos
Ver las reglas de la partida

Chat

En el lobby de las partidas (y en las propias partidas cuando haga los juegos), también he agregado un chat. Básicamente se pueden enviar mensajes y emoticonos predefinidos.

A lo anterior, me quedaría agregar:

Poder echar a la gente del lobby (solo admin)
Poder cambiar el admin de una partida (solo admin)
Hacer la versión responsive (no he probado a verlo en distintas resoluciones)

Estructura del Servidor

El servidor lo tengo dockerizado con varias imágenes:

DDBB (MariaDB)
Socket.IO para el chat ( express + socket.IO )
Socket.IO para la plataforma ( express + socket.IO )
Nginx para desarrollo ( NuxtJS )
Una con PHP y Nginx para producción ( Laravel )

Lo ideal hubiera sido hacerlo todo con el mismo lenguaje (ya que uso Socket.IO todo con Javascript también en el servidor), pero quería ver que tal se comportaba enlazar Socket.IO con el PHP y demás en distintas máquinas de docker, además, que estoy más comodo con PHP para la parte del servidor y base de datos, así que prueba hecha xD

Siguientes pasos

Pues cuando agregue las funcionalidades que me faltan a la plataforma, será ya el momento de ponerme a agregar juegos a la plataforma, empezando por el Parchis, que al final es de lo que va el hilo xD

La verdad que en estos meses he ido apuntando más juegos que hacer, teniendo actualmente una lista de unos 10 (6 o 7 seguramente más rapidos y faciles de implementar que el parchis), así que no descarto hacer una prueba con alguno mucho más facil que el parchis para probar la integración de la plataforma con los juegos en sí.

Pruebas

Y por último, actualmente esta plataforma la tengo subida a internet, por lo que podeis verla si quereis.

Actualmente está donde tenía el juego anterior (el UNO) y se llega a este a través de la plataforma, pero para ver las características que he mencionado, tendreis que elegir otro juego (como el parchis o el de los barcos).

Os dejo el enlace: https://pichesi.com

Fin

Pues nada, espero que el próximo post no lo escriba en 3 meses y que sea cuando vaya avanzando con el juego

Un saludo!

2

Ridote #6 Jul '22

Pero cuándo vamos a testearlo entre unos cuantos?

1 respuesta

MisKo #7 Jul '22

#6 En cuanto tenga el primer juego funcionando en la plataforma te aviso

1

MisKo #8 Jul '22

Pues ya he implementado lo de poder echar a gente de tu partida, cambiar el administrador de la partida, la version responsive (seguramente falten retoques) y algunas cosas que me he encontrado probando.

Ahora si, lo siguiente ya implementar juegos =)

1 1 respuesta

r2d2rigo #9 Jul '22 Inocente

#8 has pensado en meter bots?

1 respuesta

MisKo #10 Jul '22

#9 Pues es algo que no había contemplado en un principio ya que la mayoría de gente que llega a estas páginas suele ser con algun amigo para echar las partidas.

De todas formas le daré una vuelta, por que es algo que puede llegar a estar bien y supongo que la dificultad de implementarlo dependerá del propio juego xD

Por otro lado, como dije anteriormente, voy a implementar primero un 3 en raya para probar la plataforma

1 respuesta

r2d2rigo #11 Jul '22 Inocente

#10 si quieres que no nazca muerto yo te recomendaria muchisimo meter bots para rellenar lobbies publicos y fidelizar usuarios, que lleguen por ejemplo 4 amigos a jugar una partida de parchis va a ser la minoria.

MisKo #12 Jul '22

Pues ya teneis funcionando e juego del 3 en raya en https://pichesi.com xD

MisKo #13 Ago '22

Buenas de nuevo!

Además del 3 en raya que os puse el sábado, anoche dejé subido también el 4 en raya o conecta4

Este era el que se jugaba fisicamente

Con esos 2 en marcha, ahora me planteo si ponerme ya con el parchis o hacer alguno más antes de meterme de lleno con ese, porque creo que el parchis tardaré más que con estos juegos chorras xD

Si no me pongo directamente con el parchis, barajo hacer un dominó o el hundir la flota :\

Pues nada, a ver si me decido xD

Un saludo!

2 1 respuesta

Ridote #14 Ago '22

Si le metieras un bot para poder jugar de solipandi ganaría esto la vida

1 respuesta

MisKo #15 Ago '22

#14 Voy a darle una vuelta pq ya me lo habeis dicho 2 y creo que la estructura interna la tengo facil para montar bots.

De todas formas, en estos juegos tan faciles, meter un bot no se yo si le quitariá la gracia, no? xDD

No se, básicamente el bot va a buscar si con alguna casilla podeis ganar y os la va a bloquear y, en caso contrario, elegir alguna al azar o algo asi, tampoco quiero hacer un bot de la ostia xDD

1

Geck0 #16 Ago '22

#13 Si quieres ir más ligero dale al hundir la flota. Hablando del tema bots éste sería más aleatorio que en los otros dos juegos.

Pinta bien

MisKo #17 Ago '22

Ya tengo una primera version del parchis subida a la página. Tengo que probarla bien para encontrar bugs que seguro que alguno sale (esperemos que ninguno que rompa el juego como tal xD) y listo.

Tengo que mejorar tambien la parte visual, como el tema de los dados o cosas asi, pero con mi 0 gusto en diseño gráfico, no se q se me ocurrirá xD

Una vez lo tenga todo probado y vea que todo está funcionando como debe, haré el tablero de 6 personas y el de 8 personas.

A ver que tal se da esta semana para ir agregandole más cosas.

PD: El tema de los bots ni lo he pensado aun xD

1

MisKo #18 Ago '22

He estado dandole unas vueltas a la estructura de los archivos del server.

Actualmente tengo todo dockerizado, montando para cada cosa su propio docker y todo junto en el mismo docker compose. Esto en un principio me pareció buena idea porque básicamente tocaba todo siempre y lo reiniciaba todo al mismo tiempo y pista.

Ahora despues de varios desarrollos, donde estoy metiendo prácticamente cosas nuevas y hay "proyectos" que no toco (como el chat del lobby, el chat ingame, etc..) esta estructura no me termina de cuadrar, ya que cuando subo un cambio a producción reinicio todo completamente.

Además de lo anterior, aunque son proyectos separados como tal, actualmente lo tengo todo en el mismo GIT, cosa que pensaba que sería buena idea y lo tendría organizado, pero al final va a ser que no xD

Así que antes de seguir, voy a cambiar la estructura general de los archivos, de docker y de GIT, para tener cada cosa por separado y que hacer un deploy de algo no afecte al resto de cosas desplegadas que no cambian.

Esto es algo más de "sistemas" por decir algo, pero weno, como es un devlog, lo dejo por aqui escrito tb xD

1 1 respuesta

kidandcat #19 Ago '22 Gato Amable

#18 Si te lo montas bien, tener un mono repo es una opción viable, monorepo vs multiples repos tienen pros y contras, solo tienes que sopesarlos, no es que una opción sea peor que la otra.

En cuanto al despliegue igual, ahora te es mucho más sencillo de desplegar, si te molesta desplegar todo a la vez y que tarde lo mismo es que estas haciendo demasiados despliegues, que por otro lado llegará un momento donde se pause todo o tengas un entorno de pruebas y entonces los despliegues se reduzcan mucho. Además, como lo tienes ahora si te tienes que montar otro servidor por lo que sea, no te costará apenas nada, mientras que si te lo divides luego no va a ser un proceso sencillo.

PD: Si quieres consejos sobre como solventar algunos problemas con el mono repo, escribeme, yo curro con monorepos.

1 respuesta

MisKo #20 Ago '22

#19 Gracias por ofrecerte!

No es que realmente me tarde mucho (desde que hago commit a github hasta que está en producción funcionando no son ni 3 mins, reiniciando todos los contenedores y demás) pero soy un quejica xDD

La verdad es que no le he dado muchas vueltas al repo y tampoco le he dedicado mucho a los procesos de levantarlo en produccion por lo que estoy segurísimo de que dedicandole tiempo podría mejorar sin problema y estar 100 veces mejor optimizado, ya que yo ahora reinicio todo de golpe sin pensarlo cuando hay un push en github y poco más xD

De todas formas, ahora mismo creo que me llama más hacer multi repo, para lo que tengo actualmente ya tengo 7 dockers distintos (aunque solo un docker compose) y seguramente tenga un docker nuevo por cada juego que agregue a la plataforma (si por ejemplo agrego 7 juegos más, ya nos vamos a 14 dockers).

Es verdad que con multi repo si tengo que cambiar de servidor o algo asi llevará algo más dejarlo otra vez configurado pero es una situación que no debería darse muy a menudo (espero xD)

De todas formas, yo creo que estaría guay si explicas un poco como estructurarias esto en general y tal, a mi me parecería interesante y seguramente a alguien más le valga y no descarto en un futuro cambiar a mono repo xD

1 respuesta

carra #21 Ago '22 Vircon32

#20MisKo:
ya tengo 7 dockers distintos

Joer, no pensaba yo que hacía falta tanto para un parchís
(es coña, ya sé que hay diferentes juegos jeje)

1 respuesta

MisKo #22 Ago '22

#21 No hombre, tengo ya varias juegos y otras cosas xD

Docker para la base de datos ( MySQL )
Docker para la API ( Laravel + PHP )
Docker para el Chat ( Socket.IO )
Docker para la plataforma en general ( Socket.IO )
Docker para el juego 3 en raya ( Socket.IO )
Docker para el juego 4 en linea ( Socket.IO )
Docker para el juego Parchis ( Socket.IO )
Docker para la web como tal ( Vue / NuxtJS )

Seguramente algunos se podrían juntar y demás, pero quería tener cada cosa por separado por lo que pudiera pasar, por ejemplo, si peta de repente el de 3 en raya, que no afecte a otros juegos, o si se cae el chat, lo mismo xD

EDIT: Joder, he leido lo de la coña despues de escribirtelo xD

1 respuesta

carra #23 Ago '22 Vircon32

#22MisKo:
EDIT: Joder, he leido lo de la coña despues de escribirtelo xD

Jeje tranquilo, imagino.

Además, si te tuviera que recomendar yo, te habrías tenido que hacer una consola y los juegos serían cartuchos

1 respuesta

MisKo #24 Ago '22

#23 Yo no sabría ni por donde empezar, en ese caso tu eres el profeta

1

MisKo #25 Ago '22

Bueno, ya he cambiado toda la estructura xD.

A partir de ahora, cada parte tiene su propio GIT, DockerCompose (dev y prod) y Dockerfile (dev y prod).

Ya he hecho unas cuantas pruebas y funciona como había comentado antes, solo cambiando cada cosa por separado.

Puede que descanse unos dias y luego retomo con lo que me falta del parchis, aunque mientras tanto en la tablet, he ido apuntando cosas del hundir la flota xD

1 1 respuesta

r2d2rigo #26 Ago '22 Inocente

#25 no te estas calentando un poco la cabeza usando docker y movidas?

1 respuesta

MisKo #27 Ago '22

#26 Para lo que es no necesitaria docker para nada y si que es complicarlo todo un poco, pero es algo con lo que quería pegarme un poco tambien y probar configuraciones, conexiones entre maquinas y cosas así xD

Estos proyectos los suello llevar a cabo para probar tecnologias o coger más experiencias con algunas que ya he tocado, y en este en concreto quería pegarme más con docker entre otras cosas xD

1

MisKo #28 Ago '22

Pues actualizo de nuevo con una lista de cambios que he metido al parchis:

Ahora el tablero rota en base a que jugador eres para que tengas tu color siempre abajo a la derecha.
A la hora de mover una ficha, resaltamos visualmente las que puedes mover en el tablero.
Modificadas las imágenes de los tableros para corregir algunas que se veían a mala resolución en movil
Corregido un bug por el que 2 fichas no hacian puente en la base de tu color

Además de lo anterior, se han implementado 3 reglas nuevas que se pueden activar o desactivar para cada partida:

Partida rápida: Cada jugador tiene 2 fichas en vez de 4
Si tienes todas las fichas en casa y llevas 5 tiradas sin sacar un 5, sacas una ficha por lástima
La partida acaba cuando gana el primer jugador

Esta última regla es como funcionaba antes por defecto. Ahora, si la regla no se activa, aunque un jugador gane, el resto de jugadores puede seguir jugando hasta que acaben la partida todos menos 1

Por ejemplo, si hay 4 jugadores, se seguirá jugando hasta que metan todas las fichas 3 de ellos y, en ese momento, se dará la partida por finalizada.

Y poco más, creo que he cambiado o corregido alguna cosa más pero no lo recuerdo ahora mismo.

Voy a ver si hoy toco la parte visual del dado para que quede algo más bonita y seguramente me ponga con el hundir la flota.

Una vez lleve muchas más partidas al parchis y vea que no falla nada, lo haré compatible para 6 personas y 8 personas.

Feliz Sábado !

1

carra #29 Ago '22 Vircon32

Jejeje otro que aprovecha los findes para gamedev

1 respuesta

MisKo #30 Ago '22

#29 Aunque está posteado en Gamedev, creo que esto queda muy lejos de lo que haceis todos xDD

Lo vuestro con texturas, físicas y demás le da 10mil vueltas a esto ajajajajaj

2 respuestas

[devLog] Parchis ( HTML, CSS,Javascript )

Funcionalidades que me gustaría implementar

Estado actual

Algunos concepts

Versión responsive

Tecnologías

Usuarios

FIN

Plataforma actual

En General

En el lobby de una partida

Chat

Estructura del Servidor

Siguientes pasos

Pruebas

Fin

Usuarios habituales

Tags