MTMTKZM.com

Waste of Time

  • Planning
  • JavaScript
  • Canvas
  • CreateJS
  • Milkcocoa
http://mtmtkzm.com/wot

なんか久々にCanvasで作りたいなーと思い立ち、突如取り掛かり始めたのがこのWaste of Time.
時間を無駄にするだけのクソゲーですが、是非一度プレイしてみてください。
ランキング機能もついていますのでランクインするまで頑張ってみてください。

http://mtmtkzm.com/wot

突如思い立つ

「Canvasを使って久々になんか作りたいなー」と思ったのがきっかけ。
前に作ったものはこれです。

http://mtmtkzm.com/canvas.html

まず、機能を実装する

以前書いたコードを読んだり様々な記事を読みあさったりしたけど、結局のところ、まず書き始めるのが一番良いなと思い、思いついた機能を順に実装していき、機能だけを全て実装した。

そういやこの時点では、ゴキブリを叩き潰すゲームだったなあ笑

また、今までサーバサイド技術を持ち合わせていなかった故実装できなかったランキング機能を、Milkcocoaが解決してくれてちょっと感動。
実装時のことは、Qiitaに投稿しました。

Milkcocoaに保存された、名前とスコアのデータからランキングを作る

Sketch3でデザインを作る

機能が大体できたのでデザインを実装してみよう!ということでアプリストアから良さげな雰囲気や世界観をもつアプリのキャプチャを探しまくる。
結果、落ち着いた色のモノトーンでいくことに。

細かいところまではあまりこだわらずにサクサク作っていく。
「Sketch楽しい、はまる〜〜〜〜!」こんな感じで数時間で終わらせる。

og-imageや、アイコンなどもここで作っちゃう。

デザインを実装していく

TweenJSと呼ばれるライブラリで軽くアニメーションをつけてみたりもしたが、このとき意外と難しく感じたのが色のアニメーション。思うように動かず四苦八苦・・。

完成したクソゲーはこちら!

http://mtmtkzm.com/wot