ロボテッチ通信

その教育費、過払い金になってませんか?

【ぷよぷよをプログラミング】HTML5とJavaScriptで、名作ゲームを作ってみた


にほんブログ村 子育てブログへ

※こちらのページは自動広告を対象外に設定しています。※

さっそく、名作ゲーム「ぷよぷよ」をプログラミングしてみた。誰でも無料で簡単に作れるよ。

f:id:Robotech:20210223213511g:plain

素晴らしい提案をしよう、君もゲームプログラマにならないか?ゲームプログラマになれば、100年でも200年でもゲームが作れるぞ。(大嘘)

 

[目次]

 

この手の記事は、プログラミングの初心者が試行錯誤してゲームを作って、誰でもできるよ!という展開が多い。それが普通だとは思うが、なんかロボテッチ通信っぽくないので、バリバリの現役エンジニアが初心者向け教材をやってみた、という違った切り口で。

私は15年以上システムエンジニアをやっていて、ゲームプログラミングが専門ではないですが、少し前に「弾幕系の縦スクロールシューティングゲーム」を仲間と作ってました。プロなので一度見たものはだいたい作れます。講演会もやってます。

そりゃ、貴様は簡単に作れるだろって思うじゃないですか。いやいや、これは誰でも作れるよ。小学3生でも2時間あれば作れるものを探したよ。「HTML5?」「JavaScript?」むりむりむり。プログラミングなんか無理と、プログラミングと聞いた途端に、プログラミングと聞くや否や(As soon as的な)、アレルギー反応を起こす未経験者に常日頃から言いたい事がある。

 

できるか、できないか、じゃない。

やるんだよ。

つべこべ、うるさいんだよ。四の五の…

令和時代は、誰でも無料でプログラミングが始められます、的な記事です。せっかくなので、楽しんで勉強してみてください。

robotech.hateblo.jp

 

ぷよぷよプログラミングのはじめ方

この教材は、「ある程度完成しているプログラム」にソースコードを入力して(基礎コースだと4行だけ)、動かなかったゲームを動かすというシンプルなもの。上級コース以外は、ほぼ完成したプログラムが用意されている。

 

学習の流れ
  • 学習に使う道具を用意
  • Monaca Educationにサインイン
  • コースを選択(基礎、初級、中級、上級)
  • 気合でソースコードを入力

未経験者は「基礎コース」を選択し、プログラミングとは何をすることなのか?をまず感覚的に理解してほしい。

 

用意するもの

家にある道具だけで手軽に始められる。

  • パソコン ⇒ 古いものでなければOK
  • インターネット
  • メールアドレス
  • プリンタ ⇒ 小冊子を印刷するため
  • 気合い 

まずは、公式サイトより学習に使う2種類の資料をダウンロードして、印刷する。面倒でも必ず印刷する。

↓公式サイトはコチラ。※アフィリエイト的なやつじゃないです。

puyo.sega.jp

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

f:id:Robotech:20210223220131j:plain

「Enjoy to Code」をクリックして、行ってらっしゃい!※インターネットエクスプローラは使えないので注意が必要※

f:id:Robotech:20210225090717p:plain

Monacaアカウント登録サイトが開くので、手順に従ってアカウントの作成をする。こちらを登録すると、「開発環境」という作業スペースが利用できるようになる。(デバッガーアプリのインストールは今のところ不要。)

もう全ての準備は整ったので、コースを選択して始めていく。

  • 基礎コース(4行)
  • 初級コース(28行)
  • 中級コース(95行)
  • 上級コース(1,015行)

f:id:Robotech:20210223214104j:plain 

さっそくプログラミングしてみよう!

小冊子の表紙を1ページめくって、SESSION1「ぷよぷよ」が落ちてくる、とある。指定された場所に必要なコードを書き写していくんだな。

 

※いきなり注意が必要※

