初心者がWordPressでタイピングのリアルタイム対戦ゲームを作ってみました

はじめに

この記事は、WordPressでしかホームページを作れないプログラミング初心者が、無理やりWordPressを使って、タイピングのリアルタイム対戦ゲームを作ってみた記事です。

タイピング初心者用に、７０近くあるステージをクリアしていくモードもあります。

IT系の集まりで、「WordPressでこのサイト作ったよ」って言ったらどよめきが起こり、「Qiitaに書いてみれば？」と言われたので書いてみます。

ちなみに、タイピンガーＺというサイトです。

このサイトをWordPressでどうやって作ったのかを、ざっくり書いていこうと思います。

テーマのテンプレート

はるか昔に購入した有料テンプレートを使ってみましたが、改造しすぎて原型をとどめていないので、なんでも良かったと思います。

記事投稿と固定ページテンプレート

タイピンガーＺは、対人対戦を除いて、ステージをクリアしていく仕組みになっているのですが、それらのステージはWordPressの記事投稿で作りました。

記事には、敵キャラのセリフだったり、敵の強さだったり、音楽・背景だったりのパラメーターを記入します。
↓こんな感じ

<!--セリフ-->
<span id="pan2serifu">
（たけしさんブリーフ増えてる・・・）brbr
なんすかそれ,
ブリーフ型ターバンヲ発明シマシタ。22,
ヨガタケシデース22,
カレーガンジーヨガファイア22,
インド人に謝れ,
ヨガソーリー22,
さて、今回もがんばろう。
,*-,*del,((</span>
<!--速度基準-->
<span id="speedlinesetting1">20</span><!--遅い-->
<span id="speedlinesetting2">30</span>
<span id="speedlinesetting3">40</span><!--早い-->
<!--ミス基準-->
<span id="misslinesettei1">60</span><!--正確性低い-->
<span id="misslinesettei2">70</span>
<span id="misslinesettei3">85</span><!--正確性高い-->

それぞれのパラメーターは、Javascriptでゲットできるように、idかclassを付けておきます。
セリフに「22」とか、「*del」とか書いてますが、これはJavascript側に何かしてほしいときの自作コマンドみたいなものです。
このコマンドで、セリフを話してるキャラが消えたり、セリフが大きくなったり、BGMが変わったりと、いろいろ操作することができるようにしてます。

また、これだけではただのブログ記事のデザインにしかならないので、自分で作った固定ページテンプレートを当てます。

「初心者練習ステージテンプレート」「CPU対戦用テンプレート」などをPHPで書いて用意しました。

あとはパラメーターを書いた記事を大量に投稿して、それぞれに固定ページテンプレートを当てれば、ステージがどんどん増えていきます。

リアルタイム対戦

リアルタイム対戦を導入するにあたってNode.jsを使いたかったのですが、僕が使っているロリポップレンタルサーバーが対応してなかったので、仕方なくAWSも使うことにしました。

AWSを「オッス」と読んでたくらい何も知識がなかったのですが、１年目が無料なのと、２年目以降もだいぶ格安っぽい感じだったので使うことにしました。

AWSでNode.jsを導入するにあたって、下記の記事をそのままやりました。

AWS EC2でNodeを動作させる

この記事でやってることが何なのか、何も理解しないまま人形のように作業したのですが、なんと普通にNode.jsが動きました。
記事の筆者さんありがとう。

しかし、この記事のままだとhttpsでのやり取りができず、そこではまりました。
何も理解しないまま進めると、応用が利かないから困ります。

なんとか解決したものの、どうやって解決したのか忘れてしまったという。。。
たしかロードバランサ―の部分でhttpsを受け入れてなかったとか、そんな感じだった気がします。

Socket.io

Node.jsのライブラリであるSocket.ioを使って、リアルタイム対戦を実現しました。
Socket.ioまじですごい。アホでも使えるようにしてくれてる。

基本的には、下の四つだけ覚えたら使えました。

.on()　受信
.emit()　送信
.broadcast()　自分以外に送信
.join()　部屋作る

Firebaseとやらがもっと簡単という噂を聞きましたが、Socket.ioも初心者でも扱えるとてもシンプルなものでした。

処理のフローをまとめると

無理やりWordpress使って、サーバーも２つ使ってるという構造なので、無駄に複雑です。

リアルタイム対戦の処理をまとめると・・・

１、サーバー１(WordPress)からクライアントにページ情報を送信
２、クライアント側でHTMLとかJavascriptが動く
３、クライアントからサーバー２(AWS、Node.js)に情報送信
４、サーバー２から対戦相手のクライアントに情報送信
５、以下サーバー２を通してクライアント同士で情報送受信

という流れです。

Qiitaの天才達、ありがとう

開発前は、プログラミング素人の自分が、リアルタイム対戦なんてできるのか？
とか思ってましたが、やってみればできるもんです。
１０年前だったら不可能だったと思いますが、先人の天才達が素人でもできるように、資料やライブラリを公開してくれているので、なんとかなった感があります。
Qiita、めちゃくちゃ参考にしました。

天才達、ありがとう。

Twitter：@pant2taicho
ホームページ：タイピンガーＺ