enchant.js と iPhone の加速度センサーを使ったゲームを作ろう!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

先日, 「enchant.js を使ってゲームを作ろう!!」 という記事を書いたところ思っていた以上に多くの人に見ていただくことができました. プログラミング経験のない友人からも「ちょっとやってみた」という連絡が来たりと, 初めてちょっとこのブログが役に立ったのかなと思います. 見てくれた方々ありがとう!!

前置きはこのぐらいにして, 今回は enchant.js + iPhone の加速度センサーを使ってゲームを作ってみました.

enchant.js を使い, iPhone の加速度については以前自分で書いた「JavaScript で iPhone の加速度センサーを扱う方法」ってのを 参考にすることで, 1時間ほどで作ることができました.いや~ enchant.js は本当によく出来てるライブラリですねぇ~

SAMPLE and DATA

作った「CoroCoro」はこちらで遊ぶことができます.

iPhone を傾けることでPlayer(黄色い玉)を移動させることができます. Enemy(赤い玉)を避けつつPoint(小さい黄玉)をゲットしてスコアを稼ぐゲームです.

※傾きセンサーを使用しているため iPhone でしか遊ぶことができません.

データはここからダウンロードできます

ゲームを作る流れ

  • Step0 – enchant.js やプラグインを使う準備しよう!
  • Step1 – 敵を表示してみよう!
  • Step2 – プレイヤーを傾きで動かせるようにしてみよう!
  • Step3 – 衝突判定をしてみよう!
  • Step4 – ポイントを追加してスコア表示してみよう!
  • Step5 – ツイートできるようにしてみよう!
  • Complete – 完成!!時間が経つにつれて敵の移動スピードが速くなります.

アドバイスや質問, 間違いの指摘等ありましたら Tweet もしくは下にコメントしていただけると嬉しいです.

また, リクエストとかあれば気軽に言ってください. 私なんかに出来ることであれば対応します.

次はシューティング, いや3Dゲームでも作ろうかな.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT

  • phi_jp より:

    enchant.js と iPhone の加速度センサーを使ったゲームを作ってみました.
    作る手順も近々書こうと思います.
    よかったら是非遊んでみてください.
    http://t.co/TTNYg03
    #javascript #enchantjs #iPhone

  • phi_jp より:

    「enchant.js と iPhone の加速度センサーを使ったゲームを作ろう」
    に関する記事を更新!! 作る手順についてまとめました.もちろんデータもダウンロードできます.
    よかったら参考にしてみてください.
    #javascript
    http://t.co/TTNYg03

  • shi3z_bot より:

    「enchant.js と iPhone の加速度センサーを使ったゲームを作ろう」
    に関する記事を更新!! 作る手順についてまとめました.もちろんデータもダウンロードできます.
    よかったら参考にしてみてください.
    #javascript
    http://t.co/TTNYg03

  • kimura より:

    「enchant.js と iPhone の加速度センサーを使ったゲームを作ろう」
    に関する記事を更新!! 作る手順についてまとめました.もちろんデータもダウンロードできます.
    よかったら参考にしてみてください.
    #javascript
    http://t.co/TTNYg03

  • ma2 より:

    enchant.js と iPhone の加速度センサーを使ったゲームを作ろう!! / TM Life http://htn.to/eoFZD

  • ma2 より:

    enchant.js と iPhone の加速度センサーを使ったゲームを作ろう!!