Javascript----实现21点游戏

Posted SunLike阿理旺旺

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript----实现21点游戏相关的知识,希望对你有一定的参考价值。

1、效果

洗牌:

 

要牌:

 

亮牌:

 

 

 

 

 

 

2、html代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>21点游戏</title>
    <link rel="stylesheet" type="text/css" href="css/21pointGame.less">
</head>
<body>
    <div class="container">
        <div class="header">
	        <div class="nav">
	            <h2>21点游戏</h2>
	        </div>
        </div>
        <div class="banker">
            <div class="banker-point point" id=\'banker-point\'>12</div>
            <div class="box" id=\'zhaungjia-box\'>
            </div>
            <div class="img">
            	<img src="/imgs/banker.png">
            </div>
        </div>
        <div class="player">
            <div class="player-point point" id=\'player-point\'>21</div>
            <div class="box" id=\'player-box\'>
            </div>
            <div class="img">
            	<img src="/imgs/player.png">
            </div>
        </div>
        <div class=\'option\'>
            <fieldset>
                <legend>玩家</legend>
                <a href="#" class=\'player-add\' id=\'player-add\'>要牌</a>
                <a href="#" class=\'player-show\' id=\'player-show\'>亮牌</a>
                <a href="#" class=\'refresh\' id=\'refresh\'>洗牌</a>
            </fieldset>
        </div>
        <div class="winner">
            <span>赢家:</span>
            <span class=\'winner-val\' id=\'winner-val\'></span>
        </div>
    </div>
    <script type="text/javascript" src = \'js/21pointGame.js\'></script>
</body>

</html>

  3、less代码

    .container {
        width: 1080px;
        height: 700px;
        box-shadow: 0 0 100px 10px gray;
        margin: 0 auto;
    }
    .header {
        width: 100%;
        height: 150px;
        line-height: 30px;
        text-align: right;
        background-image: url("/imgs/nav.jpg");
        background-size: 1080px 100%;

    }

    .header span {
        margin: 0 20px 0 0;
    }

    .nav {
        height: 150px;
        line-height: 150px;
        text-align: center;
        font-weight: bold;
        font-size: 40px;
    }
    .img{
        position: absolute;
        left: 0;
        height: 160px;
        width: 120px;
        overflow: hidden;
        img{
            height: 100%;
            width: 120px;

        }
    }
    
    .banker,
    .player {
        width: 100%;
        height: 200px;
        position: relative;
        margin: 0 20px 0 20px;
        top: 0;
        left: 0;
    }
    .box{
        position: absolute;
        top: 20px;
        left: 140px;
    }

    .point {
        height: 40px;
        line-height: 40px;
        width: 100px;
        text-align: center;
        font-size: 20px;
    }

    .puke-list1 {
        position: absolute;
        top: 40px;
        left: 0;
        width: 72px;
        height: 107px;
        overflow: hidden;
        box-shadow: 0 0 10px 3px gray;
        img {
            width: 72px;
            height: 107px;
        }
    }

    .puke-list2 {
        position: absolute;
        top: 40px;
        left: 0;
        width: 72px;
        height: 107px;
        overflow: hidden;
        box-shadow: 0 0 10px 1px gray;
        img {
            width: 72px;
            height: 107px;
        }
    }

    .option {}

    .winner-val {
        color: red;
        font-size: 30px;
    }

  4、js代码

