Witam,
Chciałbym ogarnąć sobie js + jquery, a żeby to zrobić to trzeba pisać, bez tego sie nie obejdzie :)
Zacząłem robić gierke, mam zamiar później dodać skok, jakąś walke, może nawet statystki (wszystko w celach edukacyjnych), ale na razie 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
<!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 ;)