ぞう Advent Calendar 2015の18日目です。

enchant.jsを使って酒を投げながらぞうと戯れるメカソン作ってみたぞう⤴︎。
どこかで飛行も覚えたようです。

[操作方法]

• 左右キー : 横移動
• 上キー : 上昇
• z : 酒を投げまくります（長押し可）

左右からからめっちゃぞうが飛んできます。
たまに勢いよく飛んでくるぞうに当たると、ふっ飛ばされます。

ブラウザ

chrome / safari / firefox（ちょっとカクカクする） / IE11

ちなみにIE10以下ではぞうは飛んでくるんですが、
なぜかメカソンの操縦ができず、フルボッコにされます。

ちょっと作りが甘いとこありますが、そこは多めに見てください。
PCでご覧ください。

mechason

以下、作ってみた背景をチラリ。

enchant.jsとは？

enchant.jsはHTML5 + JavaScriptで作る日本製のゲーム開発フレームワークです。

ボールが飛んでいく動きや、壁に衝突といった物理計算もしてくれます。

5年前くらいに流行っていたと耳にしました。

enchant.js

あれ？サーバー落ちてない？
大丈夫？？

昨日サーバー落ちてました。

使ってみたきっかけ

enchant.jsを使ってみたのは面白いサイトを見つけたから。

日頃、Web制作のネタ集めにいろんな新着Webサイトのまとめを見ていて、
その時にたまたま見つけたサイト。

アミューズメント事業を行っている株式会社オフィスボストンのリクルートサイトです。

パチンコ飛び交うメインビジュアル。どうも規則正しく飛んでるわけでなくランダムっぽい。
「これどうやってんねん！！」と気になったのがきっかけ。

リクルートサイトだから期間限定かもです。
リンク切れてたらすいません。（その時は連絡いただけるとありがたいです）

そして、ソースみてたら「box2d」というjsを読み込んでる感じで、
そこからいろいろ辿ってたら、enchant.jsにたどり着きました。

enchant.jsの使い方

簡単に使い方を。

準備

公式サイトからファイル一式を落としてきます。

そして以下を読み込む

<script src="enchant.js"></script>
<script src="Box2dWeb-2.1.a.3.js"></script>
<script src="box2d.enchant.js"></script>

enchant.jsだけでもゲームは作れるそうです。
が物理エンジンを利用する場合は他の2つも読み込まないといけないようです。

JavaScript

jsファイルを作って処理を書いていきます。

大枠の構造はこんな感じになります。

// おまじない的な
enchant();
window.onload = function() {
  var game = new Game(screen_width, screen_height);
  game.onload = function() {
    // 処理を書くところ
  }
  game.start();
}

処理の内容

先ほどの「処理を書くところ」に書いていくものを紹介します。

簡単に物体を作るところだけ。

// 決まり文句のようなもの
// (0,5)は(横方向の重力,縦方向の重力)
mechasonWorld = new PhysicsWorld(0, 5);
for(i = 0; i < 100; i++){
    // 地面
    var floor = new PhyBoxSprite(16, 16, enchant.box2d.STATIC_SPRITE, 1.0, 1, 1, true);
    floor.image = game.assets["img/ground.jpg"];
    floor.position = { x: i * 16, y: 600 };
    game.rootScene.addChild(floor);
}
// メカソン生成
// PhyBoxSprite(横,高さ,動作,密度,摩擦力,反発力,フラグ)
var mechason = new PhyBoxSprite(76,80,enchant.box2d.DYNAMIC_SPRITE, 0, 0, 0, true);
mechason.image = game.assets['img/aizon.png'];
// 位置
mechason.y = 300;
mechason.x = 300;
game.rootScene.addChild(mechason);

ざっくりとこんな感じで地面と、オブジェクトを作れるはず。

詳しくはGithubでソースを公開してるので、見てください。

GitHub

スターも待ってます（媚）

素材

メカソンの画像は@ƹɒTさんからいただきました。

あざます！

もうちょっとやりたかったこと

・攻撃判定でぞうが消えるとか。
・何か取ったらポイント入るとか何かそういうやつ。

次こそはもうちょっと改良して公開しようとか考えてて、ふと思った。

また仕事の役に立たぬものを作ってしまった…

おわり

参考にしたサイト

・「box2d.enchant.js」で、2D物理エンジンを使って遊んでみた！

・enchant.jsの２D物理シミュレーションのチュートリアルをやってみる～box2d.enchant.js

・自機のビームを連射できるようにする