Problem oko animacije

[ iizuzetan @ 29.08.2009. 11:26 ] @

Prvo cu dati kod pa onda cu postaviti pitanje:

Code:

    <script language="JavaScript">
    var poz0=[10,10]

    function document.onkeydown(){taster()}

    function taster(e){
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "white";
        ctx.fillRect (poz0[0], poz0[1], 50, 50);
        if(event.keyCode==37) poz0[0]--
        if(event.keyCode==39) poz0[0]++
        if(event.keyCode==38) poz0[1]--
        if(event.keyCode==40) poz0[1]++
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (poz0[0], poz0[1], 50, 50);
    }
    window.onload=document.onkeydown
    </script>

    <body>
    <canvas id="canvas" width="300" height="300"></canvas>
    </body>

Ovaj kod radi ali ne onako kako zelim. Naime kao sto vidite u pitanju je kvadratic koji se pomera ulevo i udesno u zavisnosti koju strelicu na tastaturi pritisnete, gore, dole, levo, desno. Znaci kvadratic se pomera samo kad se naizmenicno pritiskaju tasteri ("drukanjem") a ja bih hteo da se kvadratic stalno pomera dokle god se drzi taster. Kako to da napravim? Naime da bih taj efekat postigao ja sam pokusao ubacivanjem window.onload=document.onkeydown medjutim ne funkcionise. A isto radi i bez toga na primer (samo sto se odma ne vidi kvadratic vec treba prvo pritisnuti neku strelicu):

Code:

    <script language="JavaScript">
    var poz0=[10,10]

    document.onkeydown=taster

    function taster(e){
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "white";
        ctx.fillRect (poz0[0], poz0[1], 50, 50);
        if(event.keyCode==37) poz0[0]--
        if(event.keyCode==39) poz0[0]++
        if(event.keyCode==38) poz0[1]--
        if(event.keyCode==40) poz0[1]++
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (poz0[0], poz0[1], 50, 50);
    }
    </script>

    <body>
    <canvas id="canvas" width="300" height="300"></canvas>
    </body>

Znaci da rezimiram pitanje, kako da postignem da dokle god se drzi neka stralica da se stalno u tom pravcu pomera kvadratic?

[ Nikola Poša @ 29.08.2009. 13:38 ] @

Probaj sa ovim događajem: http://www.w3schools.com/jsref/jsref_onkeypress.asp.

btw Čini mi se da imaš i grešku u kodu, jer ti toj callback f-ji taster() prosleđuješ argument sa imenom e, a u tim if-ovima koristiš neku promenjljivu event...

[ iizuzetan @ 29.08.2009. 14:09 ] @

to e se moze izbaciti. I bez njega radi skripta.

Sadrzaj pritisnutog tastera se otkriva pomocu event objekta koji se salje proceduri za obradu dogaraja. Event je dakle jako bitan objekat dokumenta.

Sad cu pogledati ovo sto si predlozio.

[ Aleksandar Ružičić @ 29.08.2009. 18:54 ] @

event je globalni event objekat u Internet Exploreru, kod normalnih browsera to je ono e koje se prosledjuje event handleru, dakle ispravno resenje je:

Code:

function callback(e) {
e = e || event;
// dalje koristi e
}

[ iizuzetan @ 29.08.2009. 19:15 ] @

Citat:

Aleksandar Ružičić: event je globalni event objekat u Internet Exploreru, kod normalnih browsera to je ono e koje se prosledjuje event handleru, dakle ispravno resenje je:

Code:

function callback(e) {
e = e || event;
// dalje koristi e
}

Da to si u pravu. Medjutim ok je to, nego jos uvek nisam uspeo da resim moj problem da kad drzim taster da se pomera kvadrat. Da li bi neko mogo da mi pomogne?

[ Aleksandar Ružičić @ 29.08.2009. 20:04 ] @

