基于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 ...
随机推荐
- hupu面试
1.mybatis更新一条数据时,如果某字段为空,则不更新它,使用默认值? <update id="updateProduct" parameterType="Pr ...
- 第一章：mysql的介绍与安装
什么是数据库管理系统 1)管理数据(增删改查) 2)存储数据 数据库管理系统的分类 1)关系型数据库(rdbms) 典型产品:mysql,oracle,mariadb,mssql(sqlserver) ...
- EventBus使用的坑
最近使用eventbus发送通知,在想该怎么携带List集合数据.于是尝试直接发送List. 使用一次,正常接收.使用两次,出现类转换异常.原来在接收List类型的消息时,并不会管List内的泛型,是 ...
- solr后台【web页面】增删改查
就是在下面这个页面操作 增加 {"id":"2", "name": "添加"} 查询 id:2 修改 {"id ...
- mysql5.6版本数据库向Mysql5.7版本的数据库更新数据
timestamp 类型不允许 timestamp NOT NULL DEFAULT '0000-00-00 00:00:00', 创建表的是后会报异常,解决方法是: 在my.cnf文件里面假如: s ...
- 【Linux内核】编译与配置内核(x86)
[Linux内核]编译与配置内核(x86) https://www.cnblogs.com/jamesharden/p/6414736.html
- redis 持久化 ——RDB
文章目录 RDB 关于 fork dump.rdb 文件 如何触发 RDB 快照 如何恢复 优势 劣势 停掉 RDB RDB redis database 的简写 : 在指定时间间隔后,将内存中的数据 ...
- Spring 后台方法 重定向 与 转发
一.重定向:重定向是客户端行为,在使用时,务必使用全路径,否则可能因为外部环境导致错误 1.URL改变为重定向的URL地址 2.前台页面不能使用Ajax请求提交, 应该使用form表单提交 方法一.参 ...
- axios全局配置及拦截器
axios使用说明文档 axios 全局配置: //axios-init.js import axios from 'axios': let loadingInstance; //创建Loading ...
- java实现当前时间往前推N小时
import java.text.SimpleDateFormat;import java.util.Calendar;import java.util.Date; /** * @author sha ...