Javascript-Event-Listener nicht boolescher Wert

Question

aktualisieren Ich versuche, ein sehr einfaches JavaScript-Spiel mit dem HTML5 Canvas zu erstellen. Also habe ich einen Hauptspieler "class" erstellt, der beim Instanziieren und Aufrufen der "init-Methode" einen roten Kreis auf der Leinwand erzeugen soll. Schließlich sollte es auch über die Pfeiltasten steuerbar sein. Um dies zu tun, habe ich versucht, dem Dokument Ereignislistener hinzuzufügen, indem ich nach Keydown/keyup suche, die dann boolesche Werte wie leftPressed = true ändern würden; usw. Auf dieser Grundlage sollte die dispose-Methode (aufgerufen in der setInterval-Funktion draw) die Position des roten Kreises aktualisieren und darin liegt mein Problem - beim Öffnen der index.html-Datei wird der rote Kreis erstellt, aber wenn ich Drücke die Pfeiltasten, ich kann es nicht bewegen. Jede Hilfe wäre willkommen und bitte entschuldige meine Unwissenheit, ich habe vor etwa einer Woche Javascript angefangen.

ist die js Code der Spieler "Klasse" enthält:

canvas = document.getElementById("surface"); 
ctx = canvas.getContext("2d"); 

//user controlled player class 

player = function(x,y,dx,dy,radius) { 
    this.x = x; 
    this.y = y; 
    this.speedx = dx; 
    this.speedy = dy; 
    this.radius = radius; 

    this.leftPressed = false; 
    this.rightPressed = false; 
    this.upPressed = false; 
    this.downPressed = false; 

    document.addEventListener("keydown",this.onKeyDown,false); 
    document.addEventListener("keyup",this.onKeyUp,false); 


    this.init = function() { 
     ctx.beginPath(); 
     ctx.arc(this.x,this.y,this.radius,0,Math.PI*2); 
     ctx.fillStyle = "red"; 
     ctx.fill(); 
     ctx.closePath(); 
    } 

    this.onKeyDown = function(e) { 
     if (e.keyCode == 37) { 
      this.leftPressed = true; 
     } 
     if (e.keyCode == 38) { 
      this.upPressed = true; 
     } 
     if (e.keyCode == 39) { 
      this.rightPressed = true; 
     } 
     if (e.keyCode == 40) { 
      this.downPressed = true; 
     } 
    } 
    this.onKeyUp = function(e) { 
     if (e.keyCode == 37) { 
      this.leftPressed = false; 
     } 
     if (e.keyCode == 38) { 
      this.upPressed = false; 
     } 
     if (e.keyCode == 39) { 
      this.rightPressed = false; 
     } 
     if (e.keyCode == 40) { 
      this.downPressed = false; 
     } 
    } 
    this.displace = function() { 
     if (this.leftPressed) { 
      this.x -= this.speedx; 
     } 
     if (this.rightPressed) { 
      this.x += this.speedx; 
     } 
     if (this.downPressed) { 
      this.y -= this.speedy; 
     } 
     if (this.upPressed) { 
      this.y += this.speedy; 
     } 
    } 

} 

Hier ist der main.js Code:

canvas = document.getElementById("surface"); 
ctx = canvas.getContext("2d"); 

ctx.fillStyle = "black"; 
ctx.fillRect(0,0,canvas.width,canvas.height); 



player1 = new player(500,500,7,7,25); 


function draw() { 
    ctx.fillStyle = "black"; 
    ctx.fillRect(0,0,canvas.width,canvas.height); 

    player1.init(); 
    player1.displace(); 
} 

setInterval(draw,10); 

Answer 1

Diese wie ein klassisches Javascript Bug aussieht: das this Schlüsselwort doesn tu so als würdest du es erwarten.

In diesem Code:

function C() { 
    this.prop = true; 
    this.get = function() { 
     return this.prop; 
    } 
} 
var obj = new C(); 

obj.get() kehrt true, aber var get = obj.get; get() wird undefined zurück. Die genaue Erklärung, warum ist ein bisschen Schrauben und Muttern, um hier zu bekommen, aber im Allgemeinen ist die einfachste Antwort nicht Referenzelement Funktionen später ausführen. Stattdessen tun Sie etwas wie folgt aus:

document.addEventListener("keydown", e => { 
    this.onKeyDown(e); 
}, false); 

Das funktioniert, weil die Lambda-Syntax nicht mess with this. Wenn Sie Pre-Lambda JS unterstützen mögen, können Sie diese leicht hässliche Version tun:

var self = this; 
document.addEventListener("keydown", function(e) { 
    self.onKeyDown(e); 
}, false); 

oder bind verwenden, um es zu beheben.

Kurz gesagt, es gibt viele Lösungen, aber um sie alle zu verstehen, brauchen Sie ein gutes Verständnis von Javascript's leicht skurrilen prototypischen Vererbung System.