Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!--
- To change this license header, choose License Headers in Project Properties.
- To change this template file, choose Tools | Templates
- and open the template in the editor.
- -->
- <html>
- <head>
- <title>TODO supply a title</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width">
- <style type="text/css">
- .boton1{
- position: absolute;
- top: 90%;
- }
- .boton2{
- position: absolute;
- top: 90%;
- left: 30%;
- }
- #manzana{
- position: absolute;
- //width:3%;
- z-index:1;
- }
- #arbol{
- position: absolute;
- left: 80%;
- top: 28%;
- width:15%;
- z-index:0;
- }
- #caminar{
- position: absolute;
- width: 4%;
- z-index:1;
- }
- #fondo{
- position: absolute;
- width: 90%;
- height: 80%;
- z-index:0;
- }
- </style>
- <script language="javascript">
- var vuelta=0;
- var anim;
- function iniciar() {
- anim = setInterval(function(){
- var elemento = document.getElementById("caminar");
- var manzana =document.getElementById("manzana");
- var avanzar = parseFloat(elemento.style.left.substring(0, elemento.style.left.length - 1));
- var subir = parseFloat(elemento.style.top.substring(0, elemento.style.top.length - 1));
- var manzal = parseFloat(manzana.style.left.substring(0, manzana.style.left.length -1));
- var manzat = parseFloat(manzana.style.top.substring(0, manzana.style.top.length -1));
- var tamano = parseFloat(manzana.style.width.substring(0,manzana.style.width.length -1));
- if(vuelta == 0){
- avanzar = avanzar + 1;
- if(avanzar >=0 && avanzar <=22){
- subir-=0.5;
- elemento.style.left = avanzar + '%';
- elemento.style.top = subir + '%';
- }
- if(avanzar >=22 && avanzar <=30){
- elemento.style.left = avanzar + '%';
- }
- if(avanzar >=30 && avanzar <=47){
- subir+=0.4;
- elemento.style.left = avanzar + '%';
- elemento.style.top = subir + '%';
- }
- if(avanzar >=47 && avanzar <=60){
- subir-=0.5;
- elemento.style.left = avanzar + '%';
- elemento.style.top = subir + '%';
- }
- if(avanzar >=60 && avanzar <=62){
- elemento.style.left = avanzar + '%';
- }
- if(avanzar >=62 && avanzar <=73){
- subir+=0.5;
- elemento.style.left = avanzar + '%';
- elemento.style.top = subir + '%';
- }
- if(avanzar >=73 && avanzar <=87){
- subir-=0.7;
- elemento.style.left = avanzar + '%';
- elemento.style.top = subir + '%';
- }
- if(avanzar==87){
- subir-=19;
- elemento.style.top = subir + '%';
- elemento.style.transform = "rotateY(180deg)";
- }
- if(avanzar==88){
- subir+=19;
- manzat+=40;
- elemento.style.top = subir + '%';
- manzana.style.top = manzat + '%';
- vuelta=1;
- }
- }
- if(vuelta==1){
- avanzar = avanzar - 1;
- manzal = manzal - 1;
- if(avanzar >=73 && avanzar <=87){
- subir+=0.7;
- elemento.style.left = avanzar + '%';
- elemento.style.top = subir + '%';
- manzana.style.top = subir + '%';
- manzana.style.left = manzal + '%';
- }
- if(avanzar >=62 && avanzar <=73){
- subir-=0.5;
- elemento.style.left = avanzar + '%';
- elemento.style.top = subir + '%';
- manzana.style.top = subir + '%';
- manzana.style.left = manzal + '%';
- }
- if(avanzar >=60 && avanzar <=62){
- elemento.style.left = avanzar + '%';
- manzana.style.left = manzal + '%';
- }
- if(avanzar >=49 && avanzar <=60){
- subir+=0.5;
- elemento.style.left = avanzar + '%';
- elemento.style.top = subir + '%';
- manzana.style.top = subir + '%';
- manzana.style.left = manzal + '%';
- }
- if(avanzar<50 && tamano<100){
- tamano+=1;
- subir-=4;
- manzana.style.width = tamano + '%';
- manzana.style.top = subir + '%';
- manzana.style.left = manzal + '%';
- }
- }
- },100);
- }
- function parar() {
- clearInterval(anim);
- }
- </script>
- </head>
- <body>
- <img id="fondo" src="fondo.jpg"/>
- <img id="caminar" style="top: 59%; left: 0%" src="caminant.gif"/>
- <img id="arbol" src="arbol.png"/>
- <img id="manzana" style="left: 87%; top: 30%; width: 3%" src="manzana.png"/>
- <input class="boton1" type="button" value="iniciar animacion" onclick="iniciar()"/>
- <input class="boton2" type="button" value="detener animacion" onclick="parar()"/>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement