456主机测评
[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--;
- 海报
