• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Aktion bei drücken einer bestimmten pfeiltaste

littleHtml Freak

littleHtml Freak

Mitglied
Hallo,

ich versuche gerade "snake" mit javascript zu programmieren, aber komme nicht weiter, weil ich nirgedwo etwas darüber finde wie der skript auf tastatureingaben regieren kann!
ich habe nur den eventhandler onkeydown oder press gefunden aber die reagieren ja nur auf irgendeine eingabe.
wie kann ich laso sagen: mach das wenn pfeiltaste gedrückt
(ich weiß dass das ein if wird ;) )
hat wer eine ahnung wie ich das realisieren könnte?

viele grüße simon
 
ah das ist ja einfacher als ich dachte^^
geht zwar nicht mit den buschstaben aber das brauch ich ja nicht :D
trotzdem habe ich ein paar verständnisfragen dazu:
was bedeutet "!Ereignis"?
und was macht "window.event"?
aber schonmal danke =)

edit: und was mir gerade noch auffällt:
warum wird hier die funktion so komisch aufgerufen???
document.onkeypress = tastendruck;
und nicht mit
tastendruck(document.onkeypress);
ich verstehe nich wie ich den code der gedrückten taste in eine variable stecke...
wie geht das????
umsomehr ich mir das angucke desto weniger versteh ich^^ ist wohl doch nicht so einfach :/
 
Zuletzt bearbeitet:
littleHtml Freak schrieb:
ah das ist ja einfacher als ich dachte^^
geht zwar nicht mit den buschstaben aber das brauch ich ja nicht :D
Zum Vergrößern anklicken....

Geht auch, aber ist nicht nötig.

littleHtml Freak schrieb:
was bedeutet "!Ereignis"?
und was macht "window.event"?
Zum Vergrößern anklicken....

Steht da doch:

SelfHTML schrieb:
Beide Funktionen erwarten einen Parameter namens Ereignis. Über diesen Parameter können die Funktionen auf Eigenschaften des Event-Objekts zugreifen. Im Internet Explorer hingegen muss über window.event auf das Event-Objekt zugegriffen werden. Daher wird direkt am Anfang der beiden Funktionen mit einer if-Anweisung abgefragt, ob der Parameter Ereignis gesetzt wurde. Wenn dies nicht der Fall ist, wird das Event-Objekt aus window.event in der Variable Ereignis gespeichert. Dadurch steht das Event-Objekt auf jeden Fall in der Variable Ereignis zur Gebrauch.
Zum Vergrößern anklicken....

littleHtml Freak schrieb:
warum wird hier die funktion so komisch aufgerufen???
document.onkeypress = tastendruck;
und nicht mit
tastendruck(document.onkeypress);
Zum Vergrößern anklicken....

http://de.selfhtml.org/javascript/sprache/eventhandler.htmah%20das%20ist%20ja%20einfacher%20als%20ich%20dachte%5E%5E%20geht%20zwar%20nicht%20mit%20den%20buschstaben%20aber%20das%20brauch%20ich%20ja%20nicht%20:D[/QUOTE]%20%20Geht%20auch,%20aber%20ist%20nicht%20n%C3%83%C2%B6tig.%20%20
littleHtml%20Freak schrieb:
was%20bedeutet%20%22%21Ereignis%22?%20und%20was%20macht%20%22window.event%22?
Zum Vergrößern anklicken....
%20%20Steht%20da%20doch:%20%20
SelfHTML schrieb:
Beide%20Funktionen%20erwarten%20einen%20Parameter%20namens%20Ereignis.%20%C3%83%C2%9Cber%20diesen%20Parameter%20k%C3%83%C2%B6nnen%20die%20Funktionen%20auf%20Eigenschaften%20des%20Event-Objekts%20zugreifen.%20Im%20Internet%20Explorer%20hingegen%20muss%20%C3%83%C2%BCber%20window.event%20auf%20das%20Event-Objekt%20zugegriffen%20werden.%20Daher%20wird%20direkt%20am%20Anfang%20der%20beiden%20Funktionen%20mit%20einer%20if-Anweisung%20abgefragt,%20ob%20der%20Parameter%20Ereignis%20gesetzt%20wurde.%20Wenn%20dies%20nicht%20der%20Fall%20ist,%20wird%20das%20Event-Objekt%20aus%20window.event%20in%20der%20Variable%20Ereignis%20gespeichert.%20Dadurch%20steht%20das%20Event-Objekt%20auf%20jeden%20Fall%20in%20der%20Variable%20Ereignis%20zur%20Gebrauch.
Zum Vergrößern anklicken....
%20%20
littleHtml%20Freak schrieb:
warum%20wird%20hier%20die%20funktion%20so%20komisch%20aufgerufen???%20document.onkeypress%20=%20tastendruck;%20und%20nicht%20mit%20tastendruck%28document.onkeypress%29;
Zum Vergrößern anklicken....
%20%20http://de.selfhtml.org/javascript/sprache/eventhandler.htm"]
 
