Reinicio

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "liveServer.settings.port": 4500,
+  "liveServer.settings.root": "/",
+  "liveServer.settings.CustomBrowser": "chrome",
+  // "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
+  "liveServer.settings.NoBrowser": false,
+  "liveServer.settings.ignoreFiles": [".vscode/**", "**/*.scss", "**/*.sass"],
+  "liveServer.settings.donotShowInfoMsg": true,
+  "editor.fontSize": 14,
+  "editor.minimap.enabled": false,
+  "editor.wordWrap": "on",
+  "window.zoomLevel": 0
+}

README.md

@@ -0,0 +1,18 @@
+# challenge-oracle-hangman-esp-main
+
+Juego del ahorado
+https://tecnopulsar.github.io/challenge-oracle-hangman-esp-main/
+
+Challenge ALURA ONE
+
+------------------
+El juego utiliza un diccionario de palabras basados en animales, algunos muy raros, xD
+Los carga desde un archivo de texto
+Incluye audio background y aplausos si ganaste.
+
+Suerte en el juego, que te diviertas y gracias por juagarlo.
+
+Comentarios bienvenidos.
+
+Nos vemos en Disney
+

asserts/css/app.css

@@ -0,0 +1,14 @@
+/* Comun Movile First */
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100vh;
+}
+
+body {
+  font-family: sans-serif;
+  background-color: gray;
+}

asserts/css/canvas.css

@@ -0,0 +1,13 @@
+.area-juego{
+  display: flex;
+  justify-content: center;
+}
+.canvas{
+  display:block;
+  top: 15vh;
+  left: 5vw;
+  width: 100vw;
+  max-width: 800px;
+  height: 50vh;
+  max-height: 600px;
+}

asserts/css/footer.css

@@ -0,0 +1,13 @@
+footer{
+  display: block;
+  height: 10vh;
+  margin: 10px 10px auto;
+  text-align: center;
+  background-color: rgba(39, 38, 49, 0.637);
+  color: white;
+}
+
+footer p a{
+  text-decoration: none;
+  color: white;
+}

asserts/css/header.css

@@ -0,0 +1,24 @@
+header{
+  position: relative;
+  margin-top: 5vh;
+  display: flex;
+  justify-content: center;
+
+}
+header div{
+  display: flex;
+  flex-direction: column;
+  justify-content:center;
+  align-items: center;
+}
+.titulo {
+  width: auto;
+  font-size:3rem;
+  font-weight: 700;
+}
+.subTitulo {
+  width: auto;
+  font-size:1rem;
+  font-weight: 500;
+  margin-bottom: 20px;
+}

asserts/css/interfase.css

@@ -0,0 +1,39 @@
+.interfase{
+  display: flex;
+  flex-direction:row;
+  justify-content: center;
+  align-items: center;
+}
+
+.boton{
+  width: 40vw;
+  height: 5vh;
+  left: 30vw;
+  top: 45vh;
+  padding: 10px;
+  margin-top: 0px;
+  margin-bottom: 10px;
+  color: white;
+  font-weight: bold;
+  background-color: rgb(236, 38, 153);
+  border-radius: 0.5em;
+  box-shadow: 5px 5px rgb(98, 98, 241);
+  max-width: 300px;
+}
+.boton:hover{
+  background-color: blue;
+}
+
+.boton:active {
+  background-color: blue;
+  box-shadow: 0 5px #666;
+  transform: translateY(2px);
+}
+
+#boton__iniciarJuego{
+  visibility: visible;
+}
+
+#boton__reiniciarJuego{
+  visibility: hidden;
+}

asserts/css/main.css

@@ -0,0 +1,29 @@
+/* Comun Movile First */
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  font-family: sans-serif;
+  background-color: gray;
+}
+main{
+  display: flex;
+  flex-direction: column;
+
+}
+/* .text-input {
+  border-radius: 0.5em;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  display: none;
+  padding: 0.5em;
+  width: 30%;
+  height: 50px;
+  margin-left: auto;
+  margin-right: auto;
+} */

asserts/css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

asserts/css/teclado.css

@@ -0,0 +1,40 @@
+
+.bolsaLetras{
+  display: flex;
+  justify-content: center;
+}
+
+.teclado{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 800px;
+}
+
+.teclado__linea{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+.tecla{
+  width: 9.5vw;
+  max-width: 50px;
+  color: white;
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: bold;
+  background-color: rgb(38, 38, 236);
+  border: 1px solid white;
+  border-radius: 5px;
+}
+.tecla:hover{
+  background-color: blue;
+}
+
+.tecla:active {
+  background-color: blue;
+  box-shadow: 0 5px #666;
+  transform: translateY(2px);
+}