jQuery扑克牌读心术小游戏代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery扑克牌读心术小游戏代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<title>jQuery扑克牌读心术小游戏代码</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="true"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<link rel="stylesheet" type="text/css" href="css/xcConfirm.css"/>
<style>
#main{float:left;}
#container{height: 350px;}
.pokerlists {list-style:none;overflow:hidden;} 
.pokerlists li{float: left;margin: 5px 0px 5px 0px;text-align:center;}
.pokerlists li.img{width:14%;}
.lists {list-style:none;margin:0px;} 
.lists li{float: left;margin: 5px;}
.lists li.img{width:75px;}
.tips{font-size: 10px;width:98%;margin: 0 auto;padding: 10px 10px;text-align:center;}
.btn{width:98%;margin: 0 auto;padding: 10px 10px;text-align: center;}
</style>
</head>
<body>

<div id="main">
	<center><h1>扑克牌读心术</h1></center>
	<div id="container"></div>
	<div class="tips">
		游戏规则:从上面的牌库中随机记住一张牌(<font color="red">一定要心里记住,不要说出来，否则系统会听到哦</font>)，然后点击开始按钮开始游戏，
		从弹出来的牌判断您记住的牌是否在其中，在的话点击在按钮，不在点击不在按钮。
	</div>
	<div class="btn">
		<input type="button" value="重置" onClick="ser.reset()" />
		<input type="button" value="开始" onClick="ser.start()" />
	</div>
</div>

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/poker.js"></script>
<script src="js/service.js"></script>
<script src="js/xcConfirm.js"></script>
</body>
</html>

JS代码(poker.js):

/* * @auther jackielee * 花色0-黑桃 1-梅花 2-方块 3-红桃 4-大鬼 5-小鬼 * 数值0-13代表 鬼,1,2,3,4,5,6,7,8,9,10,J,Q,K;
	* This JS is written by jackielee. * If you have any questions,please email me. * E(1335244575@qq.com) */
var allCards = [];
	//总牌var radomCards = [];
	//随机牌存储数组var oneStack = [];
	//存储栈1var twoStack = [];
	//存储栈2var threeStack = [];
	//存储栈3var flag = 0;
	//状态标志 0=开始var xflag = 0;
	//第一步：写一个生产扑克牌对象的方法var Cards = (function (){
	var Card = function (number,type){
	this.number = number;
	this.type = type;
}
;
	return function (number,type){
	return new Card(number,type);
}
;
}
)();
	var poker ={
	"CreatCompeleteCard":function(){
	var index = 2;
	var arr = [];
	for (var i = 0;
	i <= 13;
	i++){
	if (i === 0){
	arr[0] = new Cards(i,4);
	arr[1] = new Cards(i,5);
}
else{
	for (var j = 0;
	j <= 3;
	j++){
	arr[index] = new Cards(i,j);
	index++;
}
}
}
allCards = this.SortCards(arr);
	this.Show();
}
,"SortCards":function(arr){
	arr.sort(function (a,b){
	return 0.5 - Math.random();
}
);
	return arr;
}
,"Show":function(){
	//该show方法是用来在页面展示当前牌的动向 var lenOld = allCards.length;
	var html = '<ul class="pokerlists">';
	//花色0-黑桃 1-梅花 2-方块 3-红桃 4-大鬼 5-小鬼 for (var i = 0;
	i < 21;
	i++){
	radomCards[i] = new Cards(allCards[i].number,allCards[i].type);
	html += '<li class="img"><img class="pk" src="./poker/' + this.typetonum(allCards[i].type) + '_' + allCards[i].number + '.png" /></li>';
}
html += '</ul>';
	oneStack = radomCards.slice(0,7);
	twoStack = radomCards.slice(7,14);
	threeStack = radomCards.slice(14,21);
	document.getElementById("container").innerHTML = html;
}
,"typetonum":function(type){
	switch (type){
	case 0:type = 's';
	break;
	case 1:type = 'c';
	break;
	case 2:type = 'd';
	break;
	case 3:type = 'h';
	break;
	case 4:type = '1';
	break;
	case 5:type = '0';
	break;
}
return type;
}
}
;
	poker.CreatCompeleteCard();

JS代码(service.js):

