Witam,
Chciałbym ogarnąć sobie js + jquery, a żeby to zrobić to trzeba pisać, bez tego sie nei obejdzie smile.gif
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 smile.gif
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 wink.gif