to bi mogao da uradis recimo ovako:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <script type="text/javascript">

            var poz0 = [10, 10], ctx;

            window.onload = function() {
                var canvas = document.getElementById('canvas');
                if (canvas) {
                    ctx = canvas.getContext('2d');
                }
            };

            document.onkeydown = function(e) {
                if (!ctx) return;

                ctx.fillStyle = 'white';
                ctx.fillRect (poz0[0], poz0[1], 50, 50);

                var step = 3;

                switch ((e || event).keyCode) {
                    case 37:    poz0[0] -= step;    break;
                    case 39:    poz0[0] += step;    break;
                    case 38:    poz0[1] -= step;    break;
                    case 40:    poz0[1] += step;    break;
                }

                ctx.fillStyle = 'rgb(200,0,0)';
                ctx.fillRect (poz0[0], poz0[1], 50, 50);
            };
        </script>
    </head>
    <body>
        <canvas id="canvas" width="300" height="300"></canvas>
    </body>
</html>

meni ovo radi bez problema na ff...

ovo je u sustini isti kod koji si ti koristio, samo malo drugacije napisan (tvoj nisam testirao, btw)

[ iizuzetan @ 29.08.2009. 20:54 ] @

Da u pravu si hoce i tvoj a i moj KOD u mozilin fajerfoks. Medjutim nece u OPERU. U operu se kvadratic krece samo kad se naizmenicno klikcu strelice na tastaturi. U Internet Explorer se cak ne pojavljuje ni kvadratic !!! Sta mislite zasto se tako razlicito ponasaju internet preglednici, i sta bih trebao da napisem u kodu da bi skripta svuda radila????????

_{[edit: uklonjen suvisan citat]}

_{[Ovu poruku je menjao Aleksandar Ružičić dana 29.08.2009. u 22:17 GMT+1]}

[ Aleksandar Ružičić @ 29.08.2009. 21:20 ] @

Iskreno mrzi me sada da testiram u Operi (da budem iskren nisam do sada nista sa canvasom radio u tom browseru...), ali ako to ne radi ona idi malo drugacijom logikom:

1. onkeydown pokreni tajmer (sa setInterval) koji ce pozivati funkciju koja pomera kvadrat u zavisnosti od pritisnutog tastera
2. onkeyup jednostavno ubijes tajmer sa clearInterval

ovo bi moralo da radi.

[ iizuzetan @ 30.08.2009. 21:08 ] @

Konacno sam uspeo da resim problem. Sad radi savrseno i u mozilu a i u operu !!

Code:

<script type="text/javascript">
var strelica = [0,0,0,0]
var poz0 = [10, 10]
var canvas;

function crtanje(){
      canvas.clearRect(0,0,400, 300);
      canvas.fillStyle = 'rgb(200,0,0)';
      canvas.fillRect (poz0[0], poz0[1], 50, 50);
}

function racunanje(){
    var promena=false;

    if (strelica[0]) {poz0[0]--; promena=true;}
    else if (strelica[1]) {poz0[0]++; promena=true;}

    if (strelica[2]) {poz0[1]--; promena=true;}
    else if (strelica[3]) {poz0[1]++; promena=true;}

    if (promena) crtanje();
}

function promenaTaster(kod, pomeraj){
    switch (kod){
        case 65: case 37: strelica[0]=pomeraj; break;
        case 87: case 38: strelica[2]=pomeraj; break;
        case 68: case 39: strelica[1]=pomeraj; break;
        case 83: case 40: strelica[3]=pomeraj; break;
    }
}

document.onkeydown=function(e){
    promenaTaster((e||window.event).keyCode, 1);
}

document.onkeyup=function(e){
    promenaTaster((e||window.event).keyCode, 0);
}

window.onload=function(){
    canvas=document.getElementById("canvas").getContext("2d");
    crtanje();
    setInterval("racunanje()", 1);
}
</script>

<body>
<canvas id="canvas" width="400" height="300" style="position: absolute; background-color: #C0C0C0"></canvas>
</body>

[ Aleksandar Ružičić @ 30.08.2009. 21:57 ] @

drago mi je da si uspeo, ali moram da napomenem da ti resenje nije uopste optimalno :) imas tajmer koji se izvrsava svake milisekunde (tacnije neki browseri ce to da zakucaju na 10 ms ali i to je opet mnogo), bespotrebno...

[ iizuzetan @ 31.08.2009. 01:16 ] @

Pa ok ovo je vezba a mogu da promenim naravno na vecu vrednist