var timeSpan = document.getElementById("time");
    var point1 = document.getElementById("banker-point");
    var point2 = document.getElementById("player-point");
    var box1 = document.getElementById("zhaungjia-box");
    var box2 = document.getElementById("player-box");
    var add = document.getElementById("player-add");
    var show = document.getElementById("player-show");
    var refresh = document.getElementById("refresh");
    var winnerVal = document.getElementById("winner-val");

    var left1 = 0;
    var left2 = 0;
    var left3 = 0;
    var bankerPoint = 0;
    var playerPoint = 0;
    var is_finish = false;
    var is_over = false;
    ////console.log(show);

    init();
    //初始化
    function init() {
        box1.innerHTML = "";
        box2.innerHTML = "";
        var pai1 = getPai();
        var n1 = pai1.number > 9 ? 10 : pai1.number;
        bankerPoint += n1;
        point1.innerText = "庄家:"+bankerPoint+"点";
        var obj = "<div class=\'puke-list1\' style = \'left: 0px\'>" +
            "<img src=\'static/imgs/" + pai1.url + ".jpg\'>" +
            "</div>";
        box1.innerHTML += obj;

        var pai2 = getPai();
        var n2 = pai2.number > 9 ? 10 : pai2.number;
        playerPoint += n2;
        point2.innerText = "玩家:"+playerPoint+"点";
        var obj = "<div class=\'puke-list1\' style = \'left: 0px\'>" +
            "<img src=\'static/imgs/" + pai2.url + ".jpg\'>" +
            "</div>";
        box2.innerHTML += obj;
        //console.log("洗牌:"+bankerPoint + "," + playerPoint);
    }


    //玩家要牌
    add.addEventListener("click", function() {
        if (!is_finish) {
            left2 += 40;
            var pai = getPai();
            var n = pai.number > 9 ? 10 : pai.number;
            playerPoint += n;
            point2.innerText = "玩家:"+playerPoint+"点";
            //console.log("玩家:"+bankerPoint + "," + playerPoint);
            var obj = "<div class=\'puke-list2\' style = \'left:" + left2 + "px\'>" +
                "<img src=\'static/imgs/" + pai.url + ".jpg\'>" +
                "</div>";
            box2.innerHTML += obj;
            if (playerPoint > 21) {
                winnerVal.innerText = "玩家已爆,庄家赢!";
                is_finish = true;
            }
        }
    })

     //亮牌
     var clock;
    show.addEventListener("click", function() {
         clock = setInterval(function() {
            if (bankerPoint <= 21 && bankerPoint < playerPoint) {
                var pai = getPai();
                var n = pai.number > 9 ? 10 : pai.number;
                bankerPoint += n;
                point1.innerText = "庄家:"+bankerPoint+"点";
               //console.log("庄家:"+bankerPoint + "," + playerPoint);
                left1 += 40;
                var obj = "<div class=\'puke-list1\' style = \'left:" + left1 + "px\'>" +
                    "<img src=\'static/imgs/" + pai.url + ".jpg\'>" +
                    "</div>";
                box1.innerHTML += obj;

                if (bankerPoint > 21) {
                    winnerVal.innerHTML = "庄家已爆,玩家赢!";
                    clearInterval(clock);
                      is_over  = true;
                }

            } else {
                if (bankerPoint > playerPoint) {
                    winnerVal.innerText = "庄家点数大,庄家赢!";
                } else if (bankerPoint == playerPoint) {
                    winnerVal.innerText = "点数相同,平局!";

                } else {
                    winnerVal.innerText = "玩家点数大,玩家赢!";
                }
            }

        }, 1000)
    })

    //洗牌
    refresh.addEventListener("click", function() {
        bankerPoint = 0;
        playerPoint = 0;
        init();
        is_finish = false;
        left1 = 0;
        left2 = 0;
        winnerVal.innerText = "";
         clearInterval(clock);
    })

    //获取随机牌
    function getPai() {
        var ran = parseInt(Math.random() * 51) + 1;
        //console.log("ran:" + ran);
        var imgUrl = "";
        var number;
        if (ran >= 1 && ran <= 52) {
            if (ran < 10) {
                imgUrl = "0" + ran;
            } else {
                imgUrl = ran;
            }
            if(ran>13){
               number = ran % 13;
               if(number == 0){
               	number = 13;
               }
            }
            else{
            	number = ran;
            }

        } else {
            return -1;
        }
        var pai = {
            "number": number,
            "url": imgUrl
        }
        return pai;
    }







    function getTime() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth();
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        var weekday = date.getDay();

        switch (weekday) {
            case "1":
                "星期一";
                break;
            case "2":
                "星期二";
                break;
            case "3":
                "星期三";
                break;
            case "4":
                "星期四";
                break;
            case "5":
                "星期五";
                break;
            case "6":
                "星期六";
                break;
            case "7":
                "星期日";
                break;
        }

        var s = year + "年" + month + "月" + day + "日 " + hour + ":" + minute + ":" + second;
        return s;
    }

  

 

 

 

 

  3、总结:

游戏规则还不能灵活设定

以上是关于Javascript----实现21点游戏的主要内容,如果未能解决你的问题,请参考以下文章

C# 之 扑克游戏 -- 21点规则介绍和代码实现

用python实现自动玩Npubits的21点游戏

21点游戏java实现

从片段调用 Google Play 游戏服务

html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

JavaScript - 代码片段,Snippets,Gist