クイズ番組でよくみるクローズアップクイズを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)

- わかりそうでわからない体験

今回作るのはクローズアップゲームです。クローズアップされた漢字をスクロールしていき、一体なんの漢字なのかを当てていきます。
クイズ番組でも定番のクイズです。特にテーマを漢字とすることで、子供からお年寄りまで、全ての人がわかりやすく、親しみが持てる秀逸なゲームとなります。
学習的なポイントとしては、擬似的なカメラを使ってスクロールをするやり方を学習していきます。

デモアプリはこちらから。https://openprocessing.org/sketch/1589598

- クミタテ式プログラミングドリルとは？

クミタテ式は英語のp5JavaScriptのコードを、日本語で書かれた図解（通称、図解くん）を使って解説し、プラモデルのように図解通りにコードを組み立てていきながら学習する、プログラミング教材です。
プログラミング的思考を学ぶよりも、コードの書き方を優先的に学習することを目的としています。

- 動画を見ながら学習する

動画と並行しながら学習するとより効率的に学習できるようになっています。
たくさんのゲームジャンルのプログラミング方法をお伝えしているのでチャンネル登録もよろしくお願いします。
動画を見るだけでなく、必ず自分でプログラミングして動かすことを心がけてください。見るだけでは理解したつもりにしかなりません。

- 開発環境

OpenProcessingを使ったp5js、Processingを環境を前提としています。

---

■[ここからスタート！]画面のサイズを決める

画面サイズを600x400の固定サイズにしましょう。

---

■背景を黄色で塗りつぶし続ける

drawの中で背景を黄色で塗りつぶし続けましょう。drawの中で毎回背景を塗りつぶすことでアニメーションが実現できます。

---

■「漢」を表示する

漢字の「漢」を(300,200)の位置座標に固定表示しましょう。

---

■漢字の表示を整える

文字のセンタリング、大きさ、色などを調整していきます。
まだ漢字のクローズアップはしません。

- 注意 -
Processing Javaの場合、日本語を使って文字サイズを変えると文字化けしてしまいます。
回避方法：https://codeaid.jp/processing-jp/

---

■後半は有料となりました。

後半では引き続きテキスト教材と動画解説が付属されています。