2017-11-05 5 views
1

私はゲームの開発に取り組んでいます。しかし、キャンバスの文脈を以前と同じようにすることはできません。私のHTMLファイルにはコードが含まれていますjavascriptコードからエラーが発生します。var context = document.getElementById( "gameCanvas")。getContext( "2d");

<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Nostalgia</title> 
    <link rel="stylesheet" href="gameStyles.css"></link> 
</head> 
<body> 
    <canavs id="gameCanvas"></canvas> 
</body> 
<script src="gameScript.js"></script> 
</html> 

javascriptのファイルがある:

context = document.getElementById("gameCanvas").getContext("2d"); 

const level = [0,0,0,0,0]; 
var xToDraw = 0; 
var yToDraw = 0; 


var img0 = new Image(); 
img0.src = "./images/tiles/grass.png"; 

var img1 = new Image(); 
img1.src = "./images/tiles/dirt.png"; 

var img2 = new Image(); 
img2.src = "./images/tiles/sand.png"; 
function drawLevel(){ 
    // solution 
    level.map((item1) => { 
    yToDraw-=16 
    item1.map((item2) => { 
     if(item2==0){ 
     context.drawImage(img0, xToDraw, yToDraw); 
     } 
     xToDraw+=16; 
    }); 
    }); 
} 
    drawLevel(); 

注:このページは、ウィンドウにロードされ、電子を使用して実行されています。送出されていました

エラー:例外TypeError:document.getElementById(...).getContext is not a function

が、私はこのエラーを解決するための任意の助けをいただければ幸いです。

+0

誤差がかなり明確です。おそらく 'getElementById()'はDOMがそれを含んでいない時点でコードが実行されているため、キャンバス要素を見つけられないことを意味します。 – Pointy

+0

私はまだエラーが発生しています – NicksWorld

+0

@SachaとPointy OPには正しい場所にスクリプトがあり、キャンバスはそこにあり、onlodは必要ありません。答えが示すように、OPにはタイプミスがありました。 – Blindman67

答えて

3

あなたのキャンバスタグつづりの間違っているので、これは次のとおりです。

<canavs id="gameCanvas"></canvas> 

は次のようになります。

<canvas id="gameCanvas"></canvas> 
関連する問題