<!DOCTYPE html>
<html>
<head>
<title>jQuery蜘蛛纸牌电脑版游戏代码 - 源码之家</title>
<meta charset="utf-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="webkit" name="renderer" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="Title" name="apple-mobile-web-app-title" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="True" name="HandheldFriendly" />
<link rel="stylesheet" href="css/public.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="gameView" id="gameView">
<div class="gameBg"></div>
<div class="pokerBox" id="pokerBox"></div>
</div>
<script type="text/javascript">
$('#pokerBox').on('mousedown','img',function(event){
event.preventDefault();
})
var pickLeft = pickTop = 0;
var pickObj = null;
$('body').on('mousedown','#pokerBox .pokerLine .pokerLi',function(event){
var check = checkCanPickPoker(this);
if(check.state){
var e = event || window.event;
pickLeft = e.offsetX;
pickTop = e.offsetY;
pickObj = $(this);
var groupTop = Number($(this).attr('groupTop'));
var html = '';
$(this).closest('.pokerLine').find('.pokerLi').each(function(){
if($(this).attr('groupTop')>=groupTop){
html += $(this).prop('outerHTML');
$(this).attr('state','move');
}
});
var itLeft = e.clientX - pickLeft;
var itTop = e.clientY - pickTop;
$('#pokerBox .pokerMoveGroup').show().css({
top: itTop,
left: itLeft,
}).html(html);
}else{
gAlert({
txt: '该牌不允许被拖动',
});
}
}).on('mousemove',function(event){
if(pickObj){
var e = event || window.event;
var itLeft = e.clientX - pickLeft;
var itTop = e.clientY - pickTop;
$('#pokerBox .pokerMoveGroup').css({
top: itTop,
left: itLeft,
})
}
}).on('mouseup',function(event){
if(pickObj){
var endLeft = Number($('#pokerBox .pokerMoveGroup').css('left').replace('px',''))+50;
var leftKb = $('#gameView')[0].offsetLeft;
var range = 0;
if(endLeft<=leftKb+120+10){ // 处于第一列
range = 1;
}else if(endLeft>=leftKb+120*9+10){ // 处于最后一列
range = 10;
}else{
range = Math.ceil((endLeft-leftKb)/120);
}
var moveCard = pickObj;
var endCard = $('#pokerBox .pokerLine[group="'+range+'"] .pokerLi:last');
if(endCard.length>0){
var moveCardSplit = moveCard.attr('card').split('-');
var endCardSplit = endCard.attr('card').split('-');
// if(moveCardSplit[0]==endCardSplit[0]&&moveCardSplit[1]==endCardSplit[1]-1){
if(moveCardSplit[1]==endCardSplit[1]-1){
$('#pokerBox .pokerLine[group="'+range+'"]').append($('#pokerBox .pokerMoveGroup').html());
$('#pokerBox .pokerLine[group="'+range+'"] .pokerLi').attr({
grouptop: function(){ return $(this).index()+1 },
groupleft: range,
})
$('#pokerBox .pokerLine .pokerLi[state="move"]').remove();
}
}else{
$('#pokerBox .pokerLine[group="'+range+'"]').append($('#pokerBox .pokerMoveGroup').html());
$('#pokerBox .pokerLine[group="'+range+'"] .pokerLi').attr({
grouptop: 1,
groupleft: range,
})
$('#pokerBox .pokerLine .pokerLi[state="move"]').remove();
}
$('#pokerBox .pokerLine .pokerLi[state="move"]').removeAttr('state');
$('#pokerBox .pokerMoveGroup').hide().css({
top: 0,
left: 0,
}).empty();
pickLeft = pickTop = 0;
pickObj = null;
}
checkNoOpenPoker(); // 检测并翻开没有翻开的扑克
checkDonePoker(); // 检测是否可以直接收取正确排序的卡牌
})
$('#pokerBox').on('click','.pokerDeposit',function(){
keepSendPoker();
})
// 初始化页面布局
function initView(){
var html = html2 = '';
for(var i=1;i<=10;i++){
html += '<div class="pokerBr" style="left: '+(120*i-100)+'px" group="'+i+'"></div>';
html2 += '<div class="pokerLine" style="left: '+(120*i-100)+'px" group="'+i+'"></div>';
}
var html3 = '<div class="pokerDeposit"></div>'; // 牌堆
var html4 = '<div class="pokerMoveGroup"></div>'; // 移动牌组
var html5 = '<div class="pokerDoneGroup"></div>'; // 完成牌组
$('#pokerBox').html(html+html2+html3+html4+html5);
}
// 生成随机扑克牌数组
var pokerData = {
type: [ 'a', 'b', 'c', 'd' ], // [a 方片] [b 梅花] [c 黑桃] [d 红桃]
num: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 ],
};
var pokerAllCount = 0;
var pokerAllPet = [];
var pokerSendNum = 0;
var pokerDifficult = 1; // [1 简单（单色）] [2 中等（双色）] [3 困难（四色）]
function initRandomPoker(){
pokerAllCount = 0;
pokerAllPet = [];
pokerSendNum = 0;
for(var i=1;i<=pokerData.type.length;i++){
for(var t=1;t<=pokerData.num.length;t++){
var d = pokerData.type[i-1]+'-'+pokerData.num[t-1];
pokerAllPet.push(d,d);
}
}
// console.log(pokerAllPet);
pokerAllCount = pokerAllPet.length;
pokerAllPet = shuffle(pokerAllPet);
}
// 数组随机排序
function shuffle(arr){
var len = arr.length;
for(var i = 0; i < len - 1; i++){
var idx = Math.floor(Math.random() * (len - i));
var temp = arr[idx];
arr[idx] = arr[len - i - 1];
arr[len - i -1] = temp;
}
return arr;
}
// 生成扑克牌卡片
function initPokerCard(){
var html = '';
for(var i=1;i<=pokerAllCount;i++){
var sort = pokerAllCount-i+1;
var card = pokerAllPet[sort-1];
// if(sort == 34){
// card = 'a-3'
// }else if(sort == 44){
// card = 'a-2'
// }else if(sort == 54){
// card = 'a-1'
// }
html += '<div class="pokerLi" isOpen="no" sort="'+sort+'" card="'+card+'" style="left: '+(i*2-1)+'px;">'+
'<div class="img">'+
'<img src="img/'+card+'.png" name="face" />'+
'<img src="img/f-1.png" name="back" />'+
'</div>'+
'</div>';
}
$('#pokerBox .pokerDeposit').append(html);
}
// 首次发牌动画
function initFirstSendPoker(){
var pokerLineView = 54; // [ 6, 6, 6, 6, 5, 5, 5, 5, 5, 5 ]
var pokerLineStart = 1;
var pokerLineInset = null;
setTimeout(function(){
pokerLineInset = setInterval(function(){
var s = pokerLineStart;
if(s<=54){ // 执行首次发牌
var groupTop = Math.ceil(s/10);
var top = (groupTop-1)*30;
var groupLeft = (s-1)%10+1;
var left = (groupLeft-1)*120;
animateSendPoker(s,{
param: {
top: -612+top,
left: left,
// 'z-index': s,
},
group: {
groupTop: groupTop,
groupLeft: groupLeft,
},
});
pokerLineStart++;
pokerSendNum++;
}else{
clearInterval(pokerLineInset);
setTimeout(function(){
for(var i=pokerLineView-9;i<=pokerLineView;i++){ // 执行首次翻牌
// for(var i=pokerLineView-54;i<=pokerLineView;i++){ // 执行首次翻牌
animateOpenPoker(i);
}
},200)
}
},100)
},800)
}
// 继续发牌
function keepSendPoker(){
var canSend = true;
$('#pokerBox .pokerLine').each(function(){
if($(this).find('.pokerLi').length==0){
canSend = false;
}
})
if(canSend){
var lastAllNum = pokerSendNum;
var pokerLineStart = lastAllNum+1;
var pokerLineInset = null;
pokerLineInset = setInterval(function(){
var s = pokerLineStart;
if(s<=lastAllNum+10){ // 每轮发牌10张
var groupLeft = s-lastAllNum;
var left = (groupLeft-1)*120;
var groupTop = $('#pokerBox .pokerLine[group="'+groupLeft+'"] .pokerLi').length+1;
var top = (groupTop-1)*30;
animateSendPoker(s,{
param: {
top: -612+top,
left: left,
// 'z-index': s,
},
group: {
groupTop: groupTop,
groupLeft: groupLeft,
},
蜘蛛纸牌.rar （56个子文件） 
蜘蛛纸牌 js 
jquery.min.js 91KB img 
b-6.png 2KB c-10.png 2KB c-3.png 1KB c-13.png 5KB b-7.png 2KB a-9.png 2KB d-12.png 5KB a-11.png 4KB c-7.png 2KB d-5.png 1KB a-13.png 4KB c-8.png 2KB a-5.png 1KB c-4.png 1KB b-13.png 4KB b-2.png 1KB a-4.png 1KB d-8.png 2KB a-7.png 2KB c-11.png 4KB d-11.png 4KB a-2.png 1023B d-1.png 906B c-5.png 1KB a-8.png 2KB b-8.png 2KB a-1.png 812B d-13.png 5KB b-1.png 880B a-10.png 2KB c-6.png 2KB b-12.png 5KB d-10.png 2KB d-2.png 1018B d-9.png 2KB c-9.png 2KB a-3.png 1KB d-7.png 2KB c-2.png 1012B b-10.png 2KB b-3.png 1KB a-6.png 2KB b-9.png 2KB b-4.png 1KB d-6.png 2KB d-3.png 1KB f-1.png 8KB c-1.png 901B a-12.png 4KB d-4.png 1KB b-11.png 5KB c-12.png 5KB b-5.png 2KB css public.css 4KB
index.html 14KB资源评论
A路军
- 粉丝: 131
- 资源: 23
最新资源
- jython包构建burp python环境
- C# 获取公网IP实例源码
- 火焰报警实验通过火焰传感器实现报警功能
- 数字图像处理-基于python 期末考试复习总结
- 烟雾传感器检测实验掌握烟雾传感器的使用方法
- 智思Ai系统2.4.9版本去授权开源版可商用
- C# 简单计时器实例源码
- Matlab实现CPO-HKELM冠豪猪算法优化混合核极限学习机多变量回归预测（含完整的程序，GUI设计和代码详解）
- Matlab实现BO-CNN-LSTM-Mutilhead-Attention贝叶斯优化卷积神经网络-长短期记忆网络融合多头注意力机制多特征分类预测（含完整的程序，GUI设计和代码详解）
- Matlab实现OOA-HKELM鱼鹰算法优化混合核极限学习机多变量回归预测（含完整的程序，GUI设计和代码详解）
- Matlab实现BO-CNN-BiLSTM-Mutilhead-Attention贝叶斯优化卷积神经网络-双向长短期记忆网络融合多头注意力机制多特征分类预测（含完整的程序，GUI设计和代码详解）
- C#控制笔记本摄像头,实现拍照
- MATLAB实现GWO-Elman灰狼优化循环神经网络多输入多输出预测（含完整的程序，GUI设计和代码详解）
- 人生时间流逝器1.0.0
- Matlab实现CPO-BiTCN-BiGRU冠豪猪算法优化双向时间卷积门控循环单元多变量回归预测（含完整的程序，GUI设计和代码详解）
- Matlab实现BO-CNN-GRU-Mutilhead-Attention贝叶斯优化卷积神经网络-门控循环单元融合多头注意力机制多特征分类预测（含完整的程序，GUI设计和代码详解）
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
