monacaでenchant.jsを使って簡単なゲームを作ってみた。

こんにちは。竹石です。

今回は、monacaでenchant.jsを使ったらどんな感じなんだろうって思って、
ちょっと簡単なゲームをつくってみましたのでご紹介します。

ちなみに、enchant.jsはカンタンにゲームやアプリを開発できる HTML5 + JavaScript のフレームワークです。

ゲームとしてイケてるものを！と言うよりは、
monacaでenchant.jsを使ってみたかった・・・ただそれだけなんです！

今回つくるゲームのイメージ

ということで、こんなゲームをつくってみました。

落ちてきた葉っぱに当たると、葉っぱが消えるといういたってシンプルなゲームです。
動きは、メガ盛りポテト風です。

サンプルコード

お約束のコードを書く

まずお約束的なところを書きます。

enchant();
function callinit() {
  if (getUa() === false) init();
  else document.addEventListener("deviceready", init, false);
}
function getUa() {
  if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 ) {
    return 'iPhone'; 
  } else if(navigator.userAgent.indexOf('iPad') > 0) {
    return 'iPad';
  } else if(navigator.userAgent.indexOf('Android') > 0) {
    return 'Android';
  } else return false;
}

ゲームの実装

function init() {
  var game = new Game(480, 840);
  var LEAF_IMG = 'img/leaf.png';
  var TANUKI_IMG = 'img/tanuki.png';
  
  game.fps = 80;
  game.preload(LEAF_IMG, TANUKI_IMG);
  game.onload = function() {
    game.pushScene(game.startScene());
  }
  game.createLeaf = function(tanuki) {
    var leaf = new Sprite(44, 17);
    leaf.image = game.assets[LEAF_IMG];
    leaf.x = Math.random() * (320 - leaf.width);
    leaf.y = 40;
    return leaf;
  }
  game.startScene = function() {
    var leaf = new Sprite(44, 17);
    leaf.image = game.assets[LEAF_IMG];
    leaf.x = 200;
    leaf.y = 40;
    game.rootScene.addChild(leaf);
    
    var tanuki = new Sprite(100, 140);
    tanuki.image = game.assets[TANUKI_IMG];
	tanuki.x = 200;
    tanuki.y = 600;
    game.rootScene.addChild(tanuki);

    game.rootScene.addEventListener(Event.TOUCH_MOVE, function(e) {
      tanuki.x = e.x;
    });
    tanuki.addEventListener(Event.ENTER_FRAME, function(e) {
      if (game.input.right){
        tanuki.x += 2;
      }
    });

    var time = 0;
	game.addEventListener(Event.ENTER_FRAME, function(e) {
      leaf.y += 1;
      time = 6 - game.frame / game.fps;
      if (time == 4 || time == 2) {
        leaf = game.createLeaf(tanuki);
        game.rootScene.addChild(leaf);
      }
      if (leaf.within(tanuki, 100)) {
        game.rootScene.removeChild(leaf);
      }
    });
  }
  game.start();
}

まとめ

monacaとenchant.jsを使えば、簡単にスマホで動くゲームが作れるから嬉しいし楽しいですね！

アプリつくったことがあまりないという方でも、是非enchant.jsでゲームをつくってみて
monacaでアプリにしてマーケットに出してみると開発が楽しくなると思いますよ。