【チート有り】WebエンジニアとしてCookie Clicker（クッキークリッカー）を遊んでみた感想。
皆さんはクッキークリッカーと言うブラウザゲームをご存知でしょうか？
自分は↓この漫画を見て初めて存在を知りました。
調べてみると、どうやら台風が来ている時に一気に拡散したらしいです…
http://www.actzero.jp/social/report-4444.html
web開発に関わる仕事をしている者として、
「乗るしかない、このビッグウェーブに！」
の心情で一度遊んでみることにしました。
先ず第一印象はUIが分かり易いなーでした、名前の通り左のクッキーをクリックするゲームなんだなと直ぐに分かるし。右のアイテムも透明度とフォントのスタイルで、まだ買えないアイテムだと分かります。
まずそのままで１０分ほど遊びました。
クッキーの生産量 / 秒 がどんどん増えて行き、それに伴い称号やアップグレードを獲得でき、さらにクッキー生産量が増加する、と言う様なゲームでした。
当面の目的はクッキーを増やす事で、最終的には全ての称号やアップグレードをオープンするのが目的のゲームです。
つい夢中になってしまう系の中毒性を持ったゲームで、レベルデザインがとても良く出来ていると感じました。その他にもセーブデータのインポート・エクスポート機能や、ゲームリセット機能等、何時でも、何時までも遊べる様に作られているなーフムフムと思いながら遊ばせて貰いました。
ここからちょっと技術的な話になります。
１０分間ひたすらクッキーをクリックし続け疲れたので、ちょっと一休みして、このゲームがどう言う実装で作られているのかを見てみる事にしました。
先ずは右クリックをしてFlashかどうかを確認、Flashじゃ無い事が分かったので次にデベロッパーツールを開いてResourcesを眺めてみます。
画像が縦長になるので開いていませんがImagesにはゲーム構成に必要な画像が入っています。ここでこのゲームは所謂HTML5で制作されたゲームだと言う事が分かりました。
この時にデベロッパツールでウィンドウサイズを変更して、おぉある程度レスポンシブにUIが変わるじゃん、へぇーとまた感心してました。
では次にScriptsを見ていきます、どう見てもって感じのmain.jsから見てみます。
予想通りこのmain.jsが、このゲームの根幹を成しているスクリプトの様です。
ざっと流し見してみた所、サーバーサイドの処理は殆ど無く、ゲームの動作に必要な変数や関数はこのmain.jsに殆ど書いてあることが分かりました。
現時点のv.1.036でmain.jsには3307行のスクリプトが書かれていました。
3000行以上のゲーム用スクリプトが書かれているというのに、とても綺麗に纏まっていて、凄く読みやすいコードでした。
現在javascriptを勉強中の方や、javascriptである程度の規模のゲームを作りたいと思っている方は、是非このmain.jsを読んでみて下さい。
とても良い勉強になると思います。
自分もまだざっくりとしか読めていないのですが、時間がある時にガッツリ読み解いてみたいと思います！
!!! WARNING !!! WARNING !!!
ここから先の記事には、クッキークリッカーを恐ろしくつまらないゲームにしてしまうかもしれない要素が含まれています。
今現在クッキークリッカーを楽しく遊んでいる方は続きを見ない事をお勧めします。
それでは続きを書いていきますね。
上の方でも書きましたが、このゲームはサーバーサイドの処理が殆どなく、ゲームに必要な変数や関数が殆どローカルに揃っているゲームです。
つまりどう言う事かと言うと、チートがとても簡単に出来てしまうと言う事です。
試しにこのゲームの目的の一つであるクッキー枚数を増やしてみる事にします。
デベロッパツールのコンソールを開いて
こうして。（コンソールに実行するスクリプトを入力）
こうじゃ！（エンターを押して実行）
するとどうなるか？
こうなります。
桁がオーバーフローして上手く表示できていないですが、さっき入力した分のクッキーが生成されています。
クッキーが大量に手に入ったので何かアイテムを買ってみたいと思います。
でも一々クリックするのが面倒なので、これもスクリプトを走らせる事にします。
マウスをGrandmaの上に持っていき右クリックから要素を検証します。
するとonclickに↓このようなスクリプトが設定されていました。
Game.ObjectsById[1].buy();
これが分かったので簡単なスクリプトを書いてみます。
for文でさっきのコードを100回実行しました。
100人のGrandmaを買う事が出来ました。
ちょっとプラグラミングをやった事がある人ならピンと来ると思いますが
Game.ObjectsById
この配列にアイテムのオブジェクトが入っています。
Game.ObjectsById[0].buy()を実行するとCursorが、
Game.ObjectsById[2].buy()を実行するとFarmを買う事が出来ます。
その他にも
Game.goldenCookie.spawn()
を実行すればゴールデンクッキーを好きなタイミングで出現させられたり。
そもそもクッキーをクリックするのが面倒なら
Game.ClickCookie()
を実行すればクッキーをクリックしたのと同じ処理になります。
一番上のGameオブジェクトが実行中のゲームそのものになっているので、変数を変えたり、関数を実行すると、そのままプレイ中のゲームに反映されます。
全て話そうと思うと切りが無いので、他の変数や関数は是非自分の目で確かめてみてください。ゲームの作り方や変数、関数設計の良いお手本になると思います。
しかし、上記のクッキーを増やすチートの様に、ゲームの目的になっている物をチートで無くしてしまうと、ゲーム自体が非常につまらない物になってしまうので、チートはあくまで研究用として使う様にしましょう。
色々やりましたが、このゲームは遊んで楽しい、分析して楽しいと、web開発者にとっては二度美味しい、とっても素晴らしいゲームです！
まだ遊んだ事が無い開発者の方は、是非一度プレイしてみて下さい。そしてただ遊ぶだけでは無く、分析もしてみるとより一層楽しめると思います。
ここまで読んで下さった方、ありがとうございました。
初めてのHatena Blog＋長文になっちゃって、凄く時間がかかったけど、「開発者はブログを書くべき！」らしいので、また何かあれば記事を書いてみたいと思います。
乱文長文失礼しました。
ではではー。
P.S.
HTML5のゲームって、こう言うチートが結構簡単に出来てしまう所が、ちょっと困りものですよね…
