zoukankan      html  css  js  c++  java
  • 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');
    });
    });

  • 相关阅读:
    jQuery遍历div,判断是否为空,为空时执行某个操作
    ps中扩展画布的时候,不能选择扩展画布部分的颜色解决方法
    PS中缩放工具的细微缩放不可以使用的解决方法
    Excel的基础操作
    Word文档编辑
    人脸识别活体检测之张张嘴和眨眨眼——login.jsp
    人脸识别活体检测之张张嘴和眨眨眼——web.xml
    人脸识别活体检测之张张嘴和眨眨眼——readme
    maven用途、核心概念、用法、常用参数和命令、扩展
    [转载]ORACLE临时表的创建
  • 原文地址:https://www.cnblogs.com/Cchuying/p/5372992.html
Copyright © 2011-2022 走看看