セガから2020/06/26に無料配布された、ぷよぷよが作れる「ぷよぷよプログラミング」を早速試してみましたー！
JavascriptとHTML5で動くぷよぷよプログラミング。
Javascript初心者や、これからプログラムを始めてみたい！って人にちょうど良い内容でした～！
もちろん、上級者にも使えますよ♪
対象者
キーボードで英字が打てて、教材が読める人が対象ですね。
小さなお子さんがする場合は、PCに詳しいお父さんかお母さんがついていた方が良いと思う。
教材について
教材は、以下の２つのPDFと、ブラウザ上で動作する統合環境「Monaca Education」で構成されている。
puyo-programming-code.pdf
今回のぷよぷよの全サンプルコードが収録されています。
puyo-programming-booklet.pdf
教科書。統合環境Monacaを使用して、どこに何を入力しよう、といった指示が書かれています。
Monaca Education
ブラウザ上で動作するIDE。puyo-programming-code.pdfを見ながら、ゼロから全部写経する場合は、自分の統合環境下にプロジェクトを作成して入力していっても動くが、小学生や超初心者などの「Jsでの入力の仕方を学ぶ」「プログラミング入力のための大前提を覚える」ために、全サンプルコードの一部しか入力させないようMonaca側設定されたコースを進めることが一番良さそうです。
Monacaはブラウザ上なら動くので、スマートフォンでもブラウザ設定を「PC版サイト表示」にすれば使用できる。ただ、画面が小さく入力しにくいので、タブレット以上の大きさのものを推奨です。
ぷよぷよプログラミングの準備
教材を用意する
1. ぷよぷよプログラミング https://puyo.sega.jp/program_2020/ のWebページを開く
2. 「用意するもの」をクリック
3.「ダウンロード」ボタンを2つともクリックする。
4. puyo-programming-code.pdfとpuyo-programming-booklet.pdfの2つのPDFがダウンロードされるので、印刷する。
特に、puyo-programming-booklet.pdfは教科書なので、子供や初心者にさせる場合は、必ず印刷しておく。
「Monaca Education」のアカウント登録する
1. 画面上部の「さあ、はじめよう」をクリックする。
2. 「Enjoy to Code」をクリックする。
3. Monaca Education https://edu.monaca.io/puyo のサイトが開くので、「Step」に書かれている通りに、アカウント登録を行う。
4.「デバッガーアプリのインストール」はスマートフォン上で行う。
各コースのプロジェクトをMonacaにインポートする
1..https://edu.monaca.io/puyo の「ぷよぷよプログラミングに挑戦」のコースをクリックする。
2. 各コースのプロジェクトのインポートボタンが表示されるので、「インポート」をクリックする。
3. Monaca Educationが開くので、「ぷよぷよプログラミング○○」をクリックする。
4.横にプロジェクトの概要が出てくるので、「クラウドIDEで開く」をクリックする。
5. ぷよぷよプログラミングのソースが表示される。
ここからは、puyo-programming-booklet.pdf を見ながら、Monacaで打ち込んでいこう！
注意点
Session1の「player.js」はsrcフォルダを展開しないと見えない
最初から展開されてはいないので、puyo-programming-booklet.pdfのP.2の左下「▲でフォルダを開きます」のところをしっかりと強調する必要があります。
「設定」→「エディタ設定」で、「ブラケットの自動閉じ」と「自動インデント」をoffにしておく。
初級と中級は、『すでに入力されているコメントの前後』に入力を足していくことが多いので、ブラケットの自動閉じをONにしていると、コメントの上にカッコが入ってしまうので、カッコが多い（または必要なカッコを削除してしまう）など教材通りにならないため。
初級、中級では、入力した後、Enterキーを押さない。
すでに行が空行で入力されているので、Enterキーで改行してしまうとズレてしまうから。
上書き保存すると、右横のゲーム画面が動く。
Session1の189行目を入力して上書き保存するだけでも、横のゲーム画面で上からぷよが降ってくる。
193行目まで入力して上書き保存してから、横のゲーム画面をクリックしてから↓を押すと、スピードが早くなっていることがわかる。
これだと横に行けないので、Session2をするぞ！となる。
コメント