JavaScript案例开发之扑克游戏
随着时代的发展，知识也在日益更新，但是基础知识永远不会过时，它是新时代的基石，更是我们进一步学习的保障，下面带着大家用JavaScript开发一款真正的扑克游戏，和大家一起分享，希望你们能够喜欢；闲话不多说，现在开始引入我们的问题：当我们与朋友玩扑克牌的时候，每次开始前都会洗牌，然后按每人一张牌来循环的发牌，自己拿到一张牌都会按照大小的顺序将牌插入到对应的位置。 接下来让我们通过JavaScript的知识来实现一个模拟打牌的程序。
大家可以看到这是一个扑克游戏的场景图，首先大家可以看到页面有五块区域分别代表玩家一，玩家二，玩家三，玩家四，牌堆和三个按钮创建，洗牌，发牌。
当我们点击创建，会在牌堆创建一副完整的扑克牌带有花色和牌值：
点击洗牌按钮执行洗牌操作，将牌组的顺序打乱展示出来。
点击发牌将牌按照顺序循环的发给每个人，每个人拿到一张牌都会按照大小的顺序将牌插入到对应的位置中。直到牌组发完，停止发牌。
发牌结束：
当然我们想要成功开发这款游戏，就要规范的按照软件工程的开发思想进行开发，首先我们要做的当然是需求分析，下面就由我带着大家分析一遍这款游戏的需求：
1）首先创建一副52张牌的牌组，实现在页面上以图形展示出纸牌
2）实现纸牌的洗牌功能
3）实现发牌功能， 玩家拿到一张牌按从小到大的顺序将牌插入到所应该在的位置
这款游戏大致就是这些主要需求，那么下面我们就来设计一下如何进行开发：
要实现这些需求，首先我们需要逻辑上建立一副扑克牌的数组存储52张牌，再在HTML页面上实现扑克牌的样式展示。然后我们需要对数组进行洗牌，就是对扑克牌数组进行随机排序。发牌将牌组从最上面的开始，循环的发给每个玩家，同时发出去的牌也要从扑克牌数组中删除，牌组没有牌的时候停止发牌。每个玩家也是一个数组，玩家拿到牌需要考虑下插入的位置，并插入形成新的顺序。
1）根据上面的功能，一开始我们预计定义五个数组：
var compeleteCards = new Array();
var player1 = new Array();
var player2 = new Array();
var player3 = new Array();
var player4 = new Array();
2）从功能上我们需要几个函数：
function CreatCompeleteCard() {}：创建一副扑克牌
function SortCards() {}：对扑克牌进行洗牌
function Show() {}：展示扑克牌
function DealCards () {}：发牌
function GetCards(CardObj) {}：玩家接受扑克牌CardObj插入自身的数组
function InCardsIndex(arr, obj) {}：考虑下插入的位置,arr参数是当前玩家的数组，obj是插入的扑克牌，函数返回这张扑克牌应该所处的位置
现在我们来看如何在逻辑上建立牌组模型，先观察每张牌都应该有两个属性牌值（number）和花色（type）
而一副牌有52张牌（除去大小王）。我们可以把一张扑克牌看为一个对象，而一副扑克牌就是拥有52个扑克牌对象的数组。
|
1
|
var compeleteCards = new Array(扑克牌1，扑克牌2，...); |
当然我们不可能一个一个的去创建52张牌对象，我们使用构造函数的方法，将牌抽象成一个类，通过实例化生成牌对象，最后通过循环的方法生成52个牌对象存入数组。
话不多说，我们上代码：
HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Card</title>
<style type="text/css">
div#player1, div#player3 {
margin: 0 auto;
width: 460px;
height: 70px;
}
div#player4, div#player2 {
margin: 0 auto;
width: 70px;
height: 460px;
margin-left: 100px;
float: left;
}
div#player2 {
margin-right: 100px;
float: right;
}
div#footer, div#compeleteCards {
clear: both;
text-align: center;
margin-top: 10px;
}
#create,#sort,#deal{
font-size:18px;
font-weight:500;
}
.center {
height: 460px;
}
.card {
width: 30px;
height: 60px;
border: solid 0.5px black;
margin-left: 3px;
float: left;
-webkit-user-select: none;
}
.number {
text-align: center;
font-size: 18px;
margin-top: 3px;
} </style>
</head>
<body>
<div id="container"> <div id="player1"> </div>
<div class="center">
<div id="player4"> </div> <div id="player2"> </div>
</div>
<div id="player3"> </div>
</div>
<div id="footer">
<input id="create" type="button" value="创建"/>
<input id="sort" type="button" value="洗牌"/>
<input id="deal" type="button" value= "发牌" />
</div>
<div id="compeleteCards"> </div>
</body>
<script type="text/javascript" src="js/poker.js"></script>
</html>
poker.js文件：
var compeleteCards = new Array();
var mytimer;
var cardSequence = 1;
var player1 = new Array();
//储存玩家一的手牌
var player2 = new Array();
//储存玩家二的手牌
var player3 = new Array();
//储存玩家三的手牌
var player4 = new Array();
//储存玩家四的手牌 function Cards(number,type){
var card = {
number: number,
type: type
}
return card;
} function CreatCompeleteCard() {
var arr = new Array();
for (var i = 3; i <= 15; i++) {
for (var j = 1; j <= 4; j++) {
var card = Cards(i, j);
arr.push(card);
}
}
return arr;
} function Show() {
function typeShow(type) {
var t;
switch(type) {
case 1:
t = "♠";
break;
case 2:
t = "♣";
break;
case 3:
t = "<font color='#FF0000'>♦</font>";
break;
case 4:
t = "<font color='#FF0000'>♥</font>";
break;
}
return t;
}; function numberShow(number) {
var n = number;
switch(number) {
case 11:
n = "J";
break;
case 12:
n = "Q";
break;
case 13:
n = "K";
break;
case 14:
n = "A";
break;
case 15:
n = "2";
break;
}
return n;
}; function arrayToShow(array, id) {
var html = "";
for (var i = 0; i < array.length; i++) {
html += "<div class='card'><b>" + typeShow(array[i].type) + "</b><div class='number'>" + numberShow(array[i].number) + "</div></div>";
}
document.getElementById(id).innerHTML = html;
};
arrayToShow(compeleteCards, "compeleteCards");
arrayToShow(player1, "player1");
arrayToShow(player2, "player2");
arrayToShow(player3, "player3");
arrayToShow(player4, "player4");
} function SortCards() {
if (compeleteCards.length == 52) {
compeleteCards.sort(function(a, b) {
return 0.5 - Math.random();
});
}
} function DealCards() {
if (compeleteCards.length == 52) {
mytimer = setInterval("GetCards(compeleteCards.shift())", 100);
}
} function GetCards(CardObj) {
switch(cardSequence) {
case 1:
var k = InCardsIndex(player1, CardObj);
player1.splice(k, 0, CardObj);
cardSequence = 2;
break;
case 2:
var k = InCardsIndex(player2, CardObj);
player2.splice(k, 0, CardObj);
cardSequence = 3;
break;
case 3:
var k = InCardsIndex(player3, CardObj);
player3.splice(k, 0, CardObj);
cardSequence = 4;
break;
case 4:
var k = InCardsIndex(player4, CardObj);
player4.splice(k, 0, CardObj);
cardSequence = 1;
break;
} if (compeleteCards.length == 0) {
window.clearTimeout(mytimer);
}
Show();
} //在此添加代码
function InCardsIndex(arr, obj) {
var len = arr.length;
if (len == 0) {
return 0;
} else if (len == 1) {
if (obj.number >= arr[0].number) {
return 1;
} else {
return 0;
}
} else {
var backi = -1;
for (var i = 0; i < len; i++) {
if (obj.number <= arr[i].number) {
backi = i;
break;
}
}
if (backi == -1) {
backi = len;
}
return backi;
}
}
document.getElementById("create").onclick = function() {
compeleteCards = CreatCompeleteCard();
Show();
};
document.getElementById("sort").onclick = function() {
SortCards();
Show();
};
document.getElementById("deal").onclick = function() {
DealCards();
};
以上就是我们的JavaScript案例开发之扑克游戏，欢迎大家来浏览指正！
JavaScript案例开发之扑克游戏的更多相关文章
- 使用Html5+C#+微信 开发移动端游戏详细教程 :（三）使用html5引擎搭建游戏框架
教程里的案例我们是通过H5游戏引擎开发,目前H5的游戏引擎比较好用的是白鹭,不过对于新手来说白鹭的开发环境和工具使用过于复杂,这里推荐一个国内大神编写的游戏引擎:lufylegend. 直接在页面引入 ...
- 斗牛app上架应用宝、牛牛手机游戏推广、百人牛牛app应用开发、棋牌游戏上传、手游APP优化
联系QQ:305-710439斗牛app上架应用宝.牛牛手机游戏推广.百人牛牛app应用开发.棋牌游戏上传.手游APP优化 iOS开发iPhone/iPad平台安卓手机软件开发机型覆盖范围 超过113 ...
- 【转】利用 three.js 开发微信小游戏的尝试
前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...
- 使用Laya引擎开发微信小游戏（上）
本文由云+社区发表 使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏. 作者:马晓东,腾讯前端高级工程师. 微信小游戏的推出也快一年时间了,在IEG的游戏运营活动中,也出现 ...
- ICML论文｜阿尔法狗CTO讲座： AI如何用新型强化学习玩转围棋扑克游戏
今年8月,Demis Hassabis等人工智能技术先驱们将来到雷锋网“人工智能与机器人创新大会”.在此,我们为大家分享David Silver的论文<不完美信息游戏中的深度强化学习自我对战&g ...
- 前端进阶必读：《JavaScript核心技术开发解密》核心提炼二
前言 最近读勒基本关于前端的数据<JavaScript核心技术开发解密>,<webpack从入门到进阶>...这几本书帮助到我更好的理解JS.webpack在前端技术领域中的作 ...
- Javascript模块化开发，使用模块化脚本加载工具RequireJS，提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- Javascript 模块化开发上线解决方案
最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...
- JavaScript模块化开发整理
在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...
随机推荐
- koa／redux middleware系统解析
middleware 对于现有的一些框架比如koa,express,redux,都需要对数据流进行一些处理,比如koa,express的请求数据处理,包括json.stringify,logger,或 ...
- 使用 Palette 让你的 UI 色彩与内容更贴合
版权声明: 本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有. 每周会统一更新到这里,如果喜欢,可关注公众号获取最新文章. 未经允许,不得转载. 一.前言 今天介绍一个 An ...
- 在htnl中，<input tyle = "text">除了text外还有几种种新增的表单元素
input标签新增属性 <input list='list_t' type="text" name='user' placeholder='请输入姓名' va ...
- 初学者入门web前端：C#基础知识：函数
入行前端对函数的掌握程度有可能直接影响以后工作的效率,使用函数可以高效的编写编码,节省时间,所以我整理了C#中最基础的函数知识点,虽然我在学习中 遇到很多问题,但是只要能够解决这些问题,都是好的. 一 ...
- poj 1149经典网络流构图
题意:m个猪圈,n个客户,每个客户给出选则猪圈的钥匙和需要购买猪的个数,其中每次客户购买时客户选则的猪圈数量可以相互更换,问最大购买数量. 思路:以客户作为除源点汇点之外的点,然后对于每个猪圈从源点连 ...
- OpenCppCoverage 的使用
OpenCppCoverage 的使用 OpenCppCoverage 是一款好用方便的 C++ 代码覆盖率检测工具,可以独立在命令行运行也可以作为 Visual Studio 13/15/17 的插 ...
- 201521123053 《Java程序设计》第5周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 答:我开始做笔记了,在本周学习中的一些笔记 * abstract关键字是为了实现 ...
- 201521123109《java程序设计》第四周学习总结
1. 本周学习总结 #1.1 尝试使用思维导图总结有关继承的知识点. #1.2 使用常规方法总结其他上课内容. - 了解了有关类的继承的知识 - 了解继承和多态的关系以及一些关键字内容 - 学习了O ...
- 201521123096《Java程序设计》第二周学习总结
1.本周学习总结 (1)学会使用码云管理代码: (2)了解数组和字符串的操作: (3)对完全限定类名有一定的认识. 2.书面作业 (1)使用Eclipse关联jdk源代码,并查看String对象的源代 ...
- 201521123029《Java程序设计》第1周学习总结
1. 本周学习总结 1.认识了Java的发展: 2.Java语言的特点,简单性和结构中立: 3.了解到了JDK.JRE,JVM: 4.学习Java数据类型分类,如整形,char型等. 2. 书面作业 ...