背負い投げとENTER_FRAME

こういうポイントを振り分けるUIをどう実装するかちょっと悩んだ。

Total Point: 14

パラメータ1: 0 ( + – )
パラメータ2: 0 ( + – )
パラメータ3: 0 ( + – )

keisanというオブジェクトを作って各自に計算処理をさせるのはいいが、
共通のTotal Pointが破綻しないように条件分岐を書くとカオスになってしまう。

(function(){
	
	var AppView = Backbone.View.extend({
		el:$("body"),
		totalPoint:0,
		nowTotalPoint:0,
		events:{
			"click #sta-p": "staBtn",
			"click #sta-m": "staBtn",
			"click #atk-p": "staBtn",
			"click #atk-m": "staBtn",
			"click #def-p": "staBtn",
			"click #def-m": "staBtn"
		},
		initialize: function(){
			// 振り分けるポイント
			this.totalPoint = this.nowTotalPoint = 14;
			// 各パラメータの初期ポイントを引数に渡す
			this.pointObjSTA = new this.keisan('sta',100);
			this.pointObjATK = new this.keisan('atk',170);
			this.pointObjDEF = new this.keisan('def',110);

			$('#total').html(this.totalPoint);
		},
		// クリックしたときの処理、Rednerもここに
		staBtn: function(e){
			var btnName = $(e.target).attr('id');
			
			this.pointObjSTA.change(btnName,this.nowTotalPoint);
			this.pointObjATK.change(btnName,this.nowTotalPoint);
			this.pointObjDEF.change(btnName,this.nowTotalPoint);

			this.nowTotalPoint = this.totalPoint - this.pointObjSTA.getPlusPoint() - this.pointObjATK.getPlusPoint() - this.pointObjDEF.getPlusPoint();

			$('#total').html( this.nowTotalPoint );
		},
		keisan: function( myType , myValue ){
			var type = myType;
			var value = myValue;
			var plus = 0;

			function render(){
				$('#display-'+type).val(plus);
				$('#label-'+type).html(value);
			}

			render();

			return {
				change: function( btnName , nowTotalPoint ){
					if( btnName.indexOf(type) > -1 ){

						// nowTotalPoint: 現在の残ってるポイント
						// totalPoint: もともとのポイント。ポイントのマックスという意味でもある。
						// testTotal: ポイントの試算

						var dir = btnName.indexOf('-p') > -1 ? 1 : -1 ;
						
						var testPlus = plus + dir;
						var testTotal = nowTotalPoint - dir;

						console.log('dir       ',dir);
						console.log('testTotal',testTotal);

						var testFlg = false;

						//条件1
						if( dir == 1 && testTotal > -1 ){
							console.log('条件1');
							testFlg = true;
						}

						// 条件2
						if( dir == -1 && testPlus > -1 ){
							console.log('条件2');
							testFlg = true;
						}


						if( testFlg ){
							plus += dir;
							value += dir;
							render();
						}
					}
				},
				getPlusPoint: function(){
					// console.log(type+':'+plus);
					return plus;
				},
				render: render
			}
		}
	});

	var app = new AppView;
	
})();

サンプルページ

ポイントの変更があったら自動的に計算し直すという仕組みが必要だ。
カオスなので、次はBankboneのModelとEventで書きなおす。
オブザーバーパターンの偉大さがよく分かる。