Un juego simple interactivo, uso de condicionales multiples
A Pen by anaid Jimenez M. on CodePen.
Created
January 14, 2024 21:55
-
-
Save ANAIDJM1/dbb12ed8e7b7b983bf792da5ece578a5 to your computer and use it in GitHub Desktop.
Juego del Pez
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <h1>Juego del pez</h1> | |
| <video playsinline autoplay muted loop> | |
| <source src="https://ia801302.us.archive.org/0/items/debajo/debajo.mp4" type="video/webm"> | |
| Your browser does not support the video tag. | |
| </video> | |
| <button id="inicio" type="button">Empezar!</button> | |
| <img src="https://archive.org/download/elbuceador/elbuceador.png" alt="buceador" width="200px" id="buzo"> | |
| <img src="https://ia801301.us.archive.org/8/items/pez_20240114/pez.gif" alt="pez" width="200px" id="pez" > | |
| <p class="burbuja-dialogo" id="b-1"> | |
| Hola!! | |
| <p> | |
| <p class="burbuja-dialogo" id="b-2"> | |
| Hola?, quien dijo eso? | |
| <p> | |
| <p class="burbuja-dialogo" id="b-3"> | |
| Relajate nano, solo soy un pez que habla.. | |
| El unico que vive aqui, no queda más nadie si buscas a otro. | |
| <p> | |
| <p class="burbuja-dialogo" id="b-4"> | |
| Bueno quieres ser mi amigo? | |
| <p> | |
| <div class="cositos"> | |
| <button id="amigos" type="button">SI</button> | |
| <button id="noamigos" type="button">NO</button> | |
| </div> | |
| <p class="burbuja-dialogo" id="b-5"> | |
| oh..oh bueno lo entiendo, es dificil aceptar que uno tiene esquizofrenia. Buena suerte! | |
| <p> | |
| <p class="burbuja-dialogo" id="b-6"> | |
| Que bien! vamos a fumarnos un porrito marino juntos! | |
| <p> | |
| <body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var inicio = $("#inicio"); | |
| var pez = $("#pez"); | |
| var buzo = $("#buzo"); | |
| $("#inicio").click(function() { | |
| $("#inicio, h1").css("display", "none"); | |
| buzo.css("display", "block"); | |
| setTimeout(function() { | |
| $("#b-1").css("display", "block"); | |
| setTimeout(function() { | |
| $("#b-1").css("display", "none"); | |
| $("#b-2").css("display", "block"); | |
| setTimeout(function() { | |
| $("#b-2").css("display", "none"); | |
| $("#b-3").css("display", "block"); | |
| pez.css("display", "block"); | |
| setTimeout(function() { | |
| $("#b-3").css("display", "none"); | |
| $("#b-4").css("display", "block"); | |
| setTimeout(function() { | |
| $("#b-4").css("display", "none"); | |
| $("#amigos").css("display", "block"); | |
| $("#noamigos").css("display", "block"); | |
| }, 3000); | |
| }, 5000); | |
| }, 4000); | |
| }, 3000); | |
| }, 3000); | |
| }); | |
| $("#amigos").click(function() { | |
| $("#b-6").css("display", "block"); | |
| $("#amigos").css("display", "none"); | |
| $("#noamigos").css("display", "none"); | |
| }); | |
| $("#noamigos").click(function() { | |
| $("#b-5").css("display", "block"); | |
| $("#amigos").css("display", "none"); | |
| $("#noamigos").css("display", "none"); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body | |
| { | |
| background-Url: #153f99; | |
| color: #fff; | |
| width=100% | |
| height=700px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| } | |
| .cositos{ | |
| display:flex; | |
| flex-direction: row; | |
| } | |
| video { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| z-index: -1; | |
| } | |
| #inicio,#amigos | |
| { | |
| background-color: #04AA6D; /* Green */ | |
| border: none; | |
| color: white; | |
| padding: 15px 32px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 16px; | |
| cursor:pointer; | |
| } | |
| #noamigos | |
| { | |
| cursor:pointer; | |
| background-color: #dd1f42; | |
| border: none; | |
| color: white; | |
| padding: 15px 32px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 16px; | |
| } | |
| h1 | |
| { | |
| color:#1D1E22; | |
| } | |
| #pez | |
| { | |
| display:none; | |
| top: 55px; | |
| position:fixed; | |
| right:155px; | |
| } | |
| #buzo | |
| { | |
| display:none; | |
| top: 55px; | |
| position:fixed; | |
| left:155px; | |
| } | |
| #b-1,#b-3,#b-4,#b-5,#b-6 | |
| { | |
| position:fixed; | |
| right:455px; | |
| } | |
| #b-2 | |
| { | |
| position:fixed; | |
| left:555px; | |
| } | |
| .burbuja-dialogo { | |
| position: relative; | |
| display: inline-block; | |
| background-color: #e0e0e0; | |
| padding: 10px; | |
| border-radius: 10px; | |
| border: 1px solid #ccc; | |
| max-width: 300px; | |
| color:black; | |
| } | |
| .burbuja-dialogo::before { | |
| content: ""; | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| margin-left: -10px; | |
| border-width: 10px; | |
| border-style: solid; | |
| border-color: #e0e0e0 transparent transparent transparent; | |
| } | |
| #b-1,#b-2,#b-3,#b-4,#b-5,#b-6,b-7,#amigos,#noamigos | |
| { | |
| display:none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment