Hallo,
ich habe zwei Probleme im Zusammenhang mit JavaScript und der korrekten Verarbeitung von Tastatureingaben.
Zum einen "hakt"/hängt das Ganze, wenn man eine Taste gedrückt hält: Ich drücke also die linke Pfeiltaste und halte sie gedrückt, der Spielstein bewegt sich kurz, hält an und bewegt sich erst nach diesem kurzen Hänger ununterbrochen weiter.
Das zweite Problem ist, dass man nicht mehrere Tasten gleichzeitig abfragen kann. 100%ig gleichzeitig geht es nicht, das ist mir schon klar, aber irgendwie muss das doch gehen, dass es zumindest fast danach aussieht.
Also das sich der Spielstein diagonal bewegen kann, wenn man Pfeiltaste links und oben drückt, zum Beispiel.
Was ich bisher schon erfolglos probiert habe: verschiedene Events ausprobiert (onkeypress, -up, -down); gleichzeitiges Abfragen (aber der event.keyCode ist ja leider kein Array o.ä.).
Hier der Quellcode:
Der Aufruf erfolgt so: <body onload="javascript:Init(); Draw(); Move(event);" onkeypress="javascript:Move(event);">
Abrufbar unter: http://www.php-xhtml.de/pub/html5/arkanoid.html
Ich freue mich auf Ideen und Ratschläge!
ich habe zwei Probleme im Zusammenhang mit JavaScript und der korrekten Verarbeitung von Tastatureingaben.
Zum einen "hakt"/hängt das Ganze, wenn man eine Taste gedrückt hält: Ich drücke also die linke Pfeiltaste und halte sie gedrückt, der Spielstein bewegt sich kurz, hält an und bewegt sich erst nach diesem kurzen Hänger ununterbrochen weiter.
Das zweite Problem ist, dass man nicht mehrere Tasten gleichzeitig abfragen kann. 100%ig gleichzeitig geht es nicht, das ist mir schon klar, aber irgendwie muss das doch gehen, dass es zumindest fast danach aussieht.
Also das sich der Spielstein diagonal bewegen kann, wenn man Pfeiltaste links und oben drückt, zum Beispiel.Was ich bisher schon erfolglos probiert habe: verschiedene Events ausprobiert (onkeypress, -up, -down); gleichzeitiges Abfragen (aber der event.keyCode ist ja leider kein Array o.ä.).
Hier der Quellcode:
Code:
function Init()
{
ctx = document.getElementById("canvas").getContext("2d");
xBall = 160;
yBall = 400;
speed = 4;
keyLeft = 37;
keyUp = 38;
keyRight = 39;
keyDown = 40;
}
function Draw()
{
//the gamefield
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.fillRect(10, 10, 300, 500);
}
function Move(event)
{
if (!event)
event = window.event;
ctx.fillStyle = "black";
ctx.fillRect(xBall, yBall, 30, 20);
switch (event.keyCode)
{
case keyLeft:
xBall -= speed; break;
case keyRight:
xBall += speed; break;
case keyUp:
yBall -= speed; break;
case keyDown:
yBall += speed; break;
}
ctx.fillStyle = "white";
ctx.fillRect(xBall, yBall, 30, 20);
}Der Aufruf erfolgt so: <body onload="javascript:Init(); Draw(); Move(event);" onkeypress="javascript:Move(event);">
Abrufbar unter: http://www.php-xhtml.de/pub/html5/arkanoid.html
Ich freue mich auf Ideen und Ratschläge!
