Un juego simple interactivo, uso de condicionales multiples
A Pen by anaid Jimenez M. on CodePen.
<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> |
Un juego simple interactivo, uso de condicionales multiples
A Pen by anaid Jimenez M. on CodePen.
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"); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> |
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; | |
} |