コードの悪いところが分かりません。

youtube動画の、テトリス作成番組を勉強しています。画面通りコードを打っているつもりですが、ブラウザに表示されません。
どこが悪いか、ご指摘いただければ幸いです。

<!DOCTYPE html> <html>> <body> <canvas id="can"></canvas> <script> //ブロックひとつのサイズ let BLOCK_SIZE = 30; //テトロミののサイズ let TETRO_SIZE = 4; let can = document.getElementById("can"); let con = can.getContext("2d");

con.fillStyle="red";
con.fillRect(0,0, BLOCK_SIZE ,BLOCK_SIZE );

let tetro = [
[ 0, 0, 0, 0 ],
[ 1, 1, 0, 0 ],
[ 0, 1, 1, 0 ],
[ 0, 0, 0, 0 ]
];

for(let y=0; y<TETRO_SIZE ; y++)
{
for(let x=0; x<TETRO_SIZE ; x++)
{
if( tetoro[y][x] )
{
let px = x * BLOCK_SIZE;
let px = y * BLOCK_SIZE;
con.fillStyle="red";
con.fillRect(px,py,BLOCK_SIZE,BLOCK_SIZE);
}
}
}

</script> </body> </html>

Lhankor_Mhy

2020/05/20 04:07

結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2 期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3 3-7. markdownを利用しましょう https://teratail.com/help/question-tips#questionTips3-7

maisumakun

2020/05/20 04:09

ブラウザコンソールにメッセージは出ていませんか？

AkitoshiManabe

2020/05/20 04:44

サーバー環境や利用しているブラウザを追記してください。

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

回答1件

ベストアンサー

html
1<html>>

js
1let px = x * BLOCK_SIZE;
2let px = y * BLOCK_SIZE;

js
1if( tetoro[y][x] )

開発者ツールを使ってデバッグしましょう。
参考：
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider

投稿2020/05/20 04:14

Lhankor_Mhy

総合スコア36960

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

コードの悪いところが分かりません。

関連した質問