[es] - Problem oko animacije

iizuzetan

Član broj: 186478
Poruke: 375
*.adsl.verat.net.

+16 Profil

^{29.08.2009. u 11:26 - pre 178 meseci}

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?

Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-a-1.sezampro.yu.

+33 Profil

Re: Problem oko animacije

^{29.08.2009. u 13:38 - pre 178 meseci}

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...

Odgovor na temu

iizuzetan

Član broj: 186478
Poruke: 375
*.adsl.verat.net.

+16 Profil

Re: Problem oko animacije

^{29.08.2009. u 14:09 - pre 178 meseci}

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.

Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

+44 Profil

Re: Problem oko animacije

^{29.08.2009. u 18:54 - pre 178 meseci}

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
}

rafforum.rs - Forum Računarskog Fakulteta

Odgovor na temu

iizuzetan

Član broj: 186478
Poruke: 375
*.adsl.verat.net.

+16 Profil

Re: Problem oko animacije

^{29.08.2009. u 19:15 - pre 178 meseci}

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?

Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

+44 Profil

Re: Problem oko animacije

^{29.08.2009. u 20:04 - pre 178 meseci}

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)

rafforum.rs - Forum Računarskog Fakulteta

Odgovor na temu

iizuzetan

Član broj: 186478
Poruke: 375
*.adsl.verat.net.

+16 Profil

Re: Problem oko animacije

^{29.08.2009. u 20:54 - pre 178 meseci}

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]}

Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

+44 Profil

Re: Problem oko animacije

^{29.08.2009. u 21:20 - pre 178 meseci}

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.

rafforum.rs - Forum Računarskog Fakulteta

Odgovor na temu

iizuzetan

Član broj: 186478
Poruke: 375
*.adsl.verat.net.

+16 Profil

Re: Problem oko animacije

^{30.08.2009. u 21:08 - pre 178 meseci}

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>

Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

+44 Profil

Re: Problem oko animacije

^{30.08.2009. u 21:57 - pre 178 meseci}

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...

rafforum.rs - Forum Računarskog Fakulteta

Odgovor na temu