实例介绍
【实例简介】
【实例截图】
【核心代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin: 0;
padding: 0;
background: url(img/bg.png);
}
#main {
width: 100%;
height: 100%;
}
.nav {
width: 100%;
height: 200px;
display: flex;
justify-content: space-around;
align-items: center;
}
#allPoker,
#fourPokers {
display: flex;
justify-content: space-around;
align-items: center;
}
#fourPokers div,
#sevenPokers div,
#allPoker div {
width: 105px;
height: 150px;
margin: 0 20px;
box-sizing: border-box;
border: 2px solid rgba(255, 255, 255, 0.6);
border-radius: 5px;
cursor: pointer;
position: relative;
}
#fourPokers div img,
#sevenPokers div img,
#allPoker div img {
position: relative;
border-radius: 5px;
}
#allPoker div:nth-child(1).active:after {
content: "";
width: 105px;
height: 150px;
position: absolute;
left: 0;
top: 0;
background: url(img/01.png);
}
#sevenPokers {
display: flex;
justify-content: space-around;
align-items: center;
}
#fourPokers div img,
#sevenPokers div img,
#allPoker div img {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="main">
<!-- 顶部牌堆 -->
<div class="nav">
<!-- 左侧牌堆 -->
<div id="allPoker">
<div class="active"></div>
<div></div>
</div>
<!-- 右侧4个牌堆 -->
<div id="fourPokers">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- 底部 7个牌堆-->
<div id="sevenPokers">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script>
// 循环遍历将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--;
}
}
</script>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论