JavaScriptでTetrisを作る #2

JavaScriptでTetrisを作る #2です。

 

前回、githubのコードを公開するのを

忘れてしまったので、追記します。

https://github.com/kunkenshou/Tetris

 

前回の続きで、問題の2つめ

play fieldの格子模様？boxes pattern？

みたい背景が指定できない件になります。

 

これは大変でした、何が大変だったかというと

どうすれば、格子模様？みたいなを表示できるのか？

という発想が全く浮かびません。

 

発想が浮かばない場合は

公式ドキュメントでメソッドのリファレンスを見れば

良いのですが、直ぐに使えそうなものはありません。

 

舞って仕舞いました。

公式ドキュメント以外で思いついた方法は

①chat-gptでcssで格子模様を作る方法を質問する

②stack over flowで格子模様を作る方法を検索する

③ググる

④サンプルサイトに出来上がっている格子模様のソースコードを探す

という方法を思いつきました。

 

①②は殆どコピペする方法なので、使いたくありません。

③④も殆ど同じ理由ですが、①②より検索に時間がかかりそうです。

クイズで最初から答えを教えてもらうのは楽しみがなくなってしまいます。

 

最終的に全く0から1を作ることはできませんでした。

④番の方法で完成できました。

作りたかった格子模様に近いサンプルがある海外のサイトを見つけました。

10 CSS Background Patterns You Can Use on Your Website

 

サンプルサイトのコードで数値を弄り倒してみました。

格子模様を作るときの方法を探りました。

流石に今から公式ドキュメントを読んでいると時間が足りないので

コードの解説をChat-GPTにも頼みました。

①divタグでボックスを作成

②ボックスに背景色を指定

③背景色にイメージを指定

④背景色にグラデーションを指定

⑤グラデーションの間隔を指定

 

しかし、格子模様を作りたいので

グラデーションでは困ります。舞って仕舞いました。

 

上記の順番で気付きましたがサンプルサイトは

グラデーションの間隔と傾きで格子模様を画面に表示していました。

だったら、グラデーションの傾きを垂直水平して

グラデーション変わり目をハッキリさせれば垂直水平の線になるのではないか

という仮説が立ちました。

 

仮説をもとにサンプルサイトのコードを借りて、

プロパティの数値を変更して格子模様の背景色を作る事ができました。

流石にChat-GPTにコードの部分的な変更の仕方を

教わらなければいけなかったのが悔やまれます。

 

しかし、何とか格子模様の背景色を作る事ができた喜びは大きいです。

 

初めての物をつくる方法をまとめると

①近い情報を集める

②情報を色々、分析してみる

②分析したことから仮説を立てる

③仮説を検証する

ということかもしれません。

 

この度の課題はテトリスのテトロミノを

play fieldの中で動かすです。

課題を達成したら、記したいと思います。

JavaScriptでTetrisを作る

自分用にJavaScriptでTetrisを作る工程を書き残しておこうと思います。

完成させられるか不安ですが(汗）

 

ちなみにAIでコード生成をお願いすれば、

１日あれば完成できると思います。

AIに全てコードを生成するのは個人的になんか

納得できないんですよね、理由は上手く説明できません。

 

少しづつ作り始めて、3日間で、

play fieldまで完成できました。

 

情報ソース

・mdn

https://developer.mozilla.org/ja/

・stack overflow

https://stackoverflow.com/

googleで海外サイトを検索

 

どうしてもchat-gptに質問しないと

行けない時だけ質問

 

play fieldを作る時に大変だったのは2つでした。

1つめの問題はJavaScriptのcanvasメソッドでエラーになる

2つめの問題はplayfieldで格子模様？ボックスパターン？

模様が背景色指定できないです。

 

1つめ問題

Canvas APIで

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」

エラーは解消されました。単純なミスですね。

 

単純なミスでしたが、エラーが解決すると楽しいですね。

楽しい理由は

①エラーが発生した原因がわかる。

②直ぐにエラーを解決する方法が見つかった

③思い通りに動く様になった。

かなと思います。

 

長くなったので、一旦は一つ目の問題を解決した方法だけ記します。

二つ目の問題を解決した方法は次回にします。

 

何か、直した方が良いところがあれば

ご指摘いただければ幸いです。