Mein rotes Quadrat wird nicht angezeigt, weil: "speedX und speedY sind nicht definiert" -console

Also ich folge diesem Spiel machen Tutorial für Javascript und ich kann wirklich nicht finden, was ich getan habe, dass es so, dass meine machen würde rotes Quadrat wird nicht auf dem Bildschirm angezeigt. Tatsächlich glaube ich, dass es ein Problem mit der Geschwindigkeit ist, denn als ich die Geschwindigkeit des Objekts in der Konsole änderte, erschien es ... und flog dann vom Bildschirm.Mein rotes Quadrat wird nicht angezeigt, weil: "speedX und speedY sind nicht definiert" -console

Hier ist mein Code:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<style> 
canvas { 
    border:1px solid #d3d3d3; 
    background-color: #f1f1f1; 
} 
</style> 
</head> 
<body onload="startGame()"> 
<script> 

var myGamePiece; 

function startGame(){ 
    myGamePiece = new component(30, 30, "red", 10, 120); 
    myGameArea.start(); 
} 

var myGameArea = { 
    canvas: document.createElement("canvas"), 
    start: function(){ 
     this.canvas.width = 480; 
     this.canvas.height = 270; 
     this.context = this.canvas.getContext("2d"); 
     document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
     this.interval = setInterval(updateGameArea, 20); 
    }, 
    clear: function(){ 
     this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
    } 
} 

function component(width, height, color, x, y){ 
    this.width = width; 
    this.height = height; 
    this.speedX = 0; 
    this.speedY = 0; 
    this.x = x; 
    this.y = y; 
    this.update = function(){ 
     ctx = myGameArea.context; 
     ctx.fillStyle = color; 
     ctx.fillRect(this.x, this.y, this.width, this.height); 
    } 
    this.newPos = function() { 
     this.x += speedX; 
     this.y += speedY; 
    } 
} 

function updateGameArea(){ 
    myGameArea.clear(); 
    myGamePiece.newPos(); 
    myGamePiece.update(); 
} 

function moveup(){ 
    myGamePiece.speedY -= 1; 
} 
function movedown(){ 
    myGamePiece.speedY += 1; 
} 
function moveright(){ 
    myGamePiece.speedX += 1; 
} 
function moveleft(){ 
    myGamePiece.speedX -= 1; 
} 



    </script> 

    <button onmousedown="moveup()">UP</button> 
    <button onmousedown="movedown()">DOWN</button> 
    <button onmousedown="moveright()">RIGHT</button> 
    <button onmousedown="moveleft()">LEFT</button> 

</body> 
</html>

Sie für jede Hilfe Vielen Dank geben können!

Quelle

2016-05-27 Mwolf16

Speedx und speedy sind Definiert als Instanzmitglieder auf Ihrem SpielPiece-Objekt. Sie müssen die newPos-Funktion ändern, um 'this' zu verwenden. – Dai

this.newPos = function() { 
    this.x += speedX; 
    this.y += speedY;

Die Konsole korrekt ist, speedX und speedY gibt es nicht.

Es gibt drei Lösungen:

Lösung 1: Verwenden Sie that

var, die diese =; // Speichern einer lokalen Kopie von this

this.newPos = function() { 
    that.x += that.speedX; 
    that.y += that.speedY; 
}

Lösung 2: Verwenden Sie binden:

this.newPos = function() { 
    this.x += this.speedX; 
    this.y += thisspeedY; 
}.bind(this);

Lösung 3: ES6 - Mit den Pfeilfunktionen

this.newPos =() => { 
    this.x += this.speedX; 
    this.y += thisspeedY; 
};

Quelle

2016-05-27 23:05:03

Wow, es war so einfach hu. Danke, das hat mir sehr geholfen und jetzt kann ich wieder mit der Programmierung anfangen! – Mwolf16

Das Verständnis von 'this' ist einer der verwirrendsten und doch extrem wichtigen Teile von JavaScript. Es ist nicht wie alles andere. Sie sollten es wirklich lesen, um die Dinge richtig zu verstehen. –

Kannst du mich trotzdem auf eine Webseite verweisen, die mir dabei helfen kann? – Mwolf16

Mein rotes Quadrat wird nicht angezeigt, weil: "speedX und speedY sind nicht definiert" -console

Antwort

Verwandte Themen