 Plynnosc animacji, Jquery keypress settimout albo setinterval |
  |
| Plynnosc animacji, Jquery keypress settimout albo setinterval |
 27.04.2014, 17:49:54
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 28 Pomógł: 0 Dołączył: 5.04.2014 Ostrzeżenie: (0%) 
 |
Witam,
Chciałbym ogarnąć sobie js + jquery, a żeby to zrobić to trzeba pisać, bez tego sie nei obejdzie  Zacząłem robić gierke, mam zamiar później dodać skok, jakąś walke, może nawet statystki (wszystko w celach edukacyjnych), ale narazie męcze się z animacją postaci. jest ona oparta na Spirte, w moim przypadku żeby animacja szła do przodu musi być background-position: Xpx 154px; Przy czym X z przedziału [0,80,160,240]; mimo że ustawiam settimeout albo setinterval na 200ms 500ms 1000ms to po przytrzymaniu klawisza idzie to duzo duzo szybciej. Otworzcie konsole to mozecie to zobaczyc, Wypiasana jest tam wartosc X. Tutaj jest link: http://176.122.228.58/artur/jquery/index.php.html Klawisz A i D A tutaj code Kod <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Demo</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script> <script src="libs/jquery.spritely.js"></script> <script>var bgleft=0;</script> <script> $(document).ready(function(){ $('body').keypress(function(event){ $('body').keyup(function(event){ clearTimeout(animacja); }); klawisz = event.keyCode; console.log(klawisz); console.log(bgleft); var animacja = false; if (klawisz == 100){ if(bgleft>240){ bgleft=0; } animacja = false; $('#char').animate({ "left":"+=8px" },10); var animacja = setTimeout(function(){ $('#char').css('background-position',""+bgleft+"px 154px"); bgleft+=80; },500); } if (klawisz == 97){ if(bgleft>240){ bgleft=0; } $('#char').animate({ "left":"-=8px" },5); animacja = setTimeout(function(){ $('#char').css('background-position',""+bgleft-5+"px 230px"); bgleft+=80; },500); } if (klawisz == 119){ $('#char').animate({ "top":"-=0px" },500); } if (klawisz == 115){ $('#char').animate({ "top":"+=0px" },500); } }); }); </script> </head> <body> <embed height="1" width="1" src="images/theme.mp3"> <script> var styl="background: url('images/chmura.png'); width:100%;height:111px;position:absolute;"; document.write('<div id="chmurki" style="'+styl+'top:50; px;padding-left:0px;"></div>'); $('#chmurki').pan({fps: 30, speed: 3, dir: 'left'}); </script> <div id="char"></div> <div id="ground"></div> <div id="wypelnienie"></div> </body> </html> Dziękuje z góry za pomoc 
Ten post edytował Stiffler 27.04.2014, 17:59:25 |
 |
 
|
|
|
Wersja Lo-Fi | Aktualny czas: 13.06.2025 - 09:08 |
