2017-06-10 2 views
-2
<!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> 
<canvas id="GameArea"></canvas> 
<script> 

var myGamePiece; 

myGamePiece = new component(30, 30, "red", 10, 120); 




function component(width, height, color, x, y) { 
    console.log("component called"); 
    this.width = width; 
    this.height = height; 
    this.x = x; 
    this.y = y; 
    var myGameArea=document.getElementById("startGame"); 
    console.log("myGameArea"); 
    var ctx = myGameArea.getContext("2d"); 
    console.log("crossed"); 
    ctx.fillStyle = color; 
    ctx.fillRect(this.x, this.y, this.width, this.height); 
} 

</script> 

<p>We have added a component to our game, a red square!</p> 

</body> 
</html> 

// nicht in der Lage zu getout meinem Fehler in dem obigen Code lesen i beim Aufruf eine Funktion namens Komponente ein Rechteck zu erstellen versucht. es erstellt ein Rechteck nach Kontext, aber ich erhalte einen Fehlerich bin immer einen Fehler von nicht property'get Kontext‘von null

+2

Bitte lernen Sie, Ihren Code selbst zu debuggen. Lesen Sie die Fehlermeldung und versuchen Sie sie zu verstehen. 'startGame' ist nicht dasselbe wie' GameArea'. – Xufox

Antwort

0

Ihre Leinwand hat eine ID von "GameArea", aber Sie versuchen, getElementById ("startGame") zu tun.

0

Ihre Canvas-Element-ID ist "GameArea", Sie verweisen jedoch im Code auf "startGame". Deshalb ist es null

Verwandte Themen