Memory Match Game

Índice

• 1. Resumen del proyecto
• 2. Historias de usuario
• 3. Objetivos de aprendizaje
• 4. Diseño de la Interfaz de Usuario
• 5. Pre-requisitos
• 6. Demo
• 7. Autores

---

1. Resumen del proyecto

En este proyecto construirás una versión web del juego Memory Match, en la que una jugadora pueda jugar sola, en el navegador. Esta diseñado para cualquier persona que quiera distraerse y ejercitar su memoria

El objetivo principal de este proyecto es que aprendas a diseñar y construir una interfaz web basada en data e interacción con la usuaria.

2. Historias de usuario

1. Historia de Usuario

Que tenga una pagina de inicio y un boton de jugar

Criterio de aceptacion

El usuario entra al juego la pagina inicial que contiene el boton y puede darle click para asi pasar a la siguente pantalla.

2. Historia de Usuario

Poder escojer dos tipos de personajes al darle click en la tarjeta de eleccion.

Criterio de aceptacion

El usuario ve la pantalla donde elige con que personaje quiere jugar.

3. Historia de Usuario

poder ver las tarjetas en el tablero para comenzar a jugar, tener un puntaje, un tiempo y pasar de niveles.

Criterio de aceptacion

El usuario puede empezar a jugar detapando carta por carta y si es igual quedara descubierta, al igual el puntaje se le sumara con el tiempo que le reste al descubrirla y podra pasar de nivel.

4. Historia de Usuario

tenr una pantalla que me diga si perdi o gane y me permita salir del juego volver a jugar.

Criterio de aceptacion

el usuario podra visualizar si gana o pierde en la pantalla y tendra la opcion de volver a jugar o salirse del juego.

5. Historia de Usuario

Que pueda jugar en en movil o computadora

Criterio de aceptacion

El usuario puede jugar en cualquier dispositivo como tablet, celular o computadora.

3. Objetivos de aprendizaje

Con el desarrollo de este proyecto se alcanzaron los siguientes objetivos de aprendizaje.

HTML

• Uso de HTML semántico

CSS

• Uso de selectores de CSS
• Modelo de caja (box model): borde, margen, padding
• Uso de flexbox en CSS

Web APIs

• Uso de selectores del DOM
• Manejo de eventos del DOM (listeners, propagación, delegación)
• Manipulación dinámica del DOM

JavaScript

• Diferenciar entre tipos de datos primitivos y no primitivos
• Arrays (arreglos)
• Objetos (key, value)
• Variables (declaración, asignación, ámbito)
• Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
• Uso de bucles/ciclos (while, for, for..of)
• Funciones (params, args, return)
• Pruebas unitarias (unit tests)
• Módulos de ECMAScript (ES Modules)
• Uso de linter (ESLINT)
• Uso de identificadores descriptivos (Nomenclatura y Semántica)
• Diferenciar entre expresiones (expressions) y sentencias (statements)

Control de Versiones (Git y GitHub)

• Git: Instalación y configuración
• Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)
• Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)
• GitHub: Creación de cuenta y repos, configuración de llaves SSH
• GitHub: Despliegue con GitHub Pages
• GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)

user-centricity

• Diseñar un producto o servicio poniendo a la usuaria en el centro

product-design

• Crear prototipos de alta fidelidad que incluyan interacciones
• Seguir los principios básicos de diseño visual

research

• Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad

4. Diseño de la Interfaz de Usuario

Prototipo de baja fidelidad

Prototipo de alta fidelidad

5. Pre-requisitos

Necesario npm

npm install -g sass

6. Demo

• deploy del proyecto GitHub Page DEPLOY
• deploy del proyecto Netlify DEPLOY
• repositorio del proyecto REPO
• repositorio del proyecto REPO
• Figma del proyecto REPO

7. Autores

Proyecto desarrollado por:

• Paula Ximena Anzola - Ingeniera ambiental - proyectos
• Estefani Azocar - Ingeniera Informatica - proyectos