Javascriptでキャンバス上に描画する方法

Question

私は最初のミニJSゲームを作成し、w3schoolsチュートリアルを進めていますが、最初のコンポーネントをcodepenプレビューエリアに読み込むことさえできません。これは非常に残念な最初のカップルステップでした。私はmyGameAreaがポップするようにスタイルされているのでうまくロードすることを知っているが、私はちょうどそれの上に描画する単純な赤い四角形をしたい。

myGameArea.clear()を呼び出して、存在しない updateを呼び出そうとし updateGameArea

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.x = x; 
    this.y = y;  
    this.update = function(){ 
     ctx = myGameArea.context; 
     ctx.fillStyle = color; 
     ctx.fillRect(this.x, this.y, this.width, this.height); 
    } 
} 

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

<button onClick="startGame()"> 
Press 
</button> 

Answer 1

。これが実行されてもエラーは発生しませんか？

myGamePiece.update()に電話してください。