背負い投げとENTER_FRAME

Arcticはどういうものかを試してみたかったのでDL。
サンプルのNumberを見たら、案外行けそうなので、
これをベースにオレオレスロットを作ってみた。

感想・メモ

• Shape、textfieldなどはActionScriptっぽくて馴染みやすい。
• initializeはコンストラクタ？
• updateはONENTER_FRAMEと思えばいいのかな？ でも停止できない？
• JSはコードが長くなるから、うまく分割すべし。

HTMLコード

<canvas id="canvas"></canvas>
<script src="arctic.js"></script>
<script src="game.js"></script>

Javascriptコード

(function(){
var system;

//ゲームのメインクラス
var GameMain = arc.Class.create(arc.Game, {
	GAME_FTP:3,
	TOP_MARGIN:10,
	LEFT_MARGIN:15,
	MARGIN:6,
	initialize:function(params){
		
		this._game_states = false;
		this._fullSlot = 0;
		
		this._txtArr = ['R','E','N','O'];	//テキスト
		this._btnArr = [];	//ボタン用配列
		
		//ボタンの配置
		for(var i = 0, len = this._txtArr.length; i < len; i++){
			var btn = new NumberButton();

			btn.setX(this.LEFT_MARGIN + i * (this.MARGIN+NumberButton.WIDTH));
			btn.setY(this.TOP_MARGIN);
			btn.setNumber(this._txtArr[i]);
			
			this.addChild(btn);
			this._btnArr.push(btn);
		}
		
		// スロットの番号表示
		this._stdp = new SlotDisplay();
		this._stdp.setX( this.LEFT_MARGIN );
		this._stdp.setY(90);
		this._stdp.setNumber('R');
		this._stdp.addEventListener(arc.Event.TOUCH_END, arc.util.bind(this._onClickSlot, this));
		this.addChild(this._stdp);
		
		// カウンター
		this._cdp = new ClickDisplay();
		this._cdp.setX( this.LEFT_MARGIN );
		this._cdp.setY( 330 );
		this.addChild(this._cdp);
		
		//スタートボタン
		this._cover = new Cover();
		this._cover.addEventListener(arc.Event.TOUCH_END, arc.util.bind(this._onClickCover, this));
		this.addChild(this._cover);
		
	},

	//開始
	_start: function(){
		this._ftp = 0;
		this._currentNumber = 0;	//スロット用フレーム数
		this._game_states = true;
	},

	//Coverのクリックハンドラ
	_onClickCover: function(event){
		// var target = event.target;
		this.removeChild(this._cover);
		this._start();
	},
	
	_reSet: function(){
		this.removeChild(this._cover);
		this._fullSlot = 0;
		this._start();
		this._game_states = true;
		this._cdp.resetNumber();
		
		for(var i = 0, len = this._txtArr.length; i < len; i++){
			var _btn = this._btnArr[i];
			//alert(_btn);
			_btn.activate(true);
			_btn.setStatus(false);
		}
	},
	
	_onClickSlot: function(event){
		
		var target = event.target;
		var _num = target.getNumber();
		
		this._cdp.setNumberUp();
		
		for(var i = 0, len = this._txtArr.length; i < len; i++){
			var _btn = this._btnArr[i];
			
			if( ( _btn.getNumber() == _num ) && ( !_btn.getStatus() ) ){
				_btn.activate(false);
				_btn.setStatus(true);
				
				// 終わったかのカウント。
				this._fullSlot = this._fullSlot + 1;
				
				if( this._fullSlot == this._txtArr.length ){
					
					this._cover = new Cover();
					this._cover._txt.setText("END\n\n"+this._cdp.getNumber()+"打数4安打");
					this.addChild(this._cover);
					this._cover.addEventListener(arc.Event.TOUCH_END, arc.util.bind(this._reSet, this));
					this._game_states = false;
				}
			}
		}
		
	},

	update:function(){
		
		if( this._game_states ){
			this._ftp = this._ftp + 1;
		}
		
		
		if(this._ftp == this.GAME_FTP){
			
			// ftpカウンターをリセット
			this._ftp = 0;
		
			//時間経過
			this._stdp.setNumber( this._txtArr[this._currentNumber] );
		
			this._currentNumber = this._currentNumber +1;
			if(this._currentNumber>3)this._currentNumber = 0;
		
		}
				
	}
});


//数字のボタン
var NumberButton = arc.Class.create(arc.display.DisplayObjectContainer, {
	initialize:function(){
		this._number = 'ぬ';
		this._status = false;
		
		//On表示
		this._bgOn = new arc.display.Shape();
		this._bgOn.beginFill(0x00ff00);
		this._bgOn.drawRect(0, 0, NumberButton.WIDTH, NumberButton.HEIGHT);
		this._bgOn.endFill();

		//Off表示
		this._bgOff = new arc.display.Shape();
		this._bgOff.beginFill(0xCCCCCC);
		this._bgOff.drawRect(0, 0, NumberButton.WIDTH, NumberButton.HEIGHT);
		this._bgOff.endFill();

		//数字表示テキスト
		this._numTxt = new arc.display.TextField();
		this._numTxt.setX(NumberButton.WIDTH / 2);
		this._numTxt.setY(NumberButton.HEIGHT / 2);
		this._numTxt.setAlign(arc.display.Align.CENTER);
		this._numTxt.setFont("Helvetica", 20, true);
		
		this.addChild(this._bgOn);
		this.addChild(this._bgOff);
		this.addChild(this._numTxt);

		this.activate(true);
	},

	setNumber:function(num){
		this._number = num;
		this._numTxt.setText(num);
	},
	
	getNumber:function(){
		return this._number;
	},
	
	setStatus:function(sta){
		this._status = sta;
	},
	
	getStatus:function(){
		return this._status;
	},

	activate: function(flg){
		
		if(flg){
		
			this._bgOn.setVisible(false);
			this._bgOff.setVisible(true);
		
		}else{
			this._bgOn.setVisible(true);
			this._bgOff.setVisible(false);
		}
		

	}
});


//スロット部分
var SlotDisplay = arc.Class.create(arc.display.DisplayObjectContainer, {
	initialize:function(){
		this._number = 'ぬ';
		
		//On表示
		this._bgOn = new arc.display.Shape();
		this._bgOn.beginFill(0x333333);
		this._bgOn.drawRect(0, 0, 290, 230);
		this._bgOn.endFill();
		
		//数字表示テキスト
		this._numTxt = new arc.display.TextField();
		this._numTxt.setX(140);
		this._numTxt.setY(130);
		this._numTxt.setAlign(arc.display.Align.CENTER);
		this._numTxt.setColor(0xFF0000);
		this._numTxt.setFont("Helvetica", 200, true);
		
		this.addChild(this._bgOn);
		this.addChild(this._numTxt);
	},

	setNumber:function(num){
		this._number = num;
		this._numTxt.setText(num);
	},
	
	getNumber:function(){
		return this._number;
	},

	activate: function(flg){
		this._bgOn.setVisible(flg);
	}
});

NumberButton.WIDTH = 68;
NumberButton.HEIGHT = 68;


//STARTボタン
var Cover = arc.Class.create(arc.display.DisplayObjectContainer, {
	initialize:function(){
		//黒背景
		this._bg = new arc.display.Shape();
		this._bg.beginFill(0xFF0000, 0.7);
		this._bg.drawRect(0, 0, system.getWidth(), system.getHeight());
		this._bg.endFill();

		//スタート表示のテキスト
		this._txt = new arc.display.TextField();
		this._txt.setAlign(arc.display.Align.CENTER);
		this._txt.setFont("Helvetica", 30, true);
		this._txt.setText("START");
		this._txt.setX(system.getWidth() / 2);
		this._txt.setY(system.getHeight() / 2);
		this._txt.setColor(0xffffff);

		this.addChild(this._bg);
		this.addChild(this._txt);
	}
});

//クリック数を表示
var ClickDisplay = arc.Class.create(arc.display.DisplayObjectContainer, {
	initialize:function(){
		this._number = 0;
		
		//On表示
		this._bgOn = new arc.display.Shape();
		this._bgOn.beginFill(0x000000);
		this._bgOn.drawRect(0, 0, 290, 74);
		this._bgOn.endFill();
		
		//数字表示テキスト
		this._numTxt = new arc.display.TextField();
		this._numTxt.setX(15);
		this._numTxt.setY(38);
		this._numTxt.setAlign(arc.display.Align.LEFT);
		this._numTxt.setColor(0xFFFFFF);
		this._numTxt.setFont("Helvetica", 24, true);
		this._numTxt.setText('クリック数：'+this._number);
		
		this.addChild(this._bgOn);
		this.addChild(this._numTxt);
	},

	resetNumber:function(){
		this._number = 0;
		this._numTxt.setText('クリック数：'+this._number);
	},

	setNumberUp:function(){
		this._number = this._number + 1;
		this._numTxt.setText('クリック数：'+this._number);
	},
	
	getNumber:function(){
		return this._number;
	},

	activate: function(flg){
		this._bgOn.setVisible(flg);
	}
});


window.addEventListener('DOMContentLoaded', function(e){
	system = new arc.System(320, 416, 'canvas');
	system.setGameClass(GameMain);
	system.start();
}, false);
})();