html翻牌小游戏自定义,js 翻牌小游戏
需求分析生成两组顺序随机的1-8数据
卡片需要有翻转效果
两次翻转数据不相等,回复原状
两次翻转数据相等,卡片相等,不能再被点击
当所有卡片不能被点击游戏结束
限制最大点击次数50次
HTML结构
css布局perspective: 1000px; 透视深度,形成3d视角
transform: rotateY(180deg);旋转
backface-visibility: hidden; 元素背面不可见* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
.wrap {
perspective: 1000px;
width: 320px;
height: 320px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
text-align: center;
flex-wrap: wrap;
}
.wrap div {
/* box-shadow: 5px 5px 10px #000; */
transition: 1s;
position: relative;
text-align: center;
line-height: 60px;
height: 60px;
width: 60px;
border-radius: 10px;
margin: 10px 10px;
}
.wrap div .active1 {
transform: rotateY(180deg);
}
.wrap div .active2 {
transform: rotateY(360deg);
}
.wrap p {
border-radius: 10px;
background-color: blueviolet;
transition: 1s;
backface-visibility: hidden;
display: block;
height: 60px;
width: 60px;
position: absolute;
/* transform: rotateY(180deg); */
}
.wrap .bottom {
transform: rotateY(180deg);
}
h3{
text-align: center;
width: 200px;
height: 30px;
margin: 150px auto;
}
jsclass Game {
constructor(selector) {
this.init(selector);
}
init(selector) {
let arr = this.randomArr();
this.nodes = [...document.querySelectorAll(selector)];//获取每一个卡片
this.step = 50;//定义可以被点击的次数
this.tit = document.querySelector("h3");
this.nodes.forEach((item,index) => {//初始化卡片的值,并保存在num属性中
item.children[1].innerHTML = arr[index];
item.num = arr[index];
var that = this
item.onclick = function () {//给每一个卡片绑定事件
that.handle(this);
}
})
}
handle(ele) {
if(this.step === 0){
alert('游戏结束')
return
}
if(ele.active !== true){
this.step--;
this.tit.innerText = `剩余步数:${this.step}`
}
ele.children[0].classList.add('active1');//卡片翻转
ele.children[1].classList.add('active2');
let res = this.nodes.filter(item => item.children[0].classList.contains('active1')&& item.active !== true); //获取翻过来的且没有配对成功的卡片
if(res.length === 2 && res[0].num !== res[1].num){//如果有两张并且数值不相等,恢复原状
setTimeout(()=>{
res[0].children[0].classList.remove('active1');
res[0].children[1].classList.remove('active2');
res[1].children[0].classList.remove('active1');
res[1].children[1].classList.remove('active2');
},1000)//延迟一秒形成动画
}else if(res.length === 2 && res[0].num === res[1].num){//如果数值相等则配对成功
res[0].active = true;//锁定卡片
res[1].active = true;
}
}
randomArr() {
let arr = [];
for (let i = 0, n = 8; i < n; i++) {
do {
var item = randomInt(1, 8);
} while (arr.indexOf(item) !== -1)
arr.push(item);
}
arr.push(...arr);
return arr;
}
}
new Game('.wrap div')
function randomInt(min, max) {//产生[min,max]范围内的整数
return Math.round(Math.random() * (max - min)) + min
}
html翻牌小游戏自定义,js 翻牌小游戏相关推荐
- php 小程序自定义图,微信小程序之如何使用自定义组件封装原生 image 组件
零.问题的由来 一般在前端展示图片时都会碰到这两个常见的需求: 图片未加载完成时先展示占位图,等到图片加载完毕后再展示实际的图片. 假如图片链接有问题(比如 404),依然展示占位图.甚至你还可以增加 ...
- 创建 Input Search 对象自己设计答题小程序 微信小程序设置自己的答题操作讲解 我要出题app|我要出题小程序 自定义微信答题小程序的制作方法 微信答题小程序 答题小程序
您可以通过使用 document.createElement() 方法来创建 <search> 元素: var x = document.createElement("INPUT ...
- 纯js 消灭星星游戏,js 消灭星星游戏实现原理,有道具的消灭星星
消灭星星游戏的几个核心逻辑 用10*10的数组nums保存星星,1-5表示有星星,0表示已经消去 1.初始化,5种颜色的星星分配. 1-5 这个最容易,随机分配就好,产生1-100的随机数num,nu ...
- js网页小游戏老虎不吃素
下载地址 一款漂亮的网页小游戏,js网页小游戏老虎不吃素. dd:
- app vue 真机运行_uni-app黑魔法:小程序自定义组件运行到H5平台
引言 移动互联网的初期,囿于设备硬件性能限制,流量以原生App为主,iOS.Android是当时两大平台. 随着硬件及OS的更新换代,H5可承载的体验逐步完善,为提高开发效率.节约资源(复用代码)以及 ...
- 微信小程序--自定义组件(超详细 从新建到使用)
微信小程序–自定义组件 微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看 介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...
- 小程序组件onload_微信小程序自定义组件(一)
好吧,突然发现学不完了,一下子,那就分开吧,由于时间太久,直接重新大致复习了一下 微信小程序自定义组件 微信小程序支持自定义组件 下方的目录 其中,components为组件目录,nodemodule ...
- 萌新爬坑系列-百度小程序自定义组件
萌新爬坑系列-百度小程序自定义组件 百度小程序自定义组件的一个小问题 本人小萌新一个,毕业不久,入行前端也不久,摸索着写点东西,也当是自己爬坑的一个记录吧. 最近做了微信小程序,转百度小程序简直痛不欲 ...
- Unity转微信小游戏与JS交互
微信小游戏JS交互方式: 微信小游戏机制问题,在微信小游戏中不会加载index.html,所以写在index.html的函数均不会被调用到 1.自行创建calljs.js文件中添加定义,每次编译该文件 ...
最新文章
- 必须要懂得的密码技术
- 以网络安全为例的大数据可视化设计
- 安装64位Oracle 10g超详细教程
- Oracle分析函数——函数列表
- NullPointerException的处理新方式,Java14真的太香了
- 网络工程师常用英文单词和缩写翻译
- luogu P3178 [HAOI2015]树上操作
- Win1远程出现“这可能是由于credssp加密oracle修正”解决办法
- java查看当前活动的线程数量
- Ibatis ISqlMapper工厂类案例
- 从底层来看函数的调用和返回
- 虚拟服务器ftp文件权限修改,虚拟主机用户ftp和apache用户文件互操作权限解决方法...
- matlab遥感原理与应用,遥感原理与应用知识点概括考研.doc
- python暴力破解六位密码(数字和大小写字母)
- 24小时“凶宅试睡直播”去“凶”,阿里拍卖为卖凶宅有点拼
- 2020-11-30 DOA估计/方向谱分析 中文书单
- 大数据项目实战——基于某招聘网站进行数据采集及数据分析(五)
- ArcEngine中的ICommand和ITool(转载)
- C++ CEF3加载高清图片崩溃
- Android Studio显示“Hardcoded String XXX,should use @string resource”的解决方法2-1
热门文章
- [Zookeeper基础]-- linux下搭建zookeeper集群
- java 定时任务插件_详解Spring整合Quartz实现动态定时任务
- 安信Windows驱动开发教程:什么是通用 Windows 平台 (UWP) 应用程序?有什么功能?
- 移动互联网测试岗——招聘现状
- java inputstream md5_如何计算Inputstream的MD5
- java定时器(每天定时执行 每月某天执行)
- 大学英语六级相当于雅思考试多少分
- 惠普第一财季净利同比降59% 盘后大跌5.66%
- Mustache教程
- command line/shell/bash