share facebook facebook twitter menu hatena pocket slack

2012.01.11 WED

HTML5 enchant.js クラス定義・キー操作

小森隆太

WRITTEN BY 小森隆太

こんにちわ。
職人見習いの小森です。

HTML5 enchant.js 基本に引き続きHTML5とJavaScriptの勉強を兼ねてenchant.jsについてまとめます。
今回は、クラス定義とキー入力です。

○クラス定義の例

var Enemy = Class.create(Sprite, {
    initialize : function() {
         Sprite.call(this);

        //初期化処理記述
    }
});

initialize : function()の中に、継承するクラスの初期化処理と新たに作成したクラスの初期化処理を記述します。

○キー操作

var sp = new Sprite(32, 32);
sp.x = 100;
sp.y = 100;
sp.addEventListener('enterframe', function(e) {
     if (game.input.left) this.x -= 1;
     if (game.input.right)this.x += 1;
     if (game.input.up)   this.y -= 1;
     if (game.input.down) this.y += 1;
});

gameクラスのinputを参照してキーの入力状態を取得することができます。
game.onload = function(){};の中に上記の処理を記述することで十字キー押下時に画像等の表示
を変更することが可能です。

また、game.keybindでボタンも3個使用可能です。

game.keybind(90, 'a'); zキー
game.keybind(88, 'b'); xキー
game.keybind(67, 'c'); cキー

game.input.bを参照すると、押されているときにtrue(1)、押されてないときにfalse(0)が入ってきます。

※この記事は、なかの人(spitz8008)が書いています。

小森隆太

小森隆太

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。