【Golang语言社区】H5游戏开发--JavaScript学习:21点游戏

一、游戏规则

21点游戏的规则有很多种,我在写这个21点游戏的时候,选取了一种规则,描述如下:

1、游戏共有两名玩家,玩家1(庄家)和玩家2,在我编写的这个21点中,玩家1是电脑,玩家2是你,电脑坐庄。

2、一开始,给你和庄家各发两张牌,你可以看到你的两张牌,庄家的牌一张是明牌,一张是暗牌(暗牌是扣过来的牌,你不知道具体点数是多少)。

3、你和庄家的牌都是从一副牌里发出来的,共计52张(不要大小Joker)。

4、A可以当做1点和11点用,J、Q、K当做10点用,其他牌按面值计算点数。

5、发牌后,你可以选择要或不要牌,选择要牌后,如果你的点数大于21点,你就输了,否则你还可以选择要或不要牌,如果你选择不要牌,则轮到庄家要牌。

6、轮到庄家时,如果庄家的点数小于17点,则庄家必须要牌,当庄家点数大于或等于17时,庄家有权继续选择要或不要。如果庄家点数大于21点,则判定庄家输。

7、如果你和庄家都不要了,且双方都没有爆掉,则双方摊牌,计算双方点数,以点数大者胜,若双方点数一致则为平局。

二、目录结构

游戏的目录结构如下:

1、resource目录下,存储了游戏需要使用的图片。

2、bgm.ogg是游戏的背景音乐(我把QQ斗地主的背景音乐放进来了╮(╯▽╰)╭)

3、black_jack.html是一个网页,使用浏览器打开它就可以开始进行游戏了

4、black_jack.js存储了JavaScript代码

resource目录下的图片,包括纸牌图案、玩家头像等内容:

三、页面代码

black_jack.html页面代码如下:

<html>
    <head>
        <title>JS学习 - 21点 (black jack)</title>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
    </head>
    <style type="text/css">
        table th
        {            text-align: center;            text-decoration: none;            font-weight: normal;            padding: 3px 6px 3px 6px;            width:200px;
        }        table td
        {            vertical-align: center;            text-align: center;            padding: 3px 6px 3px 6px;            margin: 0px;
        }    </style> 
    <body>
    <table width="100%">
      <tr> 
        <td>
          <div align="left">
            21点游戏 (Black Jack)          </div>
        </td>
        <td>
          <div align="right">
            <audio width="300" height="10" controls autoplay="true" loop="true">
            <source src="bgm.ogg" type="video/ogg"/>
          </audio>
          </div> 
        </td>
      </tr>
    </table>
      <hr>
        <table id="tableboard">
      <tr>
        <td id="player1"><img src="resource\computer.png" /></td>
        <td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/>
      </tr>
      <tr>
        <td id="player2"><img src="resource\player.jpg" /></td>
        <td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/>
      </tr>
    </table>
    <hr>
    <table>
      <tr> 
        <td>
          <div id="score"></div>
        </td>
        <td>
          <div id="bulletin">请做出选择 (Please make a choice.)</div>
        </td>
      </tr>
    </table>
    <hr>
    <input type="button" id="hit" value="加一张牌 (HIT)" onclick="hit();" />
    <input type="button" id="stand" value="我不要了 (STAND)" onclick="stand();" />
    <!--<input type="button" id="restart" value="再玩一局 (FIGHT AGAIN)" onclick="location.reload();" />-->
    <input type="button" id="restart" value="再玩一局 (FIGHT AGAIN)" onclick="restart();" />
    <script src="black_jack.js"></script>
    </body></html>

black_jack.js页面代码如下:

