ロボテッチ通信

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

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


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

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

名作ゲーム「ぷよぷよ」をプログラミング!誰でも簡単に無料で作れます!

f:id:Robotech:20210223213511g:plain

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

 

[目次]

 

この手の記事は、プログラミングの初心者が試行錯誤してゲームを作って、誰でもできるよ!という展開が多いです。その展開のほうが親近感が湧くとは思いますが、なんか当ブログっぽくはないので、バリバリの現役エンジニアが初心者向け教材をやってみた!という違った切り口で解説していきます。

私は15年以上システムエンジニアをやっていて、ゲームプログラミングが専門ではないですが、少し前に「弾幕系の縦スクロールシューティングゲーム」を仲間と作ってました。プロなのでイメージしたものはだいたい作れます。エンジニア向けの講演会でペチャクチャしゃべって家族を養っています。一般の方が手にすることはないだろう、開発環境についての技術書も書いています。買ってくれたらサイン書きます!握手もします!でも一般の方向けではないので返品したくなると思います!

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

 

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

やるんだよ。

つべこべ、うるさいんだよ。口ばっかり動かしやがって。四の五の…

令和の時代は、誰でも無料でプログラミングが始められます。お金を掛けなくてもプログラミングの雰囲気は分かります。せっかくなので、楽しんで勉強してみてください。

 

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

この教材は、「ある程度完成しているプログラム」にソースコードを入力して(基礎コースだと4行のみ!!)、親切な大人が意図的に動かない状態にしてあるゲームを動かすというシンプルなものです。所謂、接待プログラミングです。上級コース以外は、ほぼ完成したプログラムが用意されています。

 

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

未経験者は「基礎コース」を選択し、プログラミングとは何をすることなのか?をまず感覚的に理解してください。手を使わずにボールを蹴る競技がサッカーです的な話です。わりと初心者の方がやってしまいがちな、「オレ、生まれつきセンスあるし、きっとプログラミングなんか余裕だから初めから上級に行くぜ!」という考えはオススメしません。おっさんの小言でウザいかもしれませんが、聞いてください。仮にセンスがあったとしても、基礎を飛ばして上手くいくのは最初だけです。長期で見ると、段階的に基礎から学んだ人に必ず追い抜かれるのが現実です。でもセンスというか、勘はわりと大事です。ハハッ\(^_^)/ 

 

用意するもの

家にある道具だけで手軽に始められます!無ければ用意してください。

  • パソコン ⇒ 古いものでなければOK。Windows, Mac, Google Chrome book, タブレットなんでも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人はココで躓くと感じます!このあたりの躓きポイントを伝えるのが、ベテランの役目なのでウザくて恩着せがましい私が解説した意味がありましたね。

小冊子3ページ目、「※player.js」を選択してください。とありますが、それはどこにあるの?となりそうです。プログラミング経験者は勘で場所が分かります。やっぱり、画面左側の「src」の中に隠れていました!たぶん、ここで10,000人中の3,000人は見つからなくて辞めると思います。

f:id:Robotech:20210223212604p:plain

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

f:id:Robotech:20210223212615p:plain

 

ソースコードを入力する

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

f:id:Robotech:20210223212623p:plain

なので、サンプルコードの11ページ目、player.jsの189行目のソースコードを書き写していきます。必ずファイル名が同じであるかを確認してください。そういった細かな確認作業もプログラミングの必須スキルです。似ているからOK!は確認ではありませんので、何度も何度も確認をすることを習慣づけてください。

f:id:Robotech:20210223212629p:plain

実際の入力作業がコチラです。プログラムは、コメントを除いて「半角」で書くのが基本で、大文字と小文字も区別されます。スピードは気にしなくていいので、丁寧に入力してください。超高速で入力しているのはドラマだけです。

f:id:Robotech:20210223212643g:plain

 

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

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

f:id:Robotech:20210225111538p:plain

 

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

なんだか分からない1行追加しただけで、「ぷよ」が降ってくるではありませんか!なんだか分からないで全然OKです!ゲームが形になっていくのが感じられればそれでOKです!同時に、プログラムは一文字でも間違えると動かない、ということも感じられれば尚良いです。余裕があれば適当な1文字を消したりして、本当に動かなくなることも確認してみてください。

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後で自分が見返した時に修正がしやすくなったり、何人かでチームを組んで作業をする時には必須のテクニックです。ほぼルールと考えてもいいかもしれません。プログラムは一文字でも間違えると正しく動かないので、小さなミスに気付きやすくする工夫を身につけると、より複雑なプログラムが書けるようになります。

 

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

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