Jq之21点游戏
最近在看Jq，里面有个21点的游戏挺不错的，也是需要一点时间去理解~分享一下
html结构
<!DOCTYPE html>
<html>
<head>
<title>Head First Black Jack</title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Click to reveal your cards</h1>
<h3 id="hdrTotal"></h3><h3 id="hdrResult"></h3>
<div id="my_hand">
</div>
<div id="result"><img src="images/check.png" id="imgResult"></div>
<div id="controls">
<div id="btnDeal">
<img src="images/deck_small.jpg">
</div>
<div id="btnHit">
<img src="images/deck_small.jpg">
</div>
<div id="btnStick">
<img src="images/stick_small.jpg">
</div>
<div id="btnRestart">
<img src="images/restart_small.jpg">
</div>
</div>
</div>
<script src="jquery-1.12.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
css样式省略
主要是js代码
步骤主要是：
1，建立一个储存牌的数组，
2，抽牌：一是要过滤抽过的牌，二是要计算点数
如果随机发牌重复就要重发，所以用inArray判断是否重复
用if else语句针对点数的不同情况做出处理。
$(function(){
// 创建一个可重用的对象
function card(name,suit,value){
this.name = name;
this.suit = suit;
this.value = value;
}
// 实例对象，A（1）代表11，2代表2...J，Q，K代表10
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('Four', 'Diamonds',4),
new card('Five', 'Diamonds',5),
new card('Six', 'Diamonds',6),
new card('Seven', 'Diamonds',7),
new card('Eight', 'Diamonds',8),
new card('Nine', 'Diamonds',9),
new card('Ten', 'Diamonds',10),
new card('Jack', 'Diamonds',10),
new card('Queen', 'Diamonds',10),
new card('King', 'Diamonds',10),
new card('Ace', 'Clubs',11),
new card('Two', 'Clubs',2),
new card('Three', 'Clubs',3),
new card('Four', 'Clubs',4),
new card('Five', 'Clubs',5),
new card('Six', 'Clubs',6),
new card('Seven', 'Clubs',7),
new card('Eight', 'Clubs',8),
new card('Nine', 'Clubs',9),
new card('Ten', 'Clubs',10),
new card('Jack', 'Clubs',10),
new card('Queen', 'Clubs',10),
new card('King', 'Clubs',10),
new card('Ace', 'Spades',11),
new card('Two', 'Spades',2),
new card('Three', 'Spades',3),
new card('Four', 'Spades',4),
new card('Five', 'Spades',5),
new card('Six', 'Spades',6),
new card('Seven', 'Spades',7),
new card('Eight', 'Spades',8),
new card('Nine', 'Spades',9),
new card('Ten', 'Spades',10),
new card('Jack', 'Spades',10),
new card('Queen', 'Spades',10),
new card('King', 'Spades',10)
];
var used_cards = new Array(); // 创建一个数组没来保存用过的扑克牌
var hand = { // 创建一个对象，这个对象相对应存放我们抽取的牌的属性
cards:new Array(),
current_total: 0,
sumCardTotal:function(){ // 计算点数
this.current_total = 0;
for(var i=0;i<this.cards.length;i++){
var c = this.cards[i];
this.current_total +=c.value;
}
$('#hdrTotal').html("Total:"+this.current_total);
if(this.current_total > 21){
$("#btnStick").trigger("click");
$("#imgResult").attr('src','images/x2.png');
$("#hdrResult").html("BUST!")
.attr('class', 'lose');
}else if(this.current_total == 21){
$("#btnStick").trigger("click");
$("#imgResult").attr('src','images/check.png');
$("#hdrResult").html("BlackJack!")
.attr('class', 'win');
}else if(this.current_total <= 21 && this.cards.length == 5){
$("#btnStick").trigger("click");
$("#imgResult").attr('src','images/check.png');
$("#hdrResult").html("BlackJack - 5 card trick!")
.attr('class', 'win');
}else{ }
}
}
function getRandom(num){
var my_num =Math.floor(Math.random()*num);
return my_num;
}
function deal(){ //第一次发牌为2张
for(var i=0;i<2;i++){
hit();
}
}
function hit(){
var good_card = false; // 先假设这张牌还没被找过
do{ // 先执行后判断
var index = getRandom(52);
if(!$.inArray(index,used_cards)>-1){ //如果这张牌之前没用过
good_card = true; //这张牌被用过了
var c = deck[index]; // 抽取这张随机数代表的牌
used_cards[used_cards.length] = index; // 将这张牌的索引增加到已经用过的牌当中
hand.cards[hand.cards.length] = c;
var $d = $("<div>"); // 增加一个div
$d.addClass('current_hand').appendTo('#my_hand'); // appendTo动态创建html标记
$("<img>").attr('alt', c.name + ' of ' + c.suit )
.attr('title', c.name + ' of ' + c.suit )
.attr('src', 'images/cards/' + c.suit + '/' + c.name + '.jpg' )
.appendTo($d)
.fadeOut('slow')
.fadeIn('slow');
}
}while(!good_card);
good_card = false;
hand.sumCardTotal();
}
$("#btnDeal").click( function(){
deal(); // 点击一次显示两张牌
$(this).toggle();
$("#btnHit").toggle();
$("#btnStick").toggle();
});
$("#btnHit").click( function(){
hit(); //再发一张牌
});
function end(){
$("#btnHit").toggle();
$("#btnStick").toggle();
$("#btnRestart").toggle();
}
$("#btnStick").click( function(){
$("#hdrResult").html('Stick!')
.attr('class', 'win');
$("#result").toggle();
end();
});
$("#btnRestart").click( function(){ // 将所有元素置为最初的样子
$("#result").toggle();
$(this).toggle();
$("#my_hand").empty();
$("#hdrResult").html('');
$("#imgResult").attr('src','images/check.png');
used_cards.length = 0;
hand.cards.length = 0;
hand.current_total = 0;
$("#btnDeal").toggle()
.trigger('click');
});
});