//Firefox44.0,如果再来一局功能用location.reload()实现,则必须带上这两句话//document.getElementById("hit").disabled = false;//document.getElementById("stand").disabled = false;
var counter = 0; //发牌次数var winner = ""; //胜利者 player1 - 电脑/player2 - 玩家var hasStood = false; //标记玩家是否已经不要牌
//所有的牌var cards = ["club01", "club02", "club03", "club04", "club05", "club06", "club07", "club08", "club09", "club10", "club11", "club12", "club13", "diamond01", "diamond02", "diamond03", "diamond04", "diamond05", "diamond06", "diamond07","diamond08", "diamond09", "diamond10", "diamond11", "diamond12", "diamond13", "heart01", "heart02", "heart03", "heart04", "heart05", "heart06", "heart07", "heart08", "heart09", "heart10", "heart11", "heart12", "heart13", "spade01", "spade02", "spade03", "spade04", "spade05", "spade06", "spade07", "spade08", "spade09", "spade10", "spade11", "spade12", "spade13"];
//生成随机数var getRand = function (begin, end) {    return Math.floor(Math.random() * (end - begin)) + begin;}
//洗牌var rand, tmp;for (var i = 0; i < 1000; i++) {    rand = getRand(1, 52);    tmp = cards[0];    cards[0] = cards[rand];    cards[rand] = tmp;}
//玩家手牌var cards1 = [getNewCard(), getNewCard()];var cards2 = [getNewCard(), getNewCard()];
var table = document.getElementById("tableboard");table.rows[0].cells[1].innerHTML = "<img src=\"resource\\cardback.png\" />";table.rows[0].cells[2].innerHTML = "<img src=\"resource\\" + cards1[1] + ".jpg\" />";table.rows[1].cells[1].innerHTML = "<img src=\"resource\\" + cards2[0] + ".jpg\" />";table.rows[1].cells[2].innerHTML = "<img src=\"resource\\" + cards2[1] + ".jpg\" />";showScore();
//玩家再要一张牌function hit() {    getNewCard("player2");    if(checkIfBust("player2")) {        document.getElementById("bulletin").innerHTML = "你爆了 (You BUST!)";        document.getElementById("hit").disabled = true;        document.getElementById("stand").disabled = true;        winner = "player1";    }    showScore();}
//玩家选择不要了function stand() {    hasStood = true;    document.getElementById("hit").disabled = true;    document.getElementById("stand").disabled = true;    table.rows[0].cells[1].innerHTML = "<img src=\"resource\\" + cards1[0] + ".jpg\" />";    //电脑开始要牌    while (calcResult("player1") < 17) {        getNewCard("player1");        if(checkIfBust("player1")) {            document.getElementById("bulletin").innerHTML = "电脑爆了 (Computer BUST!)";            document.getElementById("hit").disabled = true;            document.getElementById("stand").disabled = true;            winner = "player2";        }    }    //如两名玩家都未爆掉,则以分数高者为胜    if (winner == "") {        var result1 = calcResult("player1");        var result2 = calcResult("player2");        if (result1 == result2) {            document.getElementById("bulletin").innerHTML = "平局 (PUSH!)";        } else if (result1 > result2) {            document.getElementById("bulletin").innerHTML = "你输了 (You LOSE)";        } else if (result1 < result2) {            document.getElementById("bulletin").innerHTML = "你赢了 (You WIN!)";        }    }    showScore();}
//获取一张新牌function getNewCard(player) {    var card = cards[counter++];    if (player == "player1") {        var len = cards1.length;        cards1[len] = card;        table.rows[0].cells[len + 1].innerHTML =             "<img src=\"resource\\" + cards1[len] + ".jpg\" />";    } else if (player == "player2") {        var len = cards2.length;        cards2[len] = card;        table.rows[1].cells[len + 1].innerHTML =             "<img src=\"resource\\" + cards2[len] + ".jpg\" />";    }    return card;}
//判断当前情况是否爆掉function checkIfBust(player) {    var result = 0;    if (player == "player1") {        for (var i = 0; i < cards1.length; i++) {            //parseInt一定要指定10进制,否则IE8下报错            var c = parseInt(cards1[i].substr(cards1[i].length - 2), "10");            if (c > 10) {                c = 10;            }            result += c;        }        if (result > 21) {            return true;        } else {            return false;        }    } else if (player == "player2") {        for (var i = 0; i < cards2.length; i++) {            var c = parseInt(cards2[i].substr(cards2[i].length - 2), "10");            if (c > 10) {                c = 10;            }            result += c;        }        if (result > 21) {            return true;        } else {            return false;        }    }}
//计算一名玩家的得分分数function calcResult(player) {    var result = 0;    var countOfA = 0;    if (player == "player1") {        for (var i = 0; i < cards1.length; i++) {            var c = parseInt(cards1[i].substr(cards1[i].length - 2), "10");            if (c > 10) {                c = 10;            } else if (c == 1) {                countOfA++;            }            result += c;        }        for (var i = 0; i < countOfA; i++) {            if (result + 10 <= 21) {                result += 10;            } else {                break;            }        }    } else {        for (var i = 0; i < cards2.length; i++) {            var c = parseInt(cards2[i].substr(cards2[i].length - 2), "10");            if (c > 10) {                c = 10;            } else if (c == 1) {                countOfA++;            }            result += c;        }        for (var i = 0; i < countOfA; i++) {            if (result + 10 <= 21) {                result += 10;            } else {                break;            }        }    }    return result;}
function showScore() {    var result1 = calcResult("player1");    var result2 = calcResult("player2");    document.getElementById("score").innerHTML =         "[Computer : You = " + (hasStood == true ? result1 : "?") + " : " + result2 + "]";}
function restart() {    document.getElementById("hit").disabled = false;    document.getElementById("stand").disabled = false;    counter = 0; //发牌次数    winner = ""; //胜利者 player1 - 电脑/player2 - 玩家    hasStood = false; //标记玩家是否已经不要牌    cards = [    "club01", "club02", "club03", "club04", "club05", "club06", "club07",     "club08", "club09", "club10", "club11", "club12", "club13", "diamond01",     "diamond02", "diamond03", "diamond04", "diamond05", "diamond06", "diamond07",    "diamond08", "diamond09", "diamond10", "diamond11", "diamond12", "diamond13",     "heart01", "heart02", "heart03", "heart04", "heart05", "heart06", "heart07",     "heart08", "heart09", "heart10", "heart11", "heart12", "heart13",     "spade01", "spade02", "spade03", "spade04", "spade05", "spade06", "spade07",     "spade08", "spade09", "spade10", "spade11", "spade12", "spade13"];    //洗牌    for (var i = 0; i < 1000; i++) {        rand = getRand(1, 52);        tmp = cards[0];        cards[0] = cards[rand];        cards[rand] = tmp;    }    //玩家手牌    cards1 = [getNewCard(), getNewCard()];    cards2 = [getNewCard(), getNewCard()];    table.rows[0].cells[1].innerHTML = "<img src=\"resource\\cardback.png\" />";    table.rows[0].cells[2].innerHTML = "<img src=\"resource\\" + cards1[1] + ".jpg\" />";    table.rows[1].cells[1].innerHTML = "<img src=\"resource\\" + cards2[0] + ".jpg\" />";    table.rows[1].cells[2].innerHTML = "<img src=\"resource\\" + cards2[1] + ".jpg\" />";    //清空牌桌    for (var i = 3; i < table.rows[0].cells.length; i++) {        table.rows[0].cells[i].innerHTML = "";        table.rows[1].cells[i].innerHTML = "";    }    showScore();    document.getElementById("bulletin").innerHTML = "请做出选择 (Please make a choice.)";}
/*

四、效果演示

使用Firefox浏览器(版本号44.0)打开black_jack.html后,效果如下图所示:

游戏代码可以从这个链接下载到:http://pan.baidu.com/s/1c1v2MQk

五、几点感受

1、我在IE8(版本8.0.7601.17514)、Chrome(版本46.0.2490.80 m)、Firefox(44.0)三个浏览器上测试了效果,除IE8中无法播放音乐外,其他功能都是正常的。

2、浏览器兼容性问题确实是个令人头疼的问题,就以parseInt函数来说,传入参数为"08"时,IE8返回0,Chrome和Firefox返回8。后来查了下才知道,原来IE8把字符串第一个字符为0的数字自动解析为八进制数了,需要在parseInt的第二个参数中强制指定使用十进制规则转换,才能让三个浏览器返回同样的结果。

3、说句题外话,这个游戏里,电脑赢的概率比你大,毕竟赌博游戏永远是庄家占便宜╭(╯^╰)╮。

END

原文发布于微信公众号 - Golang语言社区(Golangweb)

原文发表时间:2017-06-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏钱塘大数据

【干货】2017年值得关注的JavaScript框架与主题

导读:JavaScript的繁荣促生了很多优秀的技术、框架与工具库,这空前的繁荣也给很多人造成了困惑,无所适从。到底何者是值得投入,代表了未来的方向,而何者又是...

34960
来自专栏做全栈攻城狮

游戏开发7天快速入门-第2天GUI图形用户界面和游戏对象详解

本教程致力于程序员可以利用unity技术快速学习和入门游戏开发。一方面通过自己的总结希望可以帮助更多热衷与游戏开发或者编程技术开发的同仁。另一方面可以总结自己所...

8010
来自专栏web前端教室

有空看看jQuery源码吧,看不懂也会有收获

jQuery是一个对新人很亲切的JS库,它的源码风格都比较接近自然语言,可以一边对照手册,一边查看jQuery源码。第一次看必然很吃力,不过没关系,这就是学习的...

21460
来自专栏攻城狮的动态

iOS中,系统相册的那些事

30140
来自专栏BestSDK

和Emoji相关的那些开源项目

image.png Emoji 本名叫絵文字,词义来自日语えもじ,e-moji,moji在日语中的含义是字符。Emoji本是一套起源于日本的12x12像素表情...

26460
来自专栏Charlie's Road

UIKit Dynamics:开始入门 —《Graphics & Animation系列一》

翻译自raywenderlich网站iOS教程Graphics & Animation系列 介绍 UIKit Dynamics是一个集成到UIKit中的完整物理...

15930
来自专栏互联网杂技

设计师也能轻松掌握的前端小知识

阅读须知: 工具不重要,工具不重要,工具不重要……OK?有人说DW早就淘汰了,我造啊,然后呢?我还打算用小红本(editPlus)讲呢,哈哈哈哈…… 希望乃们接...

35680
来自专栏DeveWork

WordPress By Example:一个WordPress 主题搜索引擎

来,今天介绍个好东东,一个WordPress 主题搜索引擎。你只要在搜索框输入相关关键词,就可以获取相应的WordPress 主题。这些主题有收费与付费。就Je...

26570
来自专栏Material Design组件

Human Interface Guidelines — Interface Essentials

15970
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Trombone

课程内容 Ø Sound Manipulation Ø Sound Looping Ø SoundEffectInstance     相对于前一章的C...

18770

扫码关注云+社区

领取腾讯云代金券