Simple BlackJack

jQuery+CSS+HTML 공부.
'HeadFirst JQuery' 6장 jQuery와 자바스크립트 예제인 간단 블랙잭 게임 따라하기.

기능도 적고 손볼 곳도 많은 상태.

14/8/20 수

오늘의 jQuery 공부 -JavaScript 기능 활용하기.

* 객체 만들고 사용하기:
ex) var myCountry1 = {
    getCapital:function(){ //메소드
        alert(this.Capital) ;
    }
    name: 'Korea',
    capital: 'Seoul'
};
function myCountry2(a, b){
    this.name = a;
    this.capital = b;
}
myCountry1.getCapital(); //Seoul
var c2 = new myCountry2('China', 'Beijing');
alert(c2.name); //China
* 객체 생성자속 name: 'A'와 name = 'A'는 같은 결과.
* 접근은 점선택자를 이용해도 되지만 []를 이용한 키표기법으로 해도 된다.
c2.name과 c2['name']은 같다. 배열을 이용할 때는 후자를 선택하는게 간편할 경우가 있다.

* 배열 만들고 사용하기, 비우기:
var arr1 = new Array();
var arr2 = new Array('one', 'two', 3, 4);
var arr3 = ['four', 'three', 2, 'one'];
alert(arr2[0]); //one
alert(arr3[2]); //2
* 배열 비우기: arr2.length = 0;

* $.inArray(value, array) 메서드:value에 찾을 값, array에 확인할 배열을 넣으면 배열속에 특정 값이 있는 index 번호를 반환한다.
ex) var indexNum = $.inArray("three", arr3 ); //indexNum에 1이 담긴다.

* .appendTo() 메서드: .append()는 메서드를 호출하는 선택자가 메서드의 매개변수를 담는 컨테이너가 되지만 .appendTo() 메서드는 반대로 콘텐츠가 메서드를 호출하고 매개변수안으로 들어간다.
ex) $("<img src='넣을이미지.jpg'>").appendTo($('#imageOn')); 과
$('#imageOn').append("<img src='넣을이미지.jpg'>"); 은 같다.
appendTo()는 들어가는 콘텐츠를 변형시킨뒤 집어넣고자 할 때 유용하다.
$("<img>").appendTo($('#imageOn')).attr("src", "넣을이미지.jpg").fadeOut("fast").fadeIn("slow");

//jQuery 코드(간략화): 
function card(name,suit,value){ //카드 객체 생성자
	this.name = name;
	this.suit = suit;
	this.value = value;
}
var deck =[
	new card('Ace', 'Hearts', 11),
	new card('Two', 'Hearts', 2),
	new card('Three', 'Hearts', 3),
	new card('Four', 'Hearts', 4),
	new card('Five', 'Hearts', 5),
	new card('Six', 'Hearts', 6),
	new card('Seven', 'Hearts', 7),
	new card('Eight', 'Hearts', 8),
	new card('Nine', 'Hearts', 9),
	new card('Ten', 'Hearts', 10),
	new card('Jack', 'Hearts', 10),
	new card('Queen', 'Hearts', 10),
	new card('King', 'Hearts', 10),
	new card('Ace', 'Diamonds', 11),
	new card('Two', 'Diamonds', 2),
	new card('Three', 'Diamonds', 3),
	.....
	new card('Queen', 'Spades', 10),
	new card('King', 'Spades', 10),
];
var hand={ //일회용 hand 객체.
	cards: new Array(),
	currentTotal: 0,
	sumCardTotal: function(){
		this.currentTotal=0;
		for(var i=0; i<this.cards.length; i++){
			var c = this.cards[i];
			this.currentTotal += c.value;
		}
		$('#hdrTotal').html("Total: "+this.currentTotal);
		if(this.currentTotal > 21){
			end();
			$('#imgResult').attr('src', 'lose.png').show();
			// $("#btnHit, #btnStick").hide();
			// $("#btnRestart").show();
			$("#hdrResult").html("Bust!").attr('class', 'lose');
		}else if(this.currentTotal == 21){
			end();
			$('#imgResult').attr('src', 'win.png').show();
			// $("#btnHit, #btnStick").hide();
			// $("#btnRestart").show();
			$("#hdrResult").html("BlackJack!").attr('class', 'win');
		}else if(this.currentTotal <= 21 && this.cards.length == 5){
			end();
			$('#imgResult').attr('src', 'win.png').show();
			// $("#btnHit, #btnStick").hide();
			// $("#btnRestart").show();
			$("#hdrResult").html("5 Cards!").attr('class', 'win');
		}
	}
};
var usedCards=new Array();
function deal(){
	for(var i=0; i<2; i++){
		hit();
	}
}
function getRandom(num){
	var rNum = Math.floor(Math.random()*num);
	return rNum;
}
function hit(){
	var goodCard=false;
	do{
		var index = getRandom(52);
		var used = $.inArray(index, usedCards); 
		//새로 뽑은 카드가 기존에 뽑은 카드인지 확인용.
		if(used== -1){ //기존에 뽑은 카드가 아니면(-1이면)
			goodCard = true;
		}
		var c = deck[index];
		usedCards[usedCards.length] = index;
		var $d = $('<div>').addClass('card');
		$d.append(c.suit+"<br>"+c.name+" ").fadeOut("fast").fadeIn('slow');
		$d.appendTo($('#myHand'));
		hand.cards.push(c);
	}while(!goodCard);
	goodCard=false;
	hand.sumCardTotal();
}
$('#btnDeal').click(function(){
	deal();
	$(this).hide();
	$("#btnHit, #btnStick").show();
});
$('#btnHit').click(function(){
	hit();
});
$('#btnStick').click(function(){
	$('#hdrResult').html('Stick!');
	end();
});
$('#btnRestart').click(function(){
	$('#btnHit, #btnStick, #imgResult').hide();
	$('#result').toggle();
	$(this).toggle();
	$('#myHand').empty();
	$('#hdrResult').html('');
	usedCards.length = 0;
	hand.cards.length = 0;
	hand.currentTotal = 0;
	$('#btnDeal').show().trigger('click');
});
function end(){
	$('#btnHit, #btnStick, #imgResult').hide();
	$("#btnRestart").show();
}
$("#btnDeal").trigger('click');