10 2

Mover el avión hacia el país en un juego de javascript [10]

En este tutorial vamos a mover el avión hacia el país en un juego de javascript siguiendo estos pasos:

  • getBoundingClientRect (JS)
  • transition (CSS)
  • Mover nuestro avión.
Mover el avión hacia el país en un juego de javascript

Codigo: https://github.com/programadornovato/avionJavascript/commit/43ce13bcd3a4a6c7d9923506e47dc5dddceadd05

css/css.css

body{
    margin: 0px;
    padding: 0px;
    background-color:#b4dcfc;
    cursor: crosshair;
}
#mapa{
    user-select: none;
    position: absolute;
    width: 1024px;
}
#salida{
    position: absolute;
    top: 600px;
    color:black;
}
#canvas{
    position: absolute;
    left: 0px;
}
#avion{
    position: absolute;
    top: 500px;
    left: 20px;
    z-index: 100;
    width: 70px;
    display: none;
    transition: left 2s cubic-bezier(0.42, -0.3, 0.78, 1.25), top 2s cubic-bezier(0.42, -0.3, 0.78, 1.25);
}
#no{
    position: absolute;
    top: 500px;
    left: 20px;
    z-index: 100;
    width: 30px;
    display: none;
    transition: left 2s cubic-bezier(0.42, -0.3, 0.78, 1.25), top 2s cubic-bezier(0.42, -0.3, 0.78, 1.25);
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ayudame a vender mi avion!!!!</title>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <img src="img/mapa.png" id="mapa" >
    <img src="img/avion.png" id="avion">
    <img src="img/no.gif" id="no">
    <pre id="salida" >Hola</pre>
    <script src="js/juego.js"></script>
</body>
</html>

Colors picker: https://www.w3schools.com/colors/colors_picker.asp
[Curso] TensorFlow js en Español 🇪🇸: https://www.youtube.com/playlist?list=PLCTD_CpMeEKSEOKBFyG6PxQOAvQc7HZSB
[Curso] Machine Learning JavaScript en Español 🇪🇸 con ML5: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQYuoil2uSTX19S8Mfmny6B
[Curso] Java Netbeans Completo☕: https://www.youtube.com/playlist?list=PLCTD_CpMeEKTT-qEHGqZH3fkBgXH4GOTF
Como sacar las comillas invertidas: https://platzi.com/discusiones/1339-fundamentos-javascript/52373-hola-a-todos-tengo-una-consulta-alguien-sabe-como-hacer-las-comillas-invertidas-con-el-teclado/

🎦 Esta lista de reproducción: https://www.youtube.com/playlist?list=PLCTD_CpMeEKRTg39rjg2AqNxQCTz_UiBR .
Codigos en gdrive: https://drive.google.com/drive/folders/1v6u0tPYPRm_7qSbEt6IPghdzr9A9f08a?usp=sharing

🔗 Facebook: https://facebook.com/ProgramadorNovatoOficial
🔗 Twitter: https://twitter.com/programadornova
🔗 Linkedin: https://www.linkedin.com/in/programadornovato/
🔗 Instagram: https://www.instagram.com/programadornovato/

<<Anterior tutorial Siguiente tutorial >>

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)