Autor Zpráva
Miky
Profil *
Chtěl jsem odchytit zmáčknutí šipek a podle toho posunovat obrázek po stránce. Nechápu, proč mi nefunguje toto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pohyb podle šipek</title>
<script type="text/javascript">
var zleva = 50;
var shora = 50;
var jitvlevo;
var jitnahoru;
var jitdoprava;
var jitdolu;

function keyDown(event){switch(event.keyCode){case 37: zacatekvlevo(); break; case 38: zacateknahoru(); break; case 39: zacatekdoprava(); break; case 40: zacatekdolu(); break;}}
function keyUp(event){switch(event.keyCode){case 37: konecvlevo(); break; case 38: konecnahoru(); break; case 39: konecdoprava(); break; case 40: konecdolu(); break;}}

function posunvlevo(){if(zleva>10){zleva-=1; document.getElementById("panak").style.left = zleva+"px";}}
function posunnahoru(){if(shora>10){shora-=1; document.getElementById("panak").style.top = shora+"px";}}
function posundoprava(){if(zleva<500){zleva+=1; document.getElementById("panak").style.left = zleva+"px";}}
function posundolu(){if(shora<500){shora+=1; document.getElementById("panak").style.top = shora+"px";}}

function zacatekvlevo(){jitvlevo=window.setInterval("posunvlevo()",1000);}
function zacateknahoru(){jitnahoru=window.setInterval("posunnahoru()",1000);}
function zacatekdoprava(){jitdoprava=window.setInterval("posundoprava()",1000);}
function zacatekdolu(){jitdolu=window.setInterval("posundolu()",1000);}

function konecvlevo(){window.clearInterval(jitvlevo);}
function konecnahoru(){window.clearInterval(jitnahoru);}
function konecdoprava(){window.clearInterval(jitdoprava);}
function konecdolu(){window.clearInterval(jitdolu);}
</script>
</head>
<body onKeyDown="keyDown(event)" onKeyUp="keyUp(event)">
<div id="panak" style="position: absolute; left: 50px; top: 50px"><img src="panacek.png"></div>
</body>
</html>


Respektive ono to funguje, ale ne tak jak bych si to predstavoval. Po zmáčknutí šipky se začne pohybovat, ale po uvolnění klávesy se pohybovat nepřestane. Další problém je, že je to celé rozřesené. Díky za rady, popřípadě funkční řešení.
Louka
Profil
místo setInterval zkus setTimeout...
// EDIT: To je asi blbost, špatně jsem to pochopil :).
Miky
Profil *
dík, se setTimeout a rekurzí funguje
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pohyb podle šipek</title>
<script type="text/javascript">
var zleva = 50;
var shora = 50;
var jitvlevo;
var jitnahoru;
var jitdoprava;
var jitdolu;

function keyDown(event){switch(event.keyCode){case 37: jitvlevo=1; zacatekvlevo(); break; case 38: jitnahoru=1; zacateknahoru(); break; case 39: jitdoprava=1; zacatekdoprava(); break; case 40: jitdolu=1; zacatekdolu(); break;}}
function keyUp(event){switch(event.keyCode){case 37: jitvlevo=0; break; case 38: jitnahoru=0; break; case 39: jitdoprava=0; break; case 40: jitdolu=0; break;}}

function posunvlevo(){if(zleva>10){zleva-=1; document.getElementById("panak").style.left = zleva+"px";}}
function posunnahoru(){if(shora>10){shora-=1; document.getElementById("panak").style.top = shora+"px";}}
function posundoprava(){if(zleva<500){zleva+=1; document.getElementById("panak").style.left = zleva+"px";}}
function posundolu(){if(shora<500){shora+=1; document.getElementById("panak").style.top = shora+"px";}}

function zacatekvlevo(){if(jitvlevo==1){posunvlevo(); window.setTimeout("zacatekvlevo()", 100);}}
function zacateknahoru(){if(jitnahoru==1){posunnahoru(); window.setTimeout("zacateknahoru()", 100);}}
function zacatekdoprava(){if(jitdoprava==1){posundoprava(); window.setTimeout("zacatekdporava()", 100);}}
function zacatekdolu(){if(jitdolu==1){posundolu(); window.setTimeout("zacatekdolu()", 100);}}
</script>
</head>
<body onKeyDown="keyDown(event)" onKeyUp="keyUp(event)">
<div id="panak" style="position: absolute; left: 50px; top: 50px"><img src="panacek.png"></div>
</body>
</html>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0