基于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 ...
随机推荐
- Redis HashMap 使用
散列类型相当于Java中的HashMap,他的值是一个字典,保存很多key,value对,每对key,value的值个键都是字符串类型,换句话说,散列类型不能嵌套其他数据类型.一个散列类型键最多可以包 ...
- web 中常用的两种上传文件的方法总结
这里我们来总结整理一下常用的两种文件上传方式以及要注意的东西: 1.springmvc .MultipartFile 的上传方式. 2.org.apache.commons.fileupload 使用 ...
- [转载]桥接与NAT
NAT相当于是局域网中的局域网,把192.168.21.1当作外网ip,重新划分了一个网关(192.168.33.x) 网桥只是把网络桥接起来,还是原来的网关(192.168.21.x),虚拟机相当于 ...
- socket通信时如何判断当前连接是否断开--select函数，心跳线程，QsocketNotifier监控socket
client与server建立socket连接之后,如果突然关闭server,此时,如果不在客户端close(socket_fd),会有不好的影响: QsocketNotifier监控socket的槽 ...
- ABP中的本地化处理（上）
今天这篇文章主要来总结一下ABP中的多语言是怎么实现的,在后面我们将结合ABP中的源码和相关的实例来一步步进行说明,在介绍这个之前我们先来看看ABP的官方文档,通过这个文档我们就知道怎样在我们的系统中 ...
- WebSocket 中的Netty
测试Channelhandler EmbeddedChannel提供了下面一些方法: writeInbound(Object...),写一个消息到入站通道 writeOutbound(Object ...
- 第3章：LeetCode--算法：strStr KMP算法
https://leetcode.com/problems/implement-strstr/ 28. Implement strStr() 暴力算法: int ViolentMatch(char* ...
- go struct 的方法1
方法 Go 没有类.然而,仍然可以在结构体类型上定义方法. 方法接收者 出现在 func 关键字和方法名之间的参数中. package main import ( "fmt" ...
- THUPC2019/CTS2019/APIO2019游记
Day -? 居然还能报上thupc,我在队里唯一的作用大约是cfrating稍微高点方便过审.另外两位是lz和xyy. Day -2 我夫人生日! Day -1 lz和xyy的家长都来了带我飞.住在 ...
- vs2019 扩展工具
这里只是做个记录,没啥技术含量 本人代码上有些强迫症,所以我的本地代码一定不可以丢,之前用vs2013开始,就安装了localhistory这个插件,十分方便,觉得不用了,清了即可,也不占地方. 但是 ...