Javascript - Clicker de cookies
Fuente de la tarea : https://github.com/becodeorg/BXL-Swartz-5.34/blob/main/1.The-Field/12.Javascript/cookieClicker.md
Enlace a la versión en vivo : https://teo-cozma.github.io/Javascript/
Miembros del equipo
- Brigita Sabutyte (Javascript y HTML)
- David Tirel (Javascript)
- Teodora Cozma (HTML y CSS)
Idiomas
Herramientas
- Código de Visual Studio (editor de texto)
- Discord, Google Meet, Github, Replit (Comunicación)
- Adobe XD (creación de prototipos)
- Servicio de validación de marcado W3C (inspección HTML)
- Servicio de validación de CSS del W3C (inspección de CSS)
- Google Lighthouse (inspección de rendimiento)
Imagen
Recursos
¿Qué es un clicker de cookies?
- http://orteil.dashnet.org/cookieclicker/
- https://en.wikipedia.org/wiki/Cookie_Clicker
- https://cookie-clicker2.com/
- https://particle-clicker.web.cern.ch/
- https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s
Tutoriales para nuestro proyecto:
https://www.flaticon.com/free-icons/cookie
https://www.youtube.com/watch?v=uUgOBe_wb6E
https://www.youtube.com/watch?v=j_nI6G3ZDiE
https://codesource.io/how-to-disable-button-in-javascript/
https://stackoverflow.com/questions/57477529/disable-a-button-if-empty-input
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=vU2akkcSV-g
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=KgYkgBno5Gs
https://stackoverflow.com/questions/8583524/how-to-set-time-limit
Servicios de validación:
- https://validator.w3.org/#validate_by_input
- http://jigsaw.w3.org/css-validator/
Registro de proyecto
Día uno (25/10)
Revisión de instrucciones
- Qué: Clicker de cookies.
- Por qué: proyecto de consolidación (principalmente de conocimientos de Javascript).
- Cuándo: A partir de hoy, 4 días completos de trabajo en equipo, hasta el 28/10.
- Cómo: en grupos de tres, colaborando y utilizando los respectivos lenguajes de código.
- Quién: Teodora Cozma, Brigita Sabutyte, David Tirel.
- ¿Qué roles? Hay frontend, backend y gestión de proyectos. Todos los roles pueden ser intercambiables y el código se comparte de todos modos, pero en general, una persona puede concentrarse más en un rol determinado.
- Servidor (Javascript): David.
- Backend (Javascript) + Frontend (estructura HTML): Brigita.
- Frontend (CSS + quizás Sass) + Project Manager: Teodora.
Reunión creativa
3 secciones:
Sección de cookies: encabezado 1 para el contador de cookies. H1 para la cantidad de clics.
- Cookie interactiva + su título + contador de cookies = 1ª sección.
- "Dentro del HTML, coloque un botón de clic que incrementará un contador y una etiqueta inicializada en 0 para mostrar dicho contador".
Sección de puntuación:
- Sección de puntuación: recuento de puntuaciones.
- 1 cookie: la cookie es su propio botón.
(Galleta + puntuación = mitad izquierda)
- Sección de tienda:
- ¿Logros y mejoras?
- Sección de tienda = botón de actualización clicker + contador de puntos = segunda sección:
Haz un multiplicador (puntos dobles o triples) --> este paso para revisión
Precio multiplicador (comprado)
Actualización de puntuación
Contador dentro del multiplicador
Aumento de costos (el costo de un multiplicador más alto)
- Pantalla dedicada también (¿un botón debajo?)
Paso 12: elemento necesario, ciertos botones están desactivados. Ej: menos de 20 puntos, el jugador no puede acceder a ciertas funciones.
(Mitad derecha)
Ejemplo (referencia): http://orteil.dashnet.org/cookieclicker/.
Tareas para hoy
Esta mañana (10:30 - 12:30)
- Investigación sobre el proyecto (instrucciones de la tarea).
- Vea lo que corresponde a los pasos obligatorios actuales (las bonificaciones están reservadas por el momento).
- Mirada en profundidad el código del clicker de cookies original.
(https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s) Descripción del juego (¡y sus cualidades existenciales!)
- 1 clic = 1 galleta.
- 15 clics = 15 cookies = 1 cursor (comprado).
- 10 cursores = 1 cookie/seg (CpS).
- 100 galletas = abuela que produce y comercializa tus galletas.
- Las cookies son moneda que permite comprar granjas, minas, fábricas, etc. = economía de cookies que está permeando y abrumadora. Esto se expande hacia un eventual cookieverse.
- Trascendencia de la existencia = Ascender y empezar de nuevo.
- La galleta dorada se genera aleatoriamente.
- Cuidado con la abuela: potencial rebelión y apocalipsis. Salva a todos con ganancias económicas o explótalos para generar más riqueza.
- Pequeño "truco de código" en la consola: Game.Earn(x).
(http://orteil.dashnet.org/cookieclicker/)
Registro de información/Historial de versiones
- Ahorro seguro
- Estilo de visualización del cursor
- Función de importación/exportación: recupera una partida guardada de una versión antigua (deshabilitada después de una semana)
- botón vender
- Galleta dorada aleatoria (cómo determinar su frecuencia)
- Estadísticas de clic
- Al hacer clic aumenta
- Descontento de la abuela y apocalipsis --> criaturas engendradas que consumen galletas
- Sección del menú de estadísticas para actualizaciones y logros.
- Logros de sabor a leche -_-
- Menú de opciones:
- General: guardar + guardar automáticamente, exportar/importar, borrar guardar;
- Configuraciones: volumen, gráficos sofisticados, sonidos... todos estos son bonos.
Detrás del código (investigado con el inspector)
- Estructura HTML (lo que podríamos conservar para la apariencia):
- Head : todos los enlaces a estilos y scripts (el Título parpadea...)
- Cuerpo :
- Sin envoltorios de pancartas
- Barra superior: copyright y enlace a Redes Sociales (como un pie de página pero en la parte superior de la página). Definitivamente necesitaremos incluir material de derechos de autor con nuestros nombres este año y enlaces a nuestras páginas de destino (?).
- Div id:"juego": la sección real del juego.
- Las secciones están bajo la etiqueta "sección" y tienen sus propios nombres dependiendo de su posición (izquierda, derecha, medio) + separadores.
- Anclas: ¿son su propio tipo de clase? Búscalo.
- Ancla de cookie = ¡cookie en la que se puede hacer clic!
- ¿Agregamos un nombre de respaldo ficticio?
- Contador de cookies: x cookies; por segundo: s.
- ¿Creamos un menú con opciones, estadísticas, información,...?
- Además, ¿subsección para cada elemento del menú?
- (Problema técnico: la página sigue actualizándose para actualizar los datos, ya que es difícil permanecer en una sección para ver el código antes de que parpadee)
- Etiqueta "b": ¿para qué sirve?
- ¿Algunos divs están ocultos?
- Sección de tienda:
- Compra/Venta: estos deben estar vinculados a eventos de Javascript ya que sus valores cambiarán con cada clic.
- Productos (minas, abuelas): cuando el juego comienza por primera vez, estos deben estar ocultos/oscurecidos. (Otra referencia interesante: https://particle-clicker.web.cern.ch/)
Esta tarde (13:30 - 17:00)
- Recopilar ideas, investigar y aunar recursos.
- ¿Qué dificultades/desafíos técnicos pueden surgir por delante?
- ¿Cómo funciona el multiplicador?
- Muestra un diseño de secciones y sus botones (aunque esto no es particularmente preocupante).
- Comprender cómo aplicar Javascript.
- Reúna recursos e información sobre cómo escribir el código para cada botón.
¿Cuál es nuestra metodología de trabajo en grupo?
¿Cómo trabaja cada uno de nosotros?
- Solo
- Centrado en la investigación
- Centrado en la codificación
- ¿Hacemos "sesiones de codificación en vivo", donde compartimos nuestra pantalla y escribimos código, y cada uno da su opinión en el acto?
¿Cómo podemos hacer que este plazo funcione para nosotros?
¿Cómo dividimos el trabajo de codificación? ¿Cómo determinamos las siguientes tareas y las delegamos? Si cada uno trabaja en su propio tiempo, ¿cómo acordaremos y consolidaremos el código final?
Decidir cómo comunicar y compartir información:
- En Discord, sala 4 (chat + llamada).
- ... (otras herramientas de colaboración).
- Definitivamente Github, los repositorios serán compartidos.
Decidir los próximos pasos:
- ¿Terminar la investigación hoy?
- ¿Empezar a planificar (+ escribir?) la estructura HTML? ¿La estructura de Javascript?
- ¿Seguimos cada paso al pie de la letra?
- Se ha decidido que se incluirán al menos los pasos obligatorios (todas las entradas y botones que tienen las funciones más importantes), y las bonificaciones se han dejado de lado por ahora (pero pueden incluirse si es posible).
- ¿Estos pasos se deben seguir uno tras otro, o algunos al mismo tiempo?
- Esta es una pregunta importante a plantear ya que los roles se comparten: 2 personas colaborando en el backend, 2 personas para el frontend.
- Por lo tanto, en Javascript, ¿se distribuirían estos pasos?
- Cuando se trata de construir el proyecto, ¿cuánto tomamos del original y cuánto lo hacemos nuestro?
Método de trabajo diario:
- Cada uno de nosotros trabaja por su cuenta al principio y, al final del día, compartimos nuestro código a través de Discord y luego "confirmamos" todo en Replit.
Pensando en el futuro: la parte de evaluación
- Evalúe periódicamente el progreso y asegúrese de que se incluyan las funciones imprescindibles.
- Actualice periódicamente el archivo Léame.
- Hacia el final (el último día, o incluso durante el proceso de codificación), utilice las herramientas de validación y rendimiento (consulte Lighthouse y herramienta de validación del W3C); tal vez el jueves.
Los pasos de esta tarde (14:30 - 16:30)
- Más investigación y mapeo de las tareas para el mañana:
- Brigita: Investigación y redacción de HTML.
- David: investigación de Javascript.
- Teodora: investigación visual y creación de prototipos.
Día dos (26/10)
Reunión de la mañana a las 9:00:
- Paso 5 completo.
- Compartir código.
- Cuestiones técnicas: conectar el HTML con el Javascript, conseguir que las funciones funcionen correctamente.
- Además, los bonos son para los jugadores, por lo que el paso 11 y siguientes son obligatorios.
- Autoclicker lo está haciendo David.
- Multiplicador realizado por Brigita; pendiente también.
- Resolver problemas en scripts.
Para esta mañana (9:30 - 12:30)
Continúe los pasos asignados. Investigue cualquier problema. Reunión a las 13.30 horas para discutir los avances y resolver cualquier problema.
Para esta tarde (13:30 - 16:30) Teo: haz que el sitio sea responsivo. Nota: ¡los botones multiplicadores también deberían incluir el coste! + busque el script para desactivar ciertos botones según la cantidad de cookies. David: comparte funciones; Función de carga resuelta. Brigita: código y funciones compartidas; Problemas de sintaxis resueltos.
Reunión Scrum (16:30 - 17:00)
¿Qué se hizo?
¿Qué problemas surgieron y se resolvieron?
- Problemas con el multiplicador.
¿Cuáles son los próximos pasos?
Asuntos :
- ¡¡¡Descubriendo cómo centrar elementos!!!!!! (Tuve que refrescarme la memoria, otra vez).
- Cómo deshabilitar un botón usando Javascript: dificultades de codificación.
- Guardar y cargar no funcionan con el multiplicador.
- No se puede seguir usando Sass debido a problemas de compilación en el CSS principal. Así que volvamos al estilo con CSS básico.
Qué problemas solucionar mañana:
- Botones Guardar y Cargar;
- Haga que el multiplicador se incremente en 2 (nuevamente);
- Activar/desactivar botones según las condiciones (Paso 12);
- Bonificaciones: Paso 11.
Día tres (27/10)
Reunión de la mañana (9:00)
Encuentro nocturno (16:45 - 17:00)
Día cuatro (28/10)
Reunión de la mañana (9:00 - 9:30)
Lo que hay que hacer hoy:
Trabajo de tarde (13:30 - 16:00)
Resultados =
- Rendimiento = 91;
- Accesibilidad = 95 ;
- Mejores prácticas = 100;
- SEO = 92;
Informe post-proyecto (16:20 - 17:00 y mañana 29/10):
- Cuestiones técnicas pendientes: multiplicador. Mañana se volverá a revisar.
(29/10)
