Problem oko animacije

Problem oko animacije 29.08.2009. u 12:26 · pre 209 meseci #1

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?

Re: Problem oko animacije 29.08.2009. u 14:38 · pre 209 meseci #2

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

Re: Problem oko animacije 29.08.2009. u 15:09 · pre 209 meseci #3

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.

Re: Problem oko animacije 29.08.2009. u 19:54 · pre 209 meseci #4

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
}

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Re: Problem oko animacije 29.08.2009. u 20:15 · pre 209 meseci #5

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?

Re: Problem oko animacije 29.08.2009. u 21:04 · pre 209 meseci #6

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)

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Re: Problem oko animacije 29.08.2009. u 21:54 · pre 209 meseci #7

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

Re: Problem oko animacije 29.08.2009. u 22:20 · pre 209 meseci #8

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.

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Re: Problem oko animacije 30.08.2009. u 22:08 · pre 209 meseci #9

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>

Re: Problem oko animacije 30.08.2009. u 22:57 · pre 209 meseci #10

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

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Re: Problem oko animacije 31.08.2009. u 02:16 · pre 209 meseci #11

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

Forum kao aplikacija na telefonu

Srodne teme