なんとまたもや面白いものを発見したので記事にしました!
今回はあの懐かしきぷよぷよでプログラミングが学べるというので最近少し話題です。
ゲーム感覚でプログラミング学んでみたいと考えられていつ方必見の内容ですので、ぜひご覧ください♪
![](http://magazine.geek-lounge.com/wp-content/uploads/2021/11/1.png)
ぷよぷよってなに??
![](http://magazine.geek-lounge.com/wp-content/uploads/2021/03/ttl_img.png)
まず「ぷよぷよ」を知らない方のために軽くご説明します。
ぷよぷよとはパソコンゲームであり、上から落ちてくるぷよぷよ(スライム状のやつ)をうまく並べて消していくというゲームです。
筆者が小さいときは実はかなりハマっておりました笑
似たようなのだとテトリスがありますね!
と思っていたら、なんとぷよぷよ✖️テトリスがありました!笑
![](http://magazine.geek-lounge.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-31-14.36.19-1024x519.png)
こちらがぷよぷよの公式サイトです!
ぜひみてみてください〜
ぷよぷよ✖️プログラミングとは??
![](http://magazine.geek-lounge.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-31-14.18.20-1024x365.png)
最初にこれをみたときは筆者も「???」でした!
ただ調べてみた結果、実はプログラミング学習環境「Monaca Education」さんが、ぷよぷよを用いて学べる学習教材を出されていました!
こちらがそのぷよぷよの公式サイトです!
ぷよぷよの製品版と同じ画像素材で、プロが使う本当の開発環境にてプログラミングを学ぶことが可能です。
しかもこちらがなんと無料なんです!!
これはやらないわけにはいかないですよね。
ただ実際にプレイする前に軽く内容を見ていきましょう!
用意するもの
![](http://magazine.geek-lounge.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-31-14.22.15-1024x420.png)
必要なのは、下記5点です!
- パソコン(Windows、Mac、Google Chrome Book 、タブレット)
- インターネット
- メールアドレス
- プリンター(ソースコード一式)
- 気合い!
ただプリンターに関してはソースコードをパソコンにダウンロードしてそれを見れば大丈夫なので、もしない場合でも対応ができます♪
なんといっても気合があるのが、やはりプログラミングをする上では必要なのだなと改めて実感しますね。
では次に学習内容を見てみましょう👀
学習内容
基本的には写経をするらしいですが、4つのコースが設けられており、それぞれに対して学習内容が少し違うようです!
プログラミング言語はjavascriptのようです。javascriptって何?という方は画期記事も読んでみてください♪
そして、コースについて表にまとめてみました!
コース | 基礎 | 初級 | 中級 | 上級 |
入力量 | 4行 | 28行 | 95行 | 1015行 |
この行というのがおそらくぷよぷよを消して動かすのに必要なものであり、この行が多くなれば多くなるほど難しくなるといった形です。
ただこれだと内容がいまいちわからないですよね?
なので筆者が実際に遊んでみました笑
実際にプレイ!
まずは登録
まずは登録ですね。
以下の流れで遊べるようになります。
- Monaca Educationさんの公式サイトより新規会員登録をし、アカウントを作成
- デバッガーアプリのインストール(スマホの方のみ!)
- MonacaEducationさんのサイトよりコースを選択し、プレイ!
なんと簡単ですね♪
ちなみにスマホで利用される方は登録後に少し追加で必要な手順がありますので、2.デバッガーアプリのインストールの部分を合わせてお読みください!パソコンの方の場合は、こちらの手順は飛ばして大丈夫です♪
1. アカウント作成
![](http://magazine.geek-lounge.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-31-14.46.10-1024x520.png)
こちらより、Monaca Eduactionさんのサイトにアクセスし、右上のアカウント作成を押してください。
そうしますと、下記画面に移行しますのでメールアドレスとパスワードを設定します。
![](http://magazine.geek-lounge.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-31-14.49.11-1024x539.png)
入力しますと、メールを送信しましたという内容が表示されますのでメールをチェックしてください。そのメールにリンクがあると思いますので、そちらをクリックしてください。
すると以下の画面に移行します。
![](http://magazine.geek-lounge.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-31-14.51.17-1024x518.png)
ここでプランを選択しますが、基本Freeプラン(無料)でゲームは遊べますのでFreeプランを選択しましょう。
またお名前と学校名(ある場合)はご記入ください。
利用規約が表示された場合はそちらに同意しましょう!(おそらく商用利用ができないといった内容のものです)
しますと以下のページに移ります!
![](http://magazine.geek-lounge.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-31-14.55.13-1024x520.png)
こちらのページが表示されましたら、アカウント作成は終わりですのでプレイする方に移れます!
パソコンで遊ばれる方は次の項目は飛ばして大丈夫です〜
2. デバッガーアプリのインストール
![](http://magazine.geek-lounge.com/wp-content/uploads/2021/03/technology-1283624_1920-1024x576.jpg)
スマホでされる場合は、デバッガーというのを入れることで動作確認やエラー情報を見ることができるようになります。(実はこれがプログラミングではすごい重要なのです。)
なのでこのデバッガーを使うために、Monacaさんの公式アプリ「Monaca for Study」(下記画像参考)をインストールし、Monacaのサイトにて登録したメールアドレスとパスワードを入力しログインしましょう。
![](http://magazine.geek-lounge.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-31-15.08.26-1024x465.png)
アプリはiPhone/Android両方あるそうですので、ご安心ください!
3.コースを選択し、プレイ
こちらにアクセスしますと下記画像のようなコース選択画面がありますので、こちらのうち一つプレイしたいコースを選択してください。
![](http://magazine.geek-lounge.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-31-15.10.52-1024x435.png)
そうしますと、下記画像のような画面で、「インポート」というボタンがありますのでそちらをクリックしてください。
![](http://magazine.geek-lounge.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-31-15.13.17-1024x482.png)
こちらの画面はログイン状態じゃないと表示しないので、表示されない場合はログインされているかをご確認ください!
そうしますと下記のような画面になりますので、選択したコースをクリックし、、「クラウドIdeで開く」をクリックしましょう。
![](http://magazine.geek-lounge.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-31-15.23.10-1024x520.png)
そうしますとコードが表示されますので、手順書通りにあとは進めていきます!
実際に遊んでみた!
あっ、筆者はなんと基礎コースを選択しました笑
ではやっていいきます。
手順書を見て何をすればいいか見ると、player.jsに何やら入力しろと。
ふむふむ。
srcの中にplayer.js、stage.jsのファイルを見つけましたので、そちらの指定された行にに指定どおりコードを書いていきます。
それで全て終わって確認してみるとなんと!
![](http://magazine.geek-lounge.com/wp-content/uploads/2021/03/スクリーンショット-2021-03-31-15.44.18-1024x522.png)
あの懐かしきぷよぷよが右側に表示されてるではないですか!その後筆者は永遠とぷよぷよをやっていました笑
ちなみに下にちょっと赤い文字があると思うのですが、これ実は最初の方になぜかぷよぷよの画面が動かなくてええええと思ってたら下のところにエラー文が表示されていました!
すごいですね!それでそこを確認したらなんと189行目のコードが違うと。よくよく見てみると打ち間違いが。。。。
まあプログラミングあるあるですね笑
また、上のrunというボタンを押して、iPhoneやAndroidにアプリを入れてアカウントを連動させるとなんと、作ったやつがスマホでも遊べるようになります!
しかもこれすごいのがカスタマイズが自由なので背景を変えたり、色を変えたり、落ちてくるぷよぷよの画像を変えたりなどいろんなことができるんですよね。
なのでもし時間がある方はぜひ色々と挑戦してみてください♪
楽しかった!
ご紹介は以上になります!
いや〜、久しぶりにぷよぷよをやるとやっぱり楽しかったですね。
こんな学び方もあると思うとすごいですよね。
ちなみにプログラミング独学で学びたい人いたら下記記事が参考になりますよ〜
https://magazine.geek-lounge.com/archives/424
また面白いものを見つけたらまた調査したいと思います!笑(ただゲームをしたいのはここだけの話)
では!