JavaScriptでマインスイーパーを作ろうとしてブロックみたいなやつを描画しようとするとエラーが出る

#ソースコード

<html>
 <head>
  <meta charset="UTF-8">
  <title>マインスイーパー</title>
 </head>
 <body>
  <canvas id="block_kuzushi"width="640"height="480"></canvas>
 </body>
</html>
<script type="text/javascript">

//定数
var BACKGROUND_COLOR = '#000000'
var CVS_WIDTH = 640; 
var CVS_HEIGHT = 480;
var ROW = 9;
var COL = 9;
var BLOCK_STROKECOLOR = 'Black'

//変数
var ctx = null;
var blocks = [ ];
var status = 0; //0プレイ中、1クリア、2ゲームオーバ
var block_color = 'Blue';

function main (){
	var cvs = document.getElementById('MineSweeper');
	ctx = cvs.getContext('2d');
	ctx.fillStyle = BACKGROUND_COLOR;
	ctx.fillRect(0, 0, CVS_WIDTH, CVS_HEIGHT);
	
	for(var i = 0; i<ROW;i++){
		for(var j = 0;j < COL;j++){
			blocks[i*COL+j] = {
				x: 40 + j * 40,
				y: 40 + i * 20,
				w: 46,
				h: 46,
				isBlock: true
			};
		}
	}
	
	setInterval(function(){
		ctx.fillStyle = BLOCK_COLOR;
		ctx.fillRect(block.x, block.y, block.w, block.h);
		ctx.strokeStyle = BLOCK_STROKECOLOR;
		ctx.strokeRect(block.x, block.y, block.w, block.h);
		
		for(var i = 0;i < ROW;i++){
			for(var j = 0;j < COL;j++){
				var block = blocks[i * COL + j];
					//ブロックを描画
					ctx.fillStyle = BLOCK_COLOR;
					ctx.fillRect(block.x, block.y, block.w, block.h);
					ctx.strokeStyle = BLOCK_STROKECOLOR;
					ctx.strokeRect(block.x, block.y, block.w, block.h);
			}
		}
	},parseInt(1000 / FPS));
}
	window.onload = function(){
		main();
	}
	
</script>

#エラー内容
Unable to get property 'getContext' of undefined or null reference

初心者ですお願いします。

行動規範の内容に同意します

回答1件

var cvs = document.getElementById('MineSweeper'); で取得すべき、canvas要素がないからです。

html
1<canvas id="MineSweeper" width="640" height="480"></canvas>

とし、idを指定したいものにしましょう。
また、html要素の、属性間は、半角スペースをいれましょう。

投稿2020/01/18 00:07

miyabi_pudding

総合スコア9528

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

JavaScriptでマインスイーパーを作ろうとしてブロックみたいなやつを描画しようとするとエラーが出る

関連した質問