私の赤い四角は表示されません： "speedXとspeedYは定義されていません" -console

私はjavascriptのチュートリアルを作成するこのゲームに従っています。赤い四角が画面に表示されません。私は、実際には、スピードの問題だと思っています。なぜなら、コンソールでオブジェクトの速度を変えたときに、それが現れたからです...スクリーンから飛び出しました。私の赤い四角は表示されません： "speedXとspeedYは定義されていません" -console

<!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>

はあなたが与えることができる任意のヘルプをありがとう：

は、ここに私のコードです！

出典

2016-05-27 Mwolf16

speedXとスピーディーされていますgamePieceオブジェクトのインスタンスメンバーとして定義されています。 newPos関数を 'this'を使うように変更する必要があります。 – Dai

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

コンソールが正しい

、speedXとspeedYは存在しません。

解決方法1：

は3つの解決策があります。この= that

VARを使用します。 this

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

ソリューション2のローカルコピーを保存//：使用バインド：

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

解決策3：ES6 - 利用矢印機能

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

出典

2016-05-27 23:05:03

うわー、それは簡単だった。ありがとう、これは本当に多くの助けと今私は再びコーディングを得ることができます！ – Mwolf16

「this」を理解することはJavaScriptの最も混乱しているが非常に重要な部分の1つです。それは他のもののようではありません。あなたは本当に物事を正しく理解するためにそれを読むべきです。 –

これで助けになるウェブサイトを教えていただけますか？ – Mwolf16

私の赤い四角は表示されません： "speedXとspeedYは定義されていません" -console

答えて

関連する問題