Zuletzt bearbeitet:
danke aber wie kann ich denn dann den tasten code (z.b. rechts = 39) in eine variable speichern wenn diese taste gedrückt wird?

(beim letzten link fehlt ein l)
 
! ist der NOT-Operator. Einfach gesagt: Er dreht den Wert einer boolschen Variablen um. Enthält die Variable ein true, liefert er ein false und umgekehrt.

!Ereignis bedeutet grob dasselbe wie Ereignis == false oder Ereignis != true.

Das ist an der Stelle eine Browserweiche für das abweichende Event-Model des Internet Explorers.
 
Genau wie in dem Beispiel auf SelfHTML:

Code: 
if (Ereignis.which) {     
    Tastencode = Ereignis.which; 
} else if (Ereignis.keyCode) {     
    Tastencode = Ereignis.keyCode;
}

Oder kürzer:

Code: 
var Tastencode = Ereignis.which || Ereignis.keyCode
 
und wie baue ich das außerhalb der funktion in den code ein?!
Code: 
function tastendruck (ereignis) {
                        if (!ereignis)
                        ereignis = window.event;
                     var tastencode = ereignis.which || ereignis.keyCode;
                     alert(tastencode);
}
document.onkeypress = tastendruck;
so gehts
Code: 
function tastendruck (ereignis) {
                        if (!ereignis)
                        ereignis = window.event;
                     var tastencode = ereignis.which || ereignis.keyCode;
                     return tastencode;
}
 document.onkeypress = tastendruck;
             var z = tastendruck();
             alert(z);
so nicht
ich bracuhe die variable tastencode aber außerhalb der tastendruck funktion um dann zu überprüfen welche taste gedrückt wurde und dann eben eine die richtung zu ändern

viele grüße simon
PS: tut mir leid, wenn ich mich grad sehr doof anstelle aber ich bin eben doch noch ein mehr oder weniger blutiger anfänger :-?
 
mal ganz doof gefragt:
wie geht das:
wenn rechte taste gedrückt x= x+10
wenn runter gedrückt y = y -10
?
ich verstehe nämlich nicht wie du meinst dass ich das machen soll
trotzdem schonmal danke für die mühe ;)
 
Auf der Seite kannst du ja sehen welchen Code die einzelnen Tasten haben. Wenn z.B. die rechte Pfeiltaste geklickt wird, gehst du folgendermaßen vor:

Code: 
if (keycode == 39) {
    // ...
}
Hier mal ein gut gemeinter Rat: beschäftige dich erst vollständig mit Javascript, bevor du dir so große Aufgaben vornimmst, wie Snake zu programmieren.

edit: hier mal eine Javascript-Snake-Lösung: http://patorjk.com/games/snake/
oder hier: http://derletztekick.com/javascript/snake
 
Zuletzt bearbeitet:
ok ich glaube du verstehst nicht was ich wissen will ;) warscheinlich frag ich nicht genau genug...
also:
ich bin inzwischen soweit dass ich ganau sagen kann wo die abfrage der pfeiltasten hinsoll
Code: 
function bewegung(interval) {
        var richtung = r;
if(richtung == r) x++;
if(richtung == l)x--;
if(richtung == u)y--;
if(richtung == o)y++;
        var laenge = 3;
        window.id;
        hinzufuegen(id,x,y);
        id++;
        if (id > 3){
           id = id - laenge -1;
           loeschen(id);
        }
        
        if(x > 380 || y > 380 || x < 10 || y < 10){
             window.clearInterval(interval);
             alert("Du hast leider verloren!");
        }
         
}
die variable richtung soll immer dann geändert werden wenn eine pfeiltaste gedrückt wird
ich weiß jetzt aber nicht wie ich den entsprechenden wert übergeben soll!
normalerweise würde ich es so machen:
Code: 
function tastendruck (ereignis) {
                         if (!ereignis)
                         ereignis = window.event;
                         var tastencode = ereignis.which || ereignis.keyCode;
                         return tastencode; 
}
var richtung = tastendruck(welche variable soll da jetzt rein???);
bzw
var richtung = tastendruck; //geht auch nicht
das ist das was ich nicht verstehe und auch keine antwort finde
viele grüße und ich hoffe mein problem ist jetzt klar geworden :D
PS: ich weiß was if ist ;)
 