/* * This JS is written by jackielee. * If you have any questions,please email me. * E(1335244575@qq.com) */
var ser ={
	"reset":function(){
	flag = 0;
	xflag = 0;
	allCards = [];
	//总牌 radomCards = [];
	//随机牌存储数组 oneStack = [];
	//存储栈1 twoStack = [];
	//存储栈2 threeStack = [];
	//存储栈3 poker.CreatCompeleteCard();
}
,"start":function(){
	$(".pk").attr("src","./poker/bg_4.png");
	this.nodeal();
}
,"shuffle":function(){
	var one = 0,two = 0,three = 0;
	for(var i=20;
	i>=0;
	i--){
	if((i+1) % 3 == 1){
	oneStack[one++] = radomCards[i];
}
else if((i+1)%3 == 2){
	twoStack[two++] = radomCards[i];
}
else{
	threeStack[three++] = radomCards[i];
}
}
this.show();
}
,"deal":function(){
	if(flag === 1){
	var tmp = oneStack.concat(twoStack).slice(7);
	twoStack = twoStack.concat(oneStack).slice(7);
	oneStack = tmp;
}
else if(flag === 3){
	var tmp = threeStack.concat(twoStack).slice(7);
	twoStack = twoStack.concat(threeStack).slice(7);
	threeStack = tmp;
}
radomCards = oneStack.concat(twoStack,threeStack);
	xflag++;
	if(xflag >= 3){
	xflag = flag = 99;
	window.wxc.xcConfirm(this.loop(radomCards,0),window.wxc.xcConfirm.typeEnum.info);
	return;
}
this.shuffle();
}
,"nodeal":function(){
	var html = '';
	if(flag === 0){
	html = this.loop(oneStack,1);
	flag=1;
}
else if(flag === 1){
	html = this.loop(twoStack,1);
	flag=2;
}
else if(flag === 2){
	html = this.loop(threeStack,1);
	flag=3;
}
else{
	alert('别闹');
	return;
}
window.wxc.xcConfirm(html,window.wxc.xcConfirm.typeEnum.success);
}
,"show":function(){
	flag =1;
	window.wxc.xcConfirm(this.loop(oneStack,1),window.wxc.xcConfirm.typeEnum.success);
}
,"loop":function(stack,f){
	var len = stack.length;
	var html = '<ul class="lists">';
	if(f === 1){
	for(var i = 0;
	i < len;
	i++){
	html += '<li class="img"><img class="pk" src="./poker/' + poker.typetonum(stack[i].type) + '_' + stack[i].number + '.png" /></li>';
}
}
else{
	html += '<li class="img"><img class="pk" src="./poker/' + poker.typetonum(stack[Math.floor(len/2)].type) + '_' + stack[Math.floor(len/2)].number + '.png" /></li>';
}
html += '</ul>';
	return html;
}
}
;

JS代码(xcConfirm.js):

/* * 使用说明:* window.wxc.Pop(popHtml,[type],[options]) * popHtml:html字符串 * type:window.wxc.xcConfirm.typeEnum集合中的元素 * options:扩展对象 * 用法:* 1. window.wxc.xcConfirm("我是弹窗<span>lalala</span>");
	* 2. window.wxc.xcConfirm("成功","success");
	* 3. window.wxc.xcConfirm("请输入","input",{
	onOk:function(){
}
}
) * 4. window.wxc.xcConfirm("自定义",{
	title:"自定义"}
) */
(function ($){
	window.wxc = window.wxc ||{
}
;
	window.wxc.xcConfirm = function (popHtml,type,options){
	var btnType = window.wxc.xcConfirm.btnEnum;
	var eventType = window.wxc.xcConfirm.eventEnum;
	var popType ={
	success:{
	title:"您猜的牌是否在其中?",icon:"",btn:btnType.okcancel}
,info:{
	title:"系统读出您想的牌为：",icon:"",btn:btnType.ok}
}
;
	var itype = type ? type instanceof Object ? type:popType[type] ||{
}
:{
}
;
	//格式化输入的参数:弹窗类型 var config = $.extend(true,{
	//属性 title:"",//自定义的标题 icon:"",//图标 btn:btnType.ok,//按钮,默认单按钮 //事件 onOk:$.noop,//点击确定的按钮回调 onCancel:$.noop,//点击取消的按钮回调 onClose:$.noop//弹窗关闭的回调,返回触发事件}
,itype,options);
	var $txt = popHtml;
	//弹窗文本dom var $tt = $("<span>").addClass("tt").text(config.title);
	//标题 var $icon = "";
	var btn = config.btn;
	//按钮组生成参数 var popId = creatPopId();
	//弹窗索引 var $box = $("<div>").addClass("xcConfirm");
	//弹窗插件容器 var $layer = $("<div>").addClass("xc_layer");
	//遮罩层 var $popBox = $("<div>").addClass("popBox");
	//弹窗盒子 var $ttBox = $("<div>").addClass("ttBox");
	//弹窗顶部区域 var $txtBox = $("<div>").addClass("txtBox");
	//弹窗内容主体区 var $btnArea = $("<div>").addClass("btnArea");
	//按钮区域 var $ok = $("<a>").addClass("sgBtn").addClass("ok").text("在");
	//确定按钮 var $cancel = $("<a>").addClass("sgBtn").addClass("cancel").text("不在");
	//取消按钮 //var $close = $("<a>").addClass("sgBtn").addClass("ok").text("结束");
	//取消按钮 var $input = $("<input>").addClass("inputBox");
	//输入框 var $clsBtn = $("<a>").addClass("clsBtn");
	//关闭按钮 //建立按钮映射关系 var btns ={
	ok:$ok,cancel:$cancel,//close:$close}
;
	init();
	function init(){
	//处理特殊类型input if (popType["input"] === itype){
	$txt.append($input);
}
creatDom();
	bind();
}
function creatDom(){
	$popBox.append( $ttBox.append( $clsBtn ).append( $tt ) ).append( $txtBox.append($icon).append($txt) ).append( $btnArea.append(creatBtnGroup(btn)) );
	$box.attr("id",popId).append($layer).append($popBox);
	$("body").append($box);
}
function bind(){
	//点击确认按钮 $ok.click(doOk);
	//回车键触发确认按钮事件 $(window).bind("keydown",function (e){
	if (e.keyCode == 13){
	if ($("#" + popId).length == 1){
	doOk();
}
}
}
);
	//点击取消按钮 $cancel.click(doCancel);
	//点击关闭按钮 $clsBtn.click(doClose);
}
//确认按钮事件 function doOk(){
	ser.deal();
	var $o = $(this);
	var v = $.trim($input.val());
	if ($input.is(":visible")) config.onOk(v);
	else config.onOk();
	$("#" + popId).remove();
	config.onClose(eventType.ok);
}
//取消按钮事件 function doCancel(){
	ser.nodeal();
	var $o = $(this);
	config.onCancel();
	$("#" + popId).remove();
	config.onClose(eventType.cancel);
}
//关闭按钮事件 function doClose(){
	$("#" + popId).remove();
	config.onClose(eventType.close);
	$(window).unbind("keydown");
}
//生成按钮组 function creatBtnGroup(tp){
	var $bgp = $("<div>").addClass("btnGroup");
	$.each(btns,function (i,n){
	if (btnType[i] == (tp & btnType[i])){
	$bgp.append(n);
}
}
);
	return $bgp;
}
//重生popId,防止id重复 function creatPopId(){
	var i = "pop_" + (new Date()).getTime() + parseInt(Math.random() * 100000);
	//弹窗索引 if ($("#" + i).length > 0){
	return creatPopId();
}
else{
	return i;
}
}
}
;
	//按钮类型 window.wxc.xcConfirm.btnEnum ={
	ok:parseInt("0001",2),//确定按钮 cancel:parseInt("0010",2),//取消按钮 okcancel:parseInt("0011",2),//确定&&取消 close:parseInt("0001",2) //结束}