速攻注意点かよっ(三村)。体感的に、この記事の読者10,000人中3,000人はココで躓くと感じた。10人中3人でいいじゃん。このあたりの躓きポイントを伝えるのが、ベテランの役目なので。

小冊子3ページ目、「※player.js」を選択してください。とあるが、それはどこにあるの?プログラミング経験者は勘で場所が分かるところではあるが。画面左側の「src」の中に隠れてるので。

f:id:Robotech:20210223212604p:plain

▶をクリックしてフォルダを開いて、「player.js」をダブルクリック。ちなみに、〇〇.jsというファイルが、プログラムを動かす役割のJavaScriptのファイルである。

f:id:Robotech:20210223212615p:plain

 

ソースコードを入力する

おお!それっぽい感じのファイルが開いた。そして「189行目」を探すと、空白になっている。

f:id:Robotech:20210223212623p:plain

なので、サンプルコードの11ページ目、player.jsの189行目のソースコードを書き写していく。必ずファイル名が同じであるかを確認をすることも、プログラミングの必須スキルなので、習慣づけてほしい。

f:id:Robotech:20210223212629p:plain

実際の入力作業がコチラ。プログラムは、コメントを除いて「半角」で書くのが基本で、大文字と小文字も区別されるので、丁寧に入力する。

f:id:Robotech:20210223212643g:plain

 

入力が終わったら保存する

正確に入力ができたことを確認したら、左上のフロッピーディスクっぽいアイコンの「保存」をする。すると…

f:id:Robotech:20210225111538p:plain

 

感動、ぷよぷよが動き始めた!

一体なんだか分からない1行追加しただけで、「ぷよ」が降ってくるではないか。なんだか分からないで全然OK!ゲームが形になっていくのが感じられればそれでOK!同時に、プログラムは一文字でも間違えると動かないのも感じられれば尚良し!

f:id:Robotech:20210223212721g:plain

で、数秒後に「ばたんきゅー」になると。そりゃあね。だって左右に動かせないし、回転もできないんだもの。

f:id:Robotech:20210223212727p:plain

もっともっと、ぷよぷよっぽくしたくない?

 

さらに、ぷよぷよの機能を追加していくぞ!

SESSION2へ進み、「ぷよ」を左右に動かす、を実装してみる。同じくplayer.jsファイルの280行目が空白になっていることを確認する。

f:id:Robotech:20210223214005p:plain

280行目にソースコードを入力ができたら、保存する。だんだんと説明は省いていくので。

f:id:Robotech:20210223214009p:plain

これで、ぷよが左右に動いた!酒ばっか飲んで暮らしてるけど、酔っぱらって蛇行運転しているわけじゃないからな。左右の動作確認を分かりやすくやってるだけで。

f:id:Robotech:20210223212749g:plain

 

ついに、ぷよぷよと呼べるゲームが完成した!

SESSION3とSESSION4へ進むと、ぷよが「回転」「4つ以上つなげると消える」ができるようになる。基礎コースでは、本当にソースコードを4行追加するだけで、ぷよぷよが完成した。

f:id:Robotech:20210223213511g:plain

 

上級にチャレンジしてみては?

これまでは「動かすこと」を目的として、ただ指示された通りにソースコードを入力してきた。プログラミングの世界は結構奥が深くて、例えば下のように記述してもプログラムは全く問題なく動く。

f:id:Robotech:20210223212802p:plain

一例として、インデント(字下げ)という工夫をすると、「ソースコードを読みやすくする」ことができる。

f:id:Robotech:20210223212807p:plainプログラムは一文字でも間違えると正しく動かないので、小さなミスに気付きやすくする工夫をすることが、より複雑なプログラミングをする上で重要となってくる。

 

もっと詳しい解説が必要な方へ

もちろん無料ダウンロードの小冊子にも、開発のポイントが数多く掲載されている。本腰を入れてプログラミングをしてみたい、という方は、詳しい解説がある入門書を参照してみたらどうか。