Second Life 〜人生これから
You only live once
IT PR

ぷよぷよプログラミング教材の使い方・動かし方

記事内に商品プロモーションを含む場合があります

いよいよ『ぷよぷよ』のプログラミング学習教材が使えるようになりました!

「やってみよう!」と思ったけど、使い方も実際の動かし方も分からない…

そんな方のために現役プログラマーが小学生にも分かるように『ぷよぷよ』プログラミング教材の使い方・動かし方を丁寧にご紹介します!

プログラミングの授業が始まる小学校の先生もまずはやってみてください。

ぷよぷよプログラミング教材の資料を確認

ぷよぷよeスポーツxプログラミングサイトにアクセスします。

以下の資料がダウンロードできるので最初にダウンロードしておきましょう!

  • ダウンロード「ぷよぷよプログラミング」ソースコード一式
  • ダウンロード「ぷよぷよプログラミング」小冊子

SEGA CHALLENGE!

Enjoy to Code

 

ダウンロードしたら上記のボタンクリックで「ぷよぷよプログラミング」サポートページを開きます。

画面をスクロールしていくと、ぷよとともにボタンが3つ表示されています。

まずは「初級コース」を制覇しましょう!

初級コースを始める 入力量28行
中級コースを始める 入力量95行
上級コースを始める 入力量1,015行

 

Monaca Educationにユーザー登録

「ぷよぷよ」プログラミング教材を使うにはMonaca Educationのユーザー登録が必要です。

個人の場合、全て無料で使えますので安心してユーザー登録してください。

尚、仮登録のメール本文をクリックすることで本登録が完了しますので、確認できるメールアドレスが必要です。

Monacaアカウント作成

アカウント登録できたらログインします!

インポートが必要

インポートボタンをクリックすると、Monaca Educationのメイン画面に『ぷよぷよプログラミング初級』が表示されます。

ぷよぷよプログラミング初級をクリック!

クラウドIDEで開くボタンをクリック!

手順書に沿って、プログラムコードを写経する

編集するファイルのプログラムを表示する

手順書で最初に躓くポイントは、「入力が必要なコード」189行目がいきなり見つからない事ですwww

なぜなら、初期画面に表示されているコードは45行しかないからです!

実は初期画面に表示されているコードは【index.html】という名前のファイルです。

マニュアルには、【player.js】を選択してください。と書いてあります。

どうやって????

と悩んでしまうかもしれません。

下の画像の▶srcをクリックするとプログラムファイル一式が表示されます。

srcフォルダの中のファイル一式が確認できたら、player.jsファイルをダブルクリックします。

中央カラムにplayer.jsファイルの中身が表示されますね。

ここからやっと指示通りに指定行の編集ができます。

プログラムを編集する

初級の場合、SESSION1で編集が必要なコードは4行だけです。

指示通りの場所にコードをそのまま写経します。

悩みポイントはインデント(書き出し位置)です。インデントはコードを見やすくするための体裁なので間違ったら動かないという訳ではありません。

ですが、どの{}の中なのか分かるようにインデントするルールですので上記のようにインデントを合わせましょう。

尚、ダウンロードした資料の193行目の大カッコのインデントはちょっと違うかな…。と思います。

入力補助と言って、括弧({ or ()を入力すると閉じ括弧が自動的に表示されるようになっています。自動で入力された括弧に気を付けてください。

入力が終わったらコントルールキーと【s】を同時に押すと保存できます。

 

『ぷよぷよ』プログラムの動作確認

SESSION1の4行を写経したらどのように動くのでしょう?

早速確認してみます。

 

画面右カラムに開発中のプログラムの成果物がプレビュー表示されます。

プレビュータブが表示されていない場合は、メニューバーの実行から『プレビュータブを表示』をクリックします。

各ウィンドウやタブを動かしてしまってレイアウトが崩れてしまったらメニューバーの表示メニューから「レイアウトをリセット」すると初期表示に戻せます。

「ぷよぷよプログラミング」初級SESSION1の成果物

初級編SESSION1の成果物はこんな感じです。

下に移動しかできないプログラムなので、ただただ、ぷよが下に落ちてきます。

↓キーをクリックするとスピードがアップしますよ。

↓キーでスピードアップの命令(プログラムコード)は192行目です。

 

ここまでくると、左右に動かしてみたくなりますよね。

引き続きSESSION2以降もやってみましょう!

『ぷよぷよ』プログラミング教材の使い方・動かし方まとめ

たった4行の写経で、かわいい「ぷよ」を動かすことができました。

このように、プログラムした結果が目に見えることが何より子供たちの興味を引きます。

できるだけ簡単にプログラミングに親しんでもらうためにぜひ小学校などでも教材を活用していかれると良いと思います。

ぷよぷよを無料でプログラミング教材として利用できる!あの「ぷよぷよ」でゲーム制作のプログラミングが体験できるようになりました。 しかも、無料!!!セガさま、太っ腹です! 現役プ...
error: Content is protected !!