基于JQ的记忆翻牌游戏
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>poker</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 450px;
list-style: none;
margin: 100px auto;
}
ul li {
position: relative;
width: 100px;
height: 120px;
line-height: 120px;
text-align: center;
font-size: 20px;
border: 1px solid #ccc;
cursor: pointer;
box-shadow:1px 1px 10px 1px #ccc;
background-color: #fff;
margin-bottom: 15px; transform-style: preserve-3d;
transition: all .8s;
}
.transfrom::after {
content: '';
position: absolute;
width:100px;
height:120px;
transform-origin:left ;
box-shadow:1px 1px 10px 1px #ccc; /*将after伪类折叠到box的背面，作为牌的反面*/
top:0;
left:100px;
transform:rotateY(180deg);
} .transfrom1::after {
background-color: #111;
}
.transfrom2::after {
background-color: #333;
}
.transfrom3::after {
background-color: #666;
}
.transfrom4::after {
background-color: #999;
} .translate {
transform:rotateY(180deg);
} .operate {
display: block;
margin: 20px auto 0;
}
</style>
</head>
<body>
<ul class="container"></ul> <button class="operate">开始</button> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function(){
/*
逻辑思路：
1、点击牌面 翻转牌面 并获取当前点击的牌面值 放入数组中
2、当数组长度等于2的时候需做判断 并且在判断完成前阻止继续点击
3、跟上一次的牌面值做对比 如果相同则对2张牌添加翻转的class 不同则错则对2张牌移除翻转的class
4、判断完成清空数组
*/ var pokerArr = [1, 2, 3, 4, 1, 2, 3, 4]; // 初始数据
var chooseArr = []; //点击的牌面值
var allowClick = false; //是否可以点击牌面
var score = 0; //得分 // 点击牌面
$(".container").on("click", "li", function(){
if(allowClick){
$(this).addClass("translate");
let currentValue = $(this).attr("data-value");
chooseArr.push(currentValue);
if(chooseArr.length == 2){
judge(chooseArr);
}
}
}) // 判断
function judge(chooseArr){
allowClick = false;
if(chooseArr[0] != chooseArr[1]){
setTimeout(() => {
$(".container li").each(function(){
if($(this).hasClass("translate") && ($(this).attr("data-value") == chooseArr[0] || $(this).attr("data-value") == chooseArr[1])){
$(this).removeClass("translate");
}
})
}, 800)
}else{
score++;
if(score == pokerArr.length / 2){
setTimeout(() => {
alert("恭喜!!!");
}, 500)
}
}
setTimeout(() => {
chooseArr.length = 0;
allowClick = true;
}, 800)
} // 打乱数组下标
function randArr(arr) {
var len = arr.length
//首先从最大的数开始遍历，之后递减
for(var i = arr.length - 1; i >= 0; i--) {
//随机索引值randomIndex是从0-arr.length中随机抽取的
var randomIndex = Math.floor(Math.random() * (i + 1));
//下面三句相当于把从数组中随机抽取到的值与当前遍历的值互换位置
var itemIndex = arr[randomIndex];
arr[randomIndex] = arr[i];
arr[i] = itemIndex;
}
//每一次的遍历都相当于把从数组中随机抽取（不重复）的一个元素放到数组的最后面（索引顺序为：len-1,len-2,len-3......0）
return arr;
} // 重组数据并渲染
function regroupArr(pokerArr){
let newPokerArr = [];
let randIndexArr = randArr([0, 1, 2, 3, 4, 5, 6, 7]);
let liHtml = "";
for(let i = 0; i < randIndexArr.length; i++){
newPokerArr.push(pokerArr[randIndexArr[i]]);
liHtml += `<li class="transfrom transfrom${newPokerArr[i]}" data-value="${newPokerArr[i]}"></li>`;
}
$(".container").html(liHtml);
}
regroupArr(pokerArr); // 开始
function start() {
allowClick = true;
} // 重置
function restart() {
allowClick = true;
score = 0;
regroupArr(pokerArr);
} // 操作
$(".operate").click(function(){
if($(this).text() == "开始"){
start();
$(this).text("重新开始");
}else{
restart();
}
})
})
</script>
</body>
</html>
基于JQ的记忆翻牌游戏的更多相关文章
- Android基于GridView实现的翻牌游戏效果
好久没有写博客了,上一篇博文距现在都有三个多月了,实在是惭愧.但是这段时间仍然是在忙于项目或是自我充电.这几天实现了一个基于GridView的翻牌动画效果,这里就将其整理出来同各位分享. 一.整体介绍 ...
- 123457123457#0#-----com.yuming.YiZhiFanPai01--前拼后广--益智早教游戏记忆翻牌cym
com.yuming.YiZhiFanPai01--前拼后广--益智早教游戏记忆翻牌cym
- js之翻牌游戏中的一个深刻感悟
先“上菜”: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现)
Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import m ...
- 基于jq图片居中插件 [center]
最近在做一个项目,大量的图片基于js进行缩放(图片放大镜),考虑用css要写许多hack,而已经基于jq了,干脆写个方法得了. 代码很简单,不用多讲但是很实用. $.fn.extend({ cente ...
- 基于jq插件开发及弹窗实例
基于jq的插件开发是什么鬼,$.fn是什么鬼,我在实际工作中也遇到过这个问题,下面就让我们一起来看一看这些都是什么鬼. 首先我们介绍$.fn. $.fn是指jquery的命名空间,加上fn上的方法及属 ...
- 使用Visual Studio Code调试基于ActionScript的LayaAir HTML5游戏
使用Visual Studio Code(VS Code)调试的优势 使用VS Code我们可以极大地提高LayaAir Html5游戏项目的调试效率,VS Code的优势有以下几点: 在发生Java ...
- 在基于TypeScript的LayaAir HTML5游戏开发中使用AMD
在基于TypeScript的LayaAir HTML5游戏开发中使用AMD AMD AMD是"Asynchronous Module Definition"的缩写,意思就是&quo ...
- 基于jq流畅度非常好的图片左右切换焦点图
今天给大家分享一款基于jq流畅度非常好的图片左右切换焦点图.这是一款基于jQuery实现的支持鼠标拖动切换jQuery特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
随机推荐
- 各种 Java Thread State 分析
转自:https://www.cnblogs.com/zhengyun_ustc/archive/2013/03/18/tda.html 1,线程状态为“waiting for monitor ent ...
- 什么是挂载（mount）？
官方文档是这么解释的: All files accessible in a Unix system are arranged in one big tree, the file hierarchy, ...
- windows服务器入门 php的安装
下载PHP安装包(下载地址: http://windows.php.net/download/ ),本文档以5.3版本为例,选择如下图对应的安装包: 下载完成后进行安装PHP,需要选择Web服务时,选 ...
- [转载]Oracle触发器用法实例详解
本文实例讲述了Oracle触发器用法.分享给大家供大家参考,具体如下: 一.触发器简介 触发器的定义就是说某个条件成立的时候,触发器里面所定义的语句就会被自动的执行. 因此触发器不需要人为的去调用,也 ...
- [转帖]从壹开始前后端分离【重要】║最全的部署方案 & 最丰富的错误分析
从壹开始前后端分离[重要]║最全的部署方案 & 最丰富的错误分析 https://www.cnblogs.com/laozhang-is-phi/p/beautifulPublish-most ...
- win10系统，jdk环境变量配置，编辑系统变量窗口显示旧版单行和新版列表问题
大家好,今天说一下我在配置jdk环境变量时遇到的编辑系统变量窗口显示问题. 首先我们说一下如何配置jdk环境变量. 右击此电脑,点击属性. 跳出如下窗口,点击高级系统设置. 跳出如下窗口,点击环境变量 ...
- Python_OpenCV视频截取并保存
在图像处理之前,我们需要对拿到手的数据进行筛选,对于视频,我们需要从中截取我们需要的一段或几段 整体思路比较简单,通过设定截取视频的起止时间(帧数),可以将该时间段内的图像保存为新的视频 直接上代码: ...
- 习题一初步理解时间复杂度大O表示法案例
1.如果 a+b+c=1000,且 a^2+b^2=c^2(a,b,c 为自然数),如何求出所有a.b.c可能的组合? 如上:a+b+c=1000, a平方+b平方=c平方 求出所有abc可能的组合 ...
- golang goroutine进行通信 channel
1.channel的读取与声明 //goroutine之间利用channel进行通信 package main import ( "fmt" "time" ) ...
- Mobile Phone Network CodeForces - 1023F (最小生成树)
大意: 无向图, 其中k条边是你的, 边权待定, m条边是你对手的, 边权已知. 求如何设置边权能使最小生成树中, 你的边全被选到, 且你的边的边权和最大. 若有多棵最小生成树优先取你的边. 先将$k ...