原生JS实战：写了个斗牛游戏，分享给大家一起玩！

2023-04-07 05:13| 来源: 网络整理| 查看: 265

本文是苏福的原创文章，转载请注明出处：苏福CNblog：http://www.cnblogs.com/susufufu/p/5869953.html 该程序是本人的个人作品，写的不好，未经本人允许，请不要用于其它用途！

奋战一天一夜终于把斗牛游戏给写出来了（主要是除bug时间用的多！若大家发现新的bug欢迎留言）

这是游戏规则：百度牛牛规则

点击查看演示：

我是新手，代码写的有点乱，计算逻辑有点复杂，但最终还是实现了游戏效果！真的好开心，也深刻体会到一点就是，敲代码的时候注意力一定要十分集中，不然后期除bug真的很头痛！其实大部分bug都是一些小错误引起的！

作为新生之一，多写点代码，是最能提高自己的能力的！不管要写什么，写多大的程序，把想法、规则、流程先写出来，然后再敲代码，这样才不会乱！多写代码的最大好处就是可以熟练API的使用，本人还没学任何第三方类库呢，连JQ都没学过，到现在还一直撸原生，暂时是ES5，过段时间再练习ES6，据说，学好原生，再学别的都很容易上手，我一直很相信这句话，就是不知道靠不靠谱，求前辈们指点迷津！很烦恼的一个问题：选NG呢？还是react呢？

正题开始

HTML、CSS的代码都是用的比较基础的知识，大家应该都能看懂，就不多废话了；

JS代码部分：

根据游戏规则(这里我只写了支持4个玩家)，比较核心的有几个：创建一副扑克牌、创建玩家、计算出牛几

创建一副扑克牌，我定义了Game类，下面是代码+注释 //=================Game类 function Game() { this.systemCards = Game.createCards(); } //静态方法createCards创建一副牌并返回乱序后的牌 Game.createCards = function(){ var cards = [], cardType = [1, 2, 3, 4], //牌的花色，为了便于比较不同花色的大小，采用数值代替黑桃、红桃等文字 cardPoint = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]; //牌面值，J、Q、K分别为11，12，13，这里没有大小王 cardPoint.forEach(function (p) { //两个forEach循环为每个花色创建一组牌，共四组，合计52张牌 cardType.forEach(function (t) { var card = {}; card[t] = p; cards.push(card) }) }); return this.disorder(cards); }; //乱序方法，互相替换位置i的元素和随机位置的元素（中间变量temp保存值），这是很基础的用法，必须掌握 Game.disorder = function (cards){ var temp,len = cards.length; for(var i = 0; i < len; i++){ var r = getRandom(0,len); temp = cards[i]; cards[i] = cards[r]; cards[r] = temp; } return cards; }; 创建玩家类Player //=================Player类 var Player = function () { this.banker = false; //是否为庄家 this.money = 1000; }; //返回一副牌中的前5张牌，后期用于发牌给玩家 Player.prototype.getCards = function (g) { g.systemCards = g.systemCards.length < 20 ? Game.createCards() : g.systemCards;//牌不够发时重新拿一副牌，4个人*5=20 return g.systemCards.splice(0,5); }; 计算出牛几：这个问题我想了很久，感觉有点复杂，其实真正动手去写的时候感觉不是太难！（被这么点小学算法难倒了，还怎么在这个圈混啊！） //计算核心函数`sufuCaculate`，这里扩展了`Array`类，只是为了方便调用，前提是得取个个性一点的名字，不然哪一天官方也出个同名的内置方法，你的项目就悲催了！ Array.prototype.sufuCaculate = function () { if((!this)||this.length

【本文地址】

公司简介

联系我们