html5扑克牌游戏源码,【web】纯JavaScript实现window经典纸牌游戏

[JavaScript] 纯文本查看 复制代码// 循环遍历将poker图片添加到数组中

var pokersList = [];

var flower = 0;

for (var i = 1; i <= 52; i++) {

var poker = new Image();

poker.src = "img/" + i + ".jpg"

poker.setAttribute("data-i",i-flower*13); //保存扑克的值

poker.setAttribute("data-flower",flower); //保存扑克的花色

pokersList.push(poker);

if(i%13==0){flower++}

}

console.log(pokersList);

//随机生成长度为52的数组 保存下标,0~51;

var pokerObjI = [];

for (var i = 0; pokerObjI.length < 52; i++) {

var num = Math.floor(Math.random() * 52);

var isRepeat = false;

for (var item of pokerObjI) {

if (item == num) {

isRepeat = true;

}

}

if (!isRepeat) {

pokerObjI.push(num);

}

}

// -----------------向所有牌堆中添加扑克-----------------

// 创建全局变量 pokerNum 来保存以添加过的最后一个下标

var pokerNum = 0;

// 获取牌堆对象

var allPoker = document.getElementById('allPoker').children[0];

// 向牌堆中插入24张扑克

for (var i = 0; i < 24; i++) {

allPoker.appendChild(pokersList[pokerObjI[i]]);

pokerNum++; //同时样poker的下标增加

}

// 向下方7个牌堆中分别保存 1,2,3,4,5,6,7张扑克(共28张)

// 获取7个牌堆对象

var sevenObj = document.getElementById('sevenPokers').children;

// console.log(sevenObj)

// 循环向牌堆中添加扑克

for (var i = 1; i <= 7; i++) {

for (var j = 1; j <= i; j++) {

sevenObj[i - 1].appendChild(pokersList[pokerObjI[pokerNum]]);

pokerNum++;

}

}

// ----------------为下方7个牌堆添加层叠样式-----------------

// 给除最后一张扑克外添加active样式

function addClass(){

for (var item of sevenObj) {

var items = item.children;

try{

for(var j of items){

var src = j.getAttribute("data-src");

if(src !==null){j.src = src;j.removeAttribute("data-src")};

}

}catch(e){

//TODO handle the exception

}

if (items.length > 1) {

for (var i = items.length - 2; i >= 0; i--) {

items[i].setAttribute("data-src", items[i].src);

items[i].src = "img/01.png";

}

}

}

}

// 判断7个牌堆中如果有最后一个扑克均为背面,则让最后一个变为正面,

// 如果最后一个为正面,则什么都不改变

function changeClass(){

for (var item of sevenObj){

var lastItem = item.children[item.children.length-1];

var penultimate = item.children[item.children.length-2];

if(item.children.length>0){

if(penultimate==undefined){

if(lastItem.dataset.src!=null){

console.log(lastItem);

console.log(lastItem.src);

console.log(lastItem.dataset.src);

lastItem.src = lastItem.dataset.src;

}

}else if(penultimate.src == lastItem.src){

// 如果倒数第二个扑克和倒数第一个扑克src相等,让最后一个变为正面

lastItem.src = lastItem.dataset.src;

}

}

}

}

// 给扑克添加上外边距 让他们分开

function addMarginTop() {

for (var item of sevenObj) {

var items = item.children;

for(var i of items){

i.removeAttribute("style");

}

if (items.length > 1) {

for (var i = 1; i < items.length; i++) {

items[i].style.marginTop = i * 30 + "px";

}

}

}

}

// 调用上方的函数

addClass();

addMarginTop();

// ----------在所有扑克分发结束后绑定事件----------

//为牌堆中poker绑定点击事件 [点击显示一张，全部显示完后再次点击让所有牌回到牌堆]

// 1.获取到所有牌堆中的扑克

var AllpokerObj = allPoker.getElementsByTagName('img');

// 2.获取牌堆展示的div

var AllpokerDiv = allPoker.nextElementSibling;

// 创建变量保存被拖动的扑克和展示区域当前已添加的扑克数

var thisPoker, pakerListNum;

// 创建变量保存当前被拖动扑克的花色和值

var thisI,thisFlower;

// 为牌堆添加点击事件

