コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

きっと何者にもなれない僕だから

持たざるものがエンチャントした

エンチャントファイアと言いながら自分の体に火をつけた話のことではないです

その話はまた別の機会にしようと思う。


今日はドットインストールを見てクマを捕まえるゲームを作ったなので紹介します。
http://dotinstall.com/lessons/kuma_catch_enchant_js_v2

enchant.jsについてはこちら
enchant.js - A simple JavaScript framework for creating games and apps.
ざっくりいうとHTML5JavaScriptで簡単にゲームがつくれるフレームワークだそうです。
JavaScript系はライブラリなのかプラグインなのかフレームワークなのかよくわからないものがいくつもあってあまり違いがわからなかったりする。

早速利用するよ

zipファイルをダウンロードして持ってきても良いのだけど、最近は解凍することさえ面倒になってきたのでgit clone https://github.com/wise9/enchant.js.gitで必要な物を調達するよ。

さて、必要なファイルを調達したしゲームをつくろうと思ったら「enchant.jsファイル」がないですね。

Looking for enchant.js source file? enchant.js has removed from repos, so please look for enchant.js-builds!

公式によると奴はもう消した、欲しけりゃ探せということみたいです。
というわけでこちらから調達します。
GitHub - uei/enchant.js-builds: pre-built files of enchant.js

準備ができたのでつくりました

f:id:andron:20161030165630p:plain
このようなゲームを作りました。5秒間でランダムで表示されるくまを何匹クリックできるかゲーム。
内容はそのままですが、alert()でスコアが出る仕様が嫌だったので細かいところをいじってます。

以下、ソース。
main.js

enchant();

window.onload = function(){
  var game = new Core(320,320);
  game.fps = 15;
  game.preload("./chara1.png");
  
  var score = 0;
  var timeLeft = 5 * game.fps;

  game.onload = function(){
    var bear = new Sprite(32,32);
    bear.image= game.assets["./chara1.png"];
    bear.x=rand(320);
    bear.y=rand(320);
    bear.frame=0;

    bear.on("touchstart",function(){
      score++;
      scoreLabel.text = "Score: "+score;
      this.frame = 3;
      this.x=rand(300);
      this.y=rand(300);
    });

    var scoreLabel = new Label('Score: 0')
    scoreLabel.x = 200;
    scoreLabel.y = 5;

    var timeLabel = new Label('Time: 0')
    timeLabel.x = 100;
    timeLabel.y = 5;

    var gameOver = new Label()
    gameOver.x = 160;
    gameOver.y = 160;

    game.on("enterframe", function(){
        timeLeft--;
        timeLabel.text = 'Time: '+timeLeft;
        if(timeLeft<=0){
          gameOver.text = 'Your Score: ' + score;
          this.stop();
        }
    });

    game.rootScene.addChild(scoreLabel);
    game.rootScene.addChild(timeLabel);
    game.rootScene.addChild(gameOver);
    game.rootScene.addChild(bear);
  }
  game.start();
}

// ランダム
function rand(n){
  return Math.floor(Math.random()*(n+1));
}

enchant.jsファイルと組み合わせることでこのクソゲーが楽しめるようになるよ。
ちなみにバージョンは(v0.8.3)で作っています。