Dar una buena acogida.
Hasta ahora, todo lo que hemos estado haciendo en torno a los eventos y los oyentes del evento en el dormitorio y
la relación dominante, y volcamos las cartas que acabamos de hacer con ejercicios rápidos que en realidad no equivalen
a mucho.
Y eso fue solo para mostrar piezas individuales de cómo funcionaban.
Ahora vamos a ver cómo encajan todos y hacer una aplicación algo sustancial.
Entonces, como pueden ver, esta no es la aplicación más hermosa que se avecina.
aquí, cómo tomamos los eventos, cómo seleccionamos los elementos, cómo escribimos sobre cómo y cómo encajan.
Simplemente nos estamos enfocando en cómo las piezas encajan conceptualmente
El estilo es solo extra.
En este punto, pero en el próximo proyecto que hacemos.
Vamos a enfocarnos mucho en el diseño y hacerlo lucir bien.
Lo prometo.
Entonces, lo que vamos a hacer es una aplicación de puntuación simple.
tijeras de papel de roca con un amigo, ping pong o tic tac toe y es tan agotador
seguir el marcador y tan difícil saber quién está ganando cuando esto la aplicación es para ti de la manera en que funciona.
Así que quiero que recuerden todas esas veces que han estado jugando con
Dos jugadores jugador 1 puntaje jugador para anotar.
Cargas la página y nos dice que estamos jugando a cinco.
Entonces, todo lo que hacemos es agregar un punto haciendo clic en un botón.
Entonces, para agregar un punto al jugador 1, hacemos clic en el Jugador 1 si queremos agregar un jugador de puntos para hacer
clic en el Jugador 2 y luego, quienquiera que llegue a cinco.
Usted nota que se pone verde.
Y si trato de anotar de nuevo, no puedo.
Eso es porque el juego ha terminado.
Entonces puedo restablecer haciendo clic en el botón de reinicio.
Y ahora uno de los mejores jugadores dos barrió totalmente y ya no podemos jugar más.
Y ese reinicio rápido.
Otra característica más es que también podemos especificar a qué estamos jugando.
Entonces, si quieres tener un juego que dura hasta las 7:00, puedo usar este número de entrada aquí y luego
todo lo que tengo que hacer es hacer que este sea un juego más cerrado y el jugador uno se escapa al final 4:53 y el juego termina en 7
y el jugador 1 se pone verde y no podemos agregar más puntos y luego podemos reiniciar de nuevo.
Entonces eso es en lo que nos enfocaremos en construir aquí.
Entonces, lo primero que queremos hacer es configurar nuestro archivo y luego crear la estructura H del equipo L y luego
vamos a ingresar con javascript y hacer que las cosas funcionen.
Entonces continuemos y comencemos.
Así que tengo un documento en blanco que voy a documentar.
Lo llamo scorekeeper dot h Timo va a agregar en nuestra repetición y le dará un
título así.
Entonces debo comenzar hablando de lo que estamos viendo aquí.
Entonces esto no es H-1 H1 y eventualmente cambiaremos esto.
No queremos que sea solo una h sólida porque hay dos cosas dentro de este H-1. Tiene que ser
como el jugador 1 que anota 2 jugadores para anotar, pero tenemos que poder seleccionar esto por separado de esto.
Entonces queremos una manera de dividir este H1 en pedazos más pequeños.
Entonces veremos cómo podemos hacer eso en solo un poco.
Entonces, este es un párrafo al que estás jugando.
Y vamos a jugar justo a las siete para comenzar.
O hagamos cinco.
Creo que eso fue todo.
Y luego tenemos una entrada aquí.
Este es el tipo de entrada igual al número.
Entonces, el tipo de entrada es igual a número y eso es todo lo que necesitamos.
Y luego tenemos nuestro primer botón.
Reproductor 1 o segundo jugador 2.
Y nuestro último botón de reinicio.
Entonces, si actualizamos esta página y ahora abrimos nuestra propia página que creamos.
Vamos a ver.
Se ven más o menos lo mismo.
Zoom un poco en este que se ve bien.
Por supuesto, no sucede nada cuando hacemos clic en cualquier cosa.
Así que ahora entremos en nuestro javascript en.
Así que voy a crear un nuevo archivo. Lo llamaré anotador J. S. y como siempre hago o
agrego mi alerta aquí que está conectada.
encargados del puntaje o a la memoria e incluiré mi guión y lo voy a hacer en la parte inferior aquí para comenzar.
Luego iré a los
Así que las llamadas de tipo script llamadas javascript source son igual a scorekeeper.
Sí solo así.
Ahora si refrescamos.
Esta es mi versión de la página me dice javascript alert connected.
Todo bien.
Así que tenemos nuestro correo electrónico configurado.
Se ve genial.
Lo que tenemos que hacer ahora es obtener un código de JavaScript que realmente agregue alguna funcionalidad.
Y como siempre, debemos comenzar seleccionando los diferentes elementos.
Comencemos seleccionando los botones y simplemente hagamos el jugador uno y el jugador o dos botones y
la primera característica en la que nos enfocaremos es cuando hagamos clic en uno de estos botones el
puntaje debería incrementarse aquí.
Entonces, todo lo que tenemos que hacer es comenzar seleccionando ese botón de un jugador y si miramos que
es solo un botón, podemos agregar ID, así que llamaremos a este y lo haremos aquí. Añadiremos uno para P2 y luego podremos también
agregue uno para el reinicio que llamaremos restablecer.
Entonces tenemos tres ideas ahora.
Por lo tanto, es mucho más fácil de seleccionar.
Lo llamaremos VIP un botón es igual a selector de consulta de documento.
O podríamos obtener elemento por ID.
Los mezclaré aquí, así que el primero lo hará con el selector de consulta P1 y luego P2.
El botón será document dot y obtendremos el elemento por id, y ya no necesitamos ese Octa Thorpe.
Entonces eso nos da los dos botones.
configurar nuestro primer oyente cuando haga clic en este primer botón para alertar o cancelar el registro de algo.
Y vamos a
Así que queremos escribir el botón P1 y agregar el detector de eventos al hacer clic y luego agregamos nuestra función aquí.
Y dentro de esa función solo vamos a alertar a la alerta presionada y eso es todo.
Por lo tanto, si actualiza nuestra página y vuelve a intentar hacer clic en grande que nos indica que seleccionamos correctamente, agregamos
correctamente nuestro oyente para el evento Click.
El jugador 2, sin embargo, no hace nada porque solo agregamos eso al botón del jugador 1.
Entonces, ahora hablemos de cómo esto realmente funcionará.
necesitamos tener alguna variable que se llame puntaje del Jugador 1 o algo que haga un seguimiento de cuántos puntos.
Cuando hago clic aquí
El jugador uno tiene y hago clic en él para agregar una puntuación al jugador 1 y luego la última parte lo está actualizando
aquí para reflejar la puntuación del jugador 1.
Así que voy a hacer una variable, vamos a llamarlo 1 puntuación y configurarlo para que sea cero.
Y luego, todo lo que quiero hacer es cuando haga clic en "Comenzaremos", pero siempre agregando uno al puntaje del jugador 1.
Entonces esa será solo la puntuación más una ventaja.
Así.
Y actualizamos y no vimos nada porque probablemente deberíamos cancelar ese registro.
Él ganó puntaje en lugar de alerta.
Se vuelve muy molesto si refrescamos ahora y abrimos la consola y el puntaje del jugador 1 de McCook y vemos
cómo funciona.
Uno dos tres cuatro cinco y continuará.
Entonces hay algunos problemas.
Una es que no estamos mostrando el puntaje aquí y dos dice que estamos jugando a cinco.
Y obviamente ese no es el caso porque solo lo estamos incrementando tanto como queremos.
Entonces tenemos que tener alguna lógica que diga si hay más de cinco juegos o algo así.
Pero empecemos por descubrir cómo podemos actualizar este H1.
Entonces, lo que podríamos hacer es simplemente seleccionar el H-1 para comenzar.
Así que vamos a llamarlo lejos.
H1 es igual a un documento que consulta al selector H-1 simplemente así.
Y luego, dentro de aquí, diremos que el contenido de texto de punto H-1 equivale a una puntuación así.
Así que vamos a tomar este y cambiar el contenido del texto para que sea lo que sea que el puntaje
sea sin sesión.
ese tipo de trabajo funciona, pero se puede ver que sobreponemos por completo todo lo que había dentro de cada uno.
Y si puntúo bien,
Queremos mantener los dos y el otro puntaje.
Solo queremos cambiar este número.
Entonces hay una manera de hacerlo usando un poco de h adicional para un hombre que le hace la vida mucho
más fácil si volvemos a nuestro marcador, pero cada vez que vamos a introducir un elemento de tramo.
Y la forma en que el lapso funcionará es que solo se ajustará al número del puntaje.
Entonces, lo que eso significa es que podemos ahora si inspecciono esto.
Nada parece que cambie y ese es el punto de un lapso.
Es solo un día no intrusivo, si lo deseas, es solo una manera de envolver algo con una
etiqueta que luego puedes usar o diseñar de manera diferente o seleccionar con javascript, que es
exactamente lo que haremos si buscamos H-1, pero aquí estamos ahora tener un lapso especial envolviendo ese número.
Entonces, si seleccionamos ese tramo y cambiamos solo ese tramo, todavía tendremos el tĂo y nuestro espaciado correctamente
y el otro puntaje.
Entonces, queremos seleccionar ese lapso y volver a hacer solo una identificación aquí.
Así que amplía y llamaremos a esta pantalla P1 así.
Y ahora tenemos que ir a nuestro marcador J S y cambiar algunas cosas.
Entonces no necesitamos seleccionar el H-1 más para deshacernos de eso.
Vamos a seleccionar una sola pantalla igual a la obtención de documentos y vamos a hacer el selector de consultas para la variedad de
nuevo selector de consultas.
Y llamamos a esa pantalla P1 para que nos brinde el lapso y si queremos verificar que eso
esté funcionando.
¿Por qué no hacemos un registro de bóveda de concierto aquí mismo?
La visualización ganada solo para ver cuando cargamos la actualización de la página debe imprimirse OK.
Seleccionado nuestra spand correctamente.
DE ACUERDO.
Entonces, lo que queremos hacer y deshacernos de eso es agregar uno al puntaje.
Podemos deshacernos de nuestros otros contras. Pero inicie sesión en lugar de cambiar el contenido de texto en todo el H-1.
Solo queremos cambiarlo en nuestra pantalla P1, que es este pequeño lapso aquí mismo.
Y si actualizamos ahora, allí vamos.
Entonces, obtenemos esa pantalla de jugador 1 actualizando, el jugador 2 todavía no hace nada, pero tenemos esta
característica funcionando.
Hagamos lo mismo para el jugador 2
Así que volveré agregar en otro lapso alrededor de nuestro ID de span cero es igual a mostrar y luego mover a cero
en el medio.
Actualizamos nada debería parecer diferente, pero ahora tenemos dos tramos.
Para que pueda ver, volvamos a nuestro marcador J y agreguemos dos nuevas variables.
Entonces, tenemos que mostrar el tramo para que el jugador tenga que seleccionarlo con esa ID.
Usaré el selector de consulta nuevamente.
Y luego necesitamos una variable para el jugador de puntaje a la suya, no queremos que solo tengan el mismo puntaje.
Obviamente, necesitamos dos formas distintas de rastrear sus valores.
Entonces, lo primero que quiero hacer es probar que nuestro botón de jugador a se selecciona correctamente.
Así que solo voy a hacer un botón de reproductor de registro de bóveda de concierto y solo ver qué se imprime.
Y si actualizamos y miramos los contras. Puedes ver que algo está mal.
Seleccionamos el jugador con un botón, no el jugador con dos botones.
Entonces algo está mal con nuestro selector.
Puedes ver aquí que estamos seleccionando elemento por ID P1 que es el mismo que teníamos aquí.
Entonces, debemos seleccionar P2.
Ok, ahora que eso se solucionó si actualizamos, obtenemos el botón ID P2, que es genial.
Ahora agreguemos en nuestro oyente.
Así que Pete para presionar ese clic en el detector de eventos publicitarios y siempre me gusta
comenzar imprimiendo algo o alertando a algo, un log P2 hace clic en esa actualización.
Y hacemos clic en P2, nuestro reproductor todavía funciona y P2 ejecuta algún código.
Ahora solo tenemos que poner el código correcto allí.
Si echamos un vistazo a lo que hicimos para el botón del jugador 1, necesitamos que el jugador marque un
incremento variable para comenzar.
Hasta el momento puntaje P2.
Y eso también debería comenzar en cero.
Y luego vendremos aquí y simplemente cambiaremos esto para que sea un puntaje P2 más para nosotros y luego tendremos que actualizarlo
en la pantalla que aún no hemos seleccionado.
Entonces también necesitamos seleccionar ese lapso.
Recuerde el lapso aquí ID de la pantalla P2.
Así que vamos a hacer eso.
Ella va a copiar esa línea y cambiarla para mostrar el documento de la pantalla del selector P2
de Duckery y luego simplemente cambiaremos la visualización al contenido del texto para que sea igual al jugador que puntuará.
Así que echemos un vistazo.
Haga clic en el jugador 1 que todavía funciona.
¿Qué hay del jugador 2 que también funciona?
DE ACUERDO.
Entonces, nuestro juego ya no tiene fin en este momento.
Esto continuaría por siempre.
Entonces tenemos que trabajar para agregar esa funcionalidad.
que vamos a hacer eso es con una variable que hará un seguimiento del estado de nuestro juego.
Y la forma en
Entonces nuestro juego tiene dos estados.
El primero es el estado normal en este momento donde puedo hacer clic donde puedo jugar el juego.
Y el segundo estado sería lo que podríamos llamar juego donde alguien tiene uno.
Entonces necesitamos dos estados y podemos usar un booleano para modelar ese verdadero o falso.
Y voy a llamarlo juego hasta ahora.
Se acabó el juego y comienza esto falso porque se acabó el juego.
No es cierto al comienzo del juego.
Y luego, lo que haremos es actualizar el juego para que sea verdadero o falso, dependiendo de si alguien gana.
Entonces, si alguien supera el juego de cinco, ahora debería ser cierto y eso debería significar que ya no podemos actualizar
el puntaje y que tenemos que presionar restablecer y restablecer para luego volver a hacer el juego sobre falso
y comenzar de nuevo.
Así que déjame mostrarte lo que quiero decir.
Lo primero que queremos hacer es agregar otra variable.
Voy a llamarlo puntaje ganador.
Y eso va a ser igual a 5.
Entonces esa variable es lo que vamos a comparar jugador 1 y jugador para anotar 2.
Así que vamos a verificar que un jugador 1 haya alcanzado el puntaje ganador si lo ha hecho.
Entonces tenemos que decir que el juego terminado es cierto.
Entonces la lógica se verá así.
Voy a tener una declaración if y va a parecer que aún no se ha alcanzado el juego.
Entonces, si no se acabó el juego, entonces vamos a dejar que agregues al puntaje así.
Cuando ejecuto esto ahora, no notarás nada diferente.
Funcionará exactamente de la misma manera para el jugador 1 y es porque el juego terminado siempre es falso.
Nunca cambia
Entonces, ¿cuándo lo cambiaríamos para que sea cierto?
Bueno cuando hay un juego terminado.
Y cuando eso sucede es cuando los usuarios obtienen una puntuación así que cuando el puntaje del jugador 1 es igual al puntaje ganador.
Entonces, después de que agreguemos puntaje de uno a jugador 1, simplemente comprobaremos si hacemos un puntaje triples igual a la puntuación
ganadora.
Entonces, si son iguales entre sí, comencemos diciendo Contador log.
Juego terminado.
Así.
Y si actualizamos y revisamos a nuestro Cónsul, e intenté cambiar esto hasta ahora, esto no es cierto, así que
esto nunca sucede.
Esta vez, aunque agregue un jugador, un puntaje va a cinco.
Estamos comprobando si la puntuación del jugador 1 es igual a la puntuación ganadora y conseguimos el juego aquí.
Entonces, en lugar de simplemente cancelar el bloqueo, realmente queremos cambiar este estado o ahora.
Game Over es verdad.
nosotros? Te mostraré que si lo actualizo no podrás agregar más al puntaje porque el juego terminado es cierto.
Entonces, ¿qué va a hacer por
Esta pequeña verificación aparece.
Controla.
¿Ya terminó el juego?
Y si es un juego, nada de este código se ejecuta.
Entonces probemos eso.
Llego a cinco y estoy atascado.
No puedo aumentarlo más.
Sin embargo, puedo ir al jugador 2 y aumentar ese puntaje porque nuestra lógica es solo para el jugador 1.
Vamos a querer pasarle a este jugador para que cierre el botón de escucha del evento y agregue la misma lógica.
Entonces, si no ha terminado el juego, le permitiremos incrementar el puntaje y actualizar la pantalla, y luego también debemos verificar
si el nuevo jugador que marca es igual al puntaje ganador luego de que se acabe el juego.
Game Over es cierto, lo que significa que el usuario, ni el usuario ni el jugador uno o el jugador
dos, puede continuar incrementando el puntaje.
Así que vamos a verificar que esto funcione.
OK, podemos llegar a cinco aquí y terminamos.
El jugador 2 no funciona o podemos llegar a cinco aquí y ya terminamos.
Y el jugador 1 tampoco funciona.