JavaScriptでTetrisを作る
自分用にJavaScriptでTetrisを作る工程を書き残しておこうと思います。
完成させられるか不安ですが(汗）
ちなみにAIでコード生成をお願いすれば、
１日あれば完成できると思います。
AIに全てコードを生成するのは個人的になんか
納得できないんですよね、理由は上手く説明できません。
少しづつ作り始めて、3日間で、
play fieldまで完成できました。
情報ソース
・mdn
https://developer.mozilla.org/ja/
・stack overflow
googleで海外サイトを検索
どうしてもchat-gptに質問しないと
行けない時だけ質問
play fieldを作る時に大変だったのは2つでした。
1つめの問題はJavaScriptのcanvasメソッドでエラーになる
2つめの問題はplayfieldで格子模様？ボックスパターン？
模様が背景色指定できないです。
1つめ問題
CanvasRenderingContext2D オブジェクトを
作成しようとするとエラーになります。
「Uncaught TypeError: Cannot read property 'getContext' of null」
エラーの原因は引数が期待している値ではない事が原因の様です。
引数は公式ドキュメントに書いてある通りなので、謎が深まりました。
ググれば直ぐに解決できそうですが、下記の理由で納得が行きません。
①ググる→②書いてあることを試す→③解決する→
④次の問題に取り掛かる→⑤解決しなかったら①からやり直す
納得が行かないのは、この方法は
①時間がかかる②考える楽しみがない
③これを繰り返して上達した経験がないからかもしれません。
プログラミング質問サイト「stackoverflow.com/」
で「Uncaught TypeError: Cannot read property 'getContext' of null」
を検索してみました。
詳しい回答を忘れてしまいましたが、
HTMLの読み込みが完了する前にJava Scriptが完了してしまっているので
document.get.elementByID（）でelementオブジェクトを生成する前に
JavaScriptの実行が完了してしまったので、引数がnullになっている様でした。
そいうえば思い当たるところがあり、
index.htmlで外部読み込みのJavaScriptを読み込む
<script>タグを<body>の開始タグの直ぐ下に書いてました。
なので<script>タグを</body>終了タグの上に移動しました。
「Uncaught TypeError: Cannot read property 'getContext' of null」
エラーは解消されました。単純なミスですね。
単純なミスでしたが、エラーが解決すると楽しいですね。
楽しい理由は
①エラーが発生した原因がわかる。
②直ぐにエラーを解決する方法が見つかった
③思い通りに動く様になった。
かなと思います。
長くなったので、一旦は一つ目の問題を解決した方法だけ記します。
二つ目の問題を解決した方法は次回にします。
何か、直した方が良いところがあれば
ご指摘いただければ幸いです。