allPoker.onclick = function() {

// 将展示区域的所有扑克保存在list中

var pokerList = AllpokerDiv.getElementsByTagName('img');

// 创建变量保存展示区域扑克个数

pakerListNum = pokerList.length;

// console.log(pokerList);

if (AllpokerObj.length > 0) {

AllpokerDiv.appendChild(AllpokerObj[AllpokerObj.length - 1]); //将最后一张扑克(最上方的),移动到展示区域

if (AllpokerObj.length == 0) {

allPoker.classList.remove('active')

} //如果牌堆没有扑克了,去掉active样式(取消扑克背面样式)

} else {

allPoker.classList.add('active') //为牌堆添加active样式

for (var i = pakerListNum - 1; i >= 0; i--) {

allPoker.appendChild(pokerList[i]); //循环遍历将展示区域扑克添加到牌堆中

}

}

// console.log(pakerListNum);

// 为牌堆展示框中所有扑克绑定拖动事件 写在点击事件里,每次点击都更新

// 创建变量保存鼠标位置

var left, top;

for (item of pokerList) {

item.ondragstart = function(e) {

console.log("拖动开始")

thisPoker = this;

thisI = this.dataset.i;

thisFlower = this.dataset.flower;

//保存当前鼠标在扑克上的位置

left = e.clientX - this.offsetLeft;

top = e.clientY - this.offsetTop;

}

item.ondrag = function(e) {

// console.log("拖动ing~")

// 设置当前扑克的位置

//this.style.position = "fixed"

this.style.top = e.clientY - top + "px";

this.style.left = e.clientX - left + "px";

}

item.ondragend = function() {

console.log("拖动结束")

// 移除之前添加的样式

this.removeAttribute("style")

}

}

}

// 为7个牌堆的最后一个扑克添加拖动事件

function addDrag(){

for (var item of sevenObj) {

var list = item.children[item.children.length - 1];

var left,op,style;

if(list){

list.ondragstart = function(e) {

console.log("拖动开始")

thisPoker = this;

thisI = this.dataset.i;

thisFlower = this.dataset.flower;

//保存当前鼠标在扑克上的位置

}

list.ondrag = function(e) {

}

list.ondragend = function() {

console.log("拖动结束")

// 移除之前添加的样式

//this.removeAttribute("style");

//this.setAttribute("style",style);

}

}

}

}

addDrag();

// 为4个牌堆添加拖动释放事件

// 获取4个牌堆

var fourPokers = document.getElementById('fourPokers').children;

for (var item of fourPokers) {

item.ondragenter = function() {

console.log("拖动进入")

}

item.ondragover = function(e) {

e.preventDefault();

console.log("拖动悬停")

}

item.ondragleave = function() {

console.log("拖动离开")

}

item.ondrop = function() {

console.log(this.children.length)

// 当本牌堆里没有扑克时,只可放入A,即thisI为1的扑克

if(this.children.length==0){

// 判断当前拖动的扑克的值不等于1则停止运行 return

if(thisI != 1){

console.log("只可放入A");

return;

}

}else{ // 当牌堆中有扑克时,先判断当前拖动扑克的值和花色,如果与牌堆中的花色不同and值不大于最后一个扑克1时,停止运行

// 获取当前牌堆的data-i和data-flower

var itemI = parseInt(this.dataset.i);

var itemFlower = this.dataset.flower;

if(thisFlower != itemFlower || (thisI - itemI) != 1){

console.log("仅可放入同花色且值仅能比当前值大1")

return;

}

}

console.log("拖动释放")

console.log(thisPoker);

console.log(thisI);

console.log(thisFlower);

console.log(this);

this.appendChild(thisPoker);

this.setAttribute("data-i",thisI);

this.setAttribute("data-flower",thisFlower);

for(var i of this.children){

i.removeAttribute("style");

}

addDrag();

changeClass();

// pakerListNum--;

}

}

// 为下方7个牌堆添加拖动释放事件

for(var item of sevenObj){

item.ondragenter = function() {

console.log("拖动进入")

}

item.ondragover = function(e) {

e.preventDefault();

console.log("拖动悬停")

}

item.ondragleave = function() {

console.log("拖动离开")

}

item.ondrop = function() {

console.log(this.children.length)

if(this.children.length==0){

// 当本牌堆里没有扑克时,只可放入K,即thisI为13的扑克

// 判断当前拖动的扑克的值不等于1则停止运行 return

if(thisI != 13){

console.log("只可放入K");

return;

}

}else{

var thisItem = this.children[this.children.length-1];

var itemI = parseInt(thisItem.dataset.i);

var itemFlower = parseInt(thisItem.dataset.flower);

if(thisFlower%2 == itemFlower%2 || itemI - thisI !=1){

console.log("只能放置不同的花色，并且值执行相差1")

return;

}

}

console.log("拖动释放");

this.appendChild(thisPoker)

for(var i of this.children){

i.removeAttribute("style");

}

addDrag();

addMarginTop();

changeClass();

// pakerListNum--;

}

}