Autor Zpráva
Klok
Profil *
Potreboval by som ovladanie objektov pomocou sipiek.

Napr. pri stlaceni sipky doprava by sa doprava posunul modry stvorec

function posun()
{
x += 5;
document.getElementById('objekt').style.top = "x";
}

pre

<div id="objekt" style="position:absolute; width: 20px; height: 20px; background-color: blue;"></div>

Problem je, ze neviem ako mam spravit to, aby sa tento ukon stal po stlaceni pozadovanej klavesy (napr. spominanej sipky)
Joker
Profil
navážete nějakou svou funkci na stisknutí klávesy (onkeypress, onkeydown nebo onkeyup) a zjistíte si kód stisknuté klávesy přes window.event.keyCode
Najdete si kódy šipek, no a dál už je to snadné ;)
Klok
Profil *
Dakujem, sice nejaky pohyb nastal, ale v zasade mi to stale nefungovalo. Bol by som vdacny keby mi niekto napisal ten scriptik na pohyb stvorca sipkami fungujuci v IE, Mozille aj Opere.
Klok
Profil *
A dodavam, ze pohyb nastal iba s keypress ...
Klok
Profil *
napisal som to takto:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
x = 0;
y = 0;
<!--
function posun(a)
{
a=event.keyCode;
if (a==37) {x=x-10}
if (a==39) {x=x+10}
if (a==38) {y=y-10}
if (a==40) {y=y+10}
if (x==-10) {x=x+10}
if (y==-10) {y=y+10}
if (x==200) {x=x-10}
if (y==200) {y=y-10}
document.getElementById('objekt').style.left = x; /* skusal som obe varianty aj top aj pixelTop*/
document.getElementById('objekt').style.top = y;
/*document.getElementById('objekt').style.pixelLeft = x;
document.getElementById('objekt').style.pixelTop = y; */
}
-->
</script>

</head>

<body onkeypress="posun();">
<div id="objekt" style="position:absolute; top: 0px; left: 0px; width: 20px; height: 20px; background-color: blue;"></div>


</body>
</html>

Funguje to, ale iba v Opere. V Mozille a IE nie.

Ako to spravit, aby to fungovalo aj tam?
peta
Profil *
http://www.volny.cz/peter.mlich/hry/hry.htm
sokoban, arkanoid, ...
Joker
Profil
Funkci deklarujete s parametrem a pak jí voláte bez parametru. Vyhoďte ten parametr z deklarace.
Jinak narozdíl od Vás u mě teda právě onkeypress nefunguje v Internet Exploreru. Naopak onkeydown mi funguje v Opeře i Internet Exploreru.
A ještě bych dodal, že některé prohlížeče místo event.keyCode používají event.which.
Takže bych udělal asi něco jako:
kod = event.keyCode ? event.keyCode : event.which;
a pak porovnával proměnnou kod.

Taky místo té sady IFů by bylo lepší udělat switch. Taky bych to trochu zjednodušil a zobecnil, aby případné přepisování třeba vzdálenosti posunu nebyla fuška na půl dne:
var x = 0;
var y = 0;
var xmax = 200;
var ymax = 200;
var posun = 10;
(...)

switch(kod){
case 37: if(x >= posun) x -= posun; break;
case 39: if(x <= (xmax-posun)) x += posun; break;
case 38: if(y >= posun) y -= posun; break;
case 40: if(y <= (ymax-posun)) y += posun; break;
}

A ještě jeden tip, namísto inline deklarace můžete rovnou zaregistrovat funkci obsluhující událost:
místo
function posun(a)
dáte:
document.onkeydown = function()
{
...
peta
Profil *
Joker
jeste bych to vylepsil...
var x,y,posun;
x=0;
y=0;
posun = 10;
var xy = new Array(0+posun,0+posun,200-posun,200-posun);

switch(kod)
{
case 37: if (x >= xy[0]) {x -= posun;} break;
case 39: if (x <= xy[2]) {x += posun;} break;
case 38: if (y >= xy[1]) {y -= posun;} break;
case 40: if (y <= xy[3]) {y += posun;} break;
}

1. tim padem pri kazdem stisku se neodcitavaji
xmax-posun nybrz jsou uvedene jako konstanta, v mem pripade pole.
2. cyklus switch je ukoncen v okamziku, kdy uz neni potreba porovnavat s dalsim case
3. Pro mne - libi se mi tam to porovnavani souradnic, ja to delal zbytecne komplikovane nejdrive inkrementaci, pak porovnanim, kdyz muzu primo porovanat a tim usetrit cas. Dik
Joker
Profil
peta
Ty break; na konci jsou moje chyba, jsem zapomněl. Opravím
Klok
Profil *
Vsetkym Vam dakujem. Rady mi pomohli.
Toto téma je uzamčeno. Odpověď nelze zaslat.

0