;
	//触发事件类型 window.wxc.xcConfirm.eventEnum ={
	ok:1,cancel:2,close:3}
;
	//弹窗类型 window.wxc.xcConfirm.typeEnum ={
	info:"info",success:"success"}
;
}
)(jQuery);

CSS代码(xcConfirm.css):

/*垂直居中*/
.verticalAlign{vertical-align:middle;display:inline-block;height:100%;margin-left:-1px;}
.xcConfirm .xc_layer{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#666666;opacity:0.5;z-index:2147000000;}
.xcConfirm .popBox{position:fixed;left:47%;top:47%;background-color:#ffffff;z-index:2147000001;width:646px;height:300px;margin-left:-285px;margin-top:-150px;border-radius:5px;font-weight:bold;color:#535e66;}
.xcConfirm .popBox .ttBox{height:30px;line-height:30px;padding:14px 30px;border-bottom:solid 1px #eef0f1;}
.xcConfirm .popBox .ttBox .tt{font-size:18px;display:block;float:left;height:30px;position:relative;}
.xcConfirm .popBox .ttBox .clsBtn{display:block;cursor:pointer;width:12px;height:12px;position:absolute;top:22px;right:30px;background:url(../img/icons.png) -48px -96px no-repeat;}
.xcConfirm .popBox .txtBox{margin:27px -16px;height:110px;overflow:hidden;}
.xcConfirm .popBox .txtBox .bigIcon{float:left;margin-right:20px;width:48px;height:48px;background-image:url(../img/icons.png);background-repeat:no-repeat;background-position:48px 0;}
.xcConfirm .popBox .txtBox p{height:84px;margin-top:16px;line-height:26px;overflow-x:hidden;overflow-y:auto;}
.xcConfirm .popBox .txtBox p input{width:364px;height:30px;border:solid 1px #eef0f1;font-size:18px;margin-top:6px;}
.xcConfirm .popBox .btnArea{border-top:solid 1px #eef0f1;}
.xcConfirm .popBox .btnGroup{float:right;}
.xcConfirm .popBox .btnGroup .sgBtn{margin-top:14px;margin-right:10px;}
.xcConfirm .popBox .sgBtn{display:block;cursor:pointer;float:left;width:95px;height:35px;line-height:35px;text-align:center;color:#FFFFFF;border-radius:5px;}
.xcConfirm .popBox .sgBtn.ok{background-color:#0095d9;color:#FFFFFF;}
.xcConfirm .popBox .sgBtn.cancel{background-color:#546a79;color:#FFFFFF;}

附件:下载该文件资源,减少时间成本(增值服务)