キー入力を受け取ろう(onKeyDownリスナ)+ブロック崩し零号機

Time-stamp: "2010-10-21 Thu 19:10 JST hig"

キー入力を読み取ろう

Flash Lite では, 例えばキーが押されたときに, あらかじめイベントリスナーとして登録された(オブジェクトのプロパティである)関数を実行することができます. こんなサンプル.

// キーダウンイベントを取得するサンプル

var mc:MovieClip = this.createEmptyMovieClip("mc",this.getNextHighestDepth());

// 極太, 極短, 両端丸の線を描く
mc.lineStyle(40,0x000ff, 100, true, "none", "round","mitter",1);
mc.moveTo(-1,0);
mc.lineTo(+1,0);

// イベントリスナーとするためのオブジェクトを作る
var ml:Object = new Object();

// キーを押された場合に対応する関数を定義
ml.onKeyDown = function(){
    if (Key.getCode() == Key.RIGHT){
	mc._x+=10;
    } else if (Key.getCode() == Key.LEFT){
	mc._x-=10;
    } else if (Key.getCode() == Key.UP){
	mc._y-=10;
    } else if (Key.getCode() == Key.DOWN){
	mc._y+=10;
    } else if (Key.getCode() == 49 ){// 数字キー1 
	mc._xscale*=0.9;
	mc._yscale*=0.9;
    } else if (Key.getCode() == 50 ){// 数字キー2
	mc._xscale=100;
	mc._yscale=100;
    } else if (Key.getCode() == 51 ){// 数字キー3
	mc._xscale*=1.1;
	mc._yscale*=1.1;
    } 

    trace("Key Code: "+Key.getCode()); // トレース画面への出力
}

// 上で作ったオブジェクトをイベントリスナーとして登録する.
Key.addListener(ml);

NTT docomo, au の多くの携帯では, 左右キーはWebブラウザの機能, 上下キーと選択キーはボタンフォーカスの移動と選択に使われ, 上記の方法ではイベントを取得できません. したがって, 数字キーを使ってアプリケーションを作った方がいいでしょう.

Device Central のエミュレータでは, キーボードのキーは認識しませんが, エミュレータのキーパッドをクリックすると認識される場合もあります.

デバッグ

Trace(文字列)を使うと, IDEではコンソールに文字列を出力することができる. PCブラウザや携帯のFlash Playerでは, この文字列は見えるところには出力されない.

課題

  • 携帯についていると思われる, 他のキーのkey codeのリストを作ろう
  • 携帯で実行し, どのキーが自分の携帯で認識されるか確認してWikiに書こう

自発的動き+キー入力による動き

2つを組み合わせるとこんな感じ

var ball1:MovieClip = this.createEmptyMovieClip("ball1",this.getNextHighestDepth());
var ball2:MovieClip = this.createEmptyMovieClip("ball2",this.getNextHighestDepth());
var racket:MovieClip = this.createEmptyMovieClip("racket",this.getNextHighestDepth());

var screenwidth:Number=240;
var screenheight:Number=260;

var racketwidth:Number=30;

ball1.lineStyle(40,0x000ff, 100, true, "none", "round","mitter",1);
ball1.moveTo(-1,0);
ball1.lineTo(+1,0);

ball2.lineStyle(40,0x0ff00, 100, true, "none", "round","mitter",1);
ball2.moveTo(0-1,0);
ball2.lineTo(0+1,0);
ball2._x=100;

racket.lineStyle(2,0xff0000, 100, true, "none", "round","mitter",1);
racket.moveTo(0-racketwidth/2,0)
racket.lineTo(0+racketwidth/2,0);
racket._x=100;
racket._y=200;

ball1.onEnterFrame = function() { 
    this._x+=3;

    if( this._x>screenwidth){
	this._x-=screenwidth;
    }else if( this._x<0){
	this._x+=screenwidth;
    }
    trace("ball1._x="+this._x);
};

ball2.onEnterFrame = function() {
    this._y+=2;
	
    if( this._y>screenheight){
	this._y-=screenheight;
    }else if( this._y<0){
	this._y+=screenheight;
    }
    trace("ball2._y="+this._y);
	
    // キーが押された場合に対応する反応を書くもう一つの方法
    if (Key.getCode() == 49 ){// 数字キー1 
	this._xscale*=0.9;
	this._yscale*=0.9;
    } else if (Key.getCode() == 50 ){// 数字キー2
	this._xscale=100;
	this._yscale=100;
    } else if (Key.getCode() == 51 ){// 数字キー3
	this._xscale*=1.1;
	this._yscale*=1.1;
    } 

    Trace("Key Code: "+Key.getCode()); // トレース画面への出力
};

// キーを押された場合に対応する関数を定義
var ml:Object = new Object();
ml.onKeyDown = function(){
    if (Key.getCode() == Key.RIGHT){
	racket._x+=10;
    } else if (Key.getCode()==Key.LEFT){
	racket._x-=10;
	}
};
Key.addListener(ml);

課題

スカッシュゲームを作ろう.
  • ボールは360度どの方向にも移動する
  • ボールは3方向または4方向の壁で反射する
  • ラケットは左右に動ける
  • ラケットにボールが当たった時は壁と同じように反射する
  • 拡張: ラケットの動きに応じて反射のしかたは変化する
  • 拡張: ボールがぶつかると消える障害物もある(ブロック崩し化計画)
  • 拡張: ボールのスピンに応じて反射のしかたは変化する(テニスゲーム化計画)

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net