Zuletzt bearbeitet:
welche variablen?
außer laenge und tastencode ist nämlich keine innerhalb deklariert.. soweit ich das sehe
mein problem ist einfach dass ich nicht weiß wie ich mit der funktion tastendruck umgehen soll.
normalerweise rufe ich (ruft man?) eine funktion z.b. so auf wenn man mit der funktion etwas errechnen will(in meinem fall sozusagen der tastencode der gedrückten pfeiltaste):
var hallo = funktion(übergebene variablen);
bei dieser weiß ich aber nicht wie ich das machen soll weil sie anders zu sein scheint
sie wird ja so aufgerufen:
document.onkeypress = tastendruck;
so wie ich das kenne fehelen da die übergebene variable (ereignis) und sogar die klammern
gruß
 
Zuletzt bearbeitet:
Die Variabel richtung (du hast ja mittlerweile den Code geändert).
Es geht nur um die Deklaration, den Wert zuweisen musst du in der Eventfunktion.

Code: 
var richtung; // Deklaration
function tastendruck (ereignis) {
   if (!ereignis)ereignis = window.event;
   richtung =  = ereignis.which || ereignis.keyCode; // Zuweisung
}
 
Zu deinem Verständnis:
Bei

Code: 
document.onkeydown = eineFunction;


wird der Objekt-Eigenschaft "onkeydown" des Objektes "document" der "Zeiger" einer Funktion zugewiesen. Das heißt diese Eigenschaft verweist auf eine Funktion anstatt einen primitiven Wert zu haben. Wenn nun im Dokument eine Taste gedrückt wird, wird das Event "keydown" gefeuert und der Event-Handler, den du festgelegt hast, aufgerufen, durch den Browser beispielsweise durch

Code: 
document.onkeydown( Event );
// oder
document.onkeydown.call( document, Event );
// oder
document.onkeydown.apply( document, Event );

aufgerufen.

Zu Function.call und Function.apply:
Im Prinzip tun diese beiden Funktionen nichts anderes als das, was du schon so gewohnt bist, außer dass sie noch einen Scope mitliefern (also das, was du innerhalb der Funktion mit this erhältst).
 
vielen dank jetzt verstehe ich was du meinst ;)
es sieht jetzt so aus und funktioniert soweit einwandfrei :D
ich muss nur noch die "kekse" hinzufügen was nicht weiter schwer sein dürfte...
vielen dank!
der code sieht jetzt so aus:
Code: 
function tastendruck (ereignis) {

                      window.richtung;
                        if (!ereignis)
                        ereignis = window.event;
                       //alert(ereignis.keyCode);
                     richtung = ereignis.which || ereignis.keyCode;
                     

}
Code: 
function bewegung(interval) {

        var laenge = 3;
        window.richtung;
        if(richtung == 37){window.x = x-10;}
        if(richtung == 38){window.y = y-10;}
        if(richtung == 39){window.x = x+10;}
        if(richtung == 40){window.y = y+10;}
        window.id;
        hinzufuegen(id,x,y);
        id++;
        if (id > 3){
           id = id - laenge -1;
           loeschen(id);
        }
        
        if(x > 380 || y > 380 || x < 10 || y < 10){
             window.clearInterval(interval);
             alert("Du hast leider verloren!");
        }
         
}
und die sozusagen "main funktion"
Code: 
var richtung = 39;
              var id = 0;
             var x = 200;
             var y = 200;
             document.onkeydown = tastendruck;
             var interval = window.setInterval("bewegung(interval)", 100);
nach mla vielen dank für die ausführliche hilfe :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben