java翻牌游戏_js实现翻牌小游戏
本文实例为大家分享了js实现翻牌小游戏的具体代码,供大家参考,具体内容如下
效果图
需求分析
1、生成两组顺序随机的1-8数据
2、卡片需要有翻转效果
3、两次翻转数据不相等,回复原状
4、两次翻转数据相等,卡片相等,不能再被点击
5、当所有卡片不能被点击游戏结束
6、限制最大点击次数50次
HTML结构
css布局
实现卡片翻转效果需要3个关键属性
1.perspective: 1000px; 透视深度,形成3d视角
2.transform: rotateY(180deg);旋转
3.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;
}
js
class 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
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
java翻牌游戏_js实现翻牌小游戏相关推荐
- 使用java完成一个猜数字的小游戏(数据范围在1-100之间)
最近开始学java,使用java做一个猜数字的小游戏,代码不多,我就直接贴代码了 /** A:案例演示* 需求:猜数字小游戏(数据在1-100之间)*/import java.util.Scanner ...
- 用JAVA写一款自己的小游戏
用JAVA写一款自己的小游戏 我目前也处于一个学习的阶段,所以代码会有很多的错误,但是经过我几天的瞎调试目前还是可以玩的,但是可玩性还是很差 说一说怎么玩这个游戏把 设计初衷:KoalaChess,顾 ...
- Java实现的经典坦克大战小游戏
Java实现的经典坦克大战小游戏 先看一下游戏结构: 有点多,没有耐心的可以不用看,这里先给出链接吧! 云链接:经典坦克大战 提取码:s9ai 这里就不介绍功能了,贴了一张游戏运行的截图,具体的功能自 ...
- Java开发学习之如何编写小游戏
教大家如何用JAVA写一个简单的桌球小游戏,实现的效果是一个桌球能指定在球台内滚动,实现效果如下: 1.第一步创建窗口,引用两个包,后面要继承它的类 import java.awt.*; import ...
- java面向对象思想编写原谅帽小游戏 原谅帽游戏思路解析
java面向对象思想编写原谅帽小游戏 原谅帽游戏思路解析: 面向对象思想 作品展示 类(游戏端)继承Frame: 首先要创建一个方法去让游戏开始和结束 使用text执行这个游戏的方法(需要有游戏标题和 ...
- 计算机毕业设计-基于Java的GUI实现贪吃蛇小游戏
标题:基于Java多线程版本GUI贪吃蛇小游戏 1.项目技术点 1.多线程的运用. 2.JAVA的GUI的运用. 3.数据结构的灵活运用. 4.随机食物的生成. 5.关卡加速,随着蛇身增长,蛇的速度也 ...
- 腾讯云为小游戏开发者升级工具箱 小游戏联机对战引擎免费用
由微信小游戏举办的"微信小游戏创意大赛"正在火热进行中.12月23日,腾讯云宣布,除了给参赛者提供基础云资源,还将提供更多工具支持.开发者在通过初赛后,可免费使用腾讯云" ...
- 极光会客厅:大型H5游戏如何登陆微信小游戏及游戏性能优化分享
上周末,由极光网络主办的首期"极光会客厅"正式开门迎客.在本次的"2D小游戏开发实战技术沙龙"上,极光网络客户端主程陈策以及极光网络项目总监陈源向一众与会者分享 ...
- pygame小游戏——中国地图拼图小游戏
pygame小游戏--中国地图拼图小游戏 游戏简介 本游戏用python开发,可对中国各个省份进行拼图,设置三个模式,便于中小学生熟悉中国地图,省份及简称等.通过鼠标拖动省份到地图相应位置,寓教于乐. ...
- 帮你抢小游戏流量红利——快手小游戏入指南
帮你抢小游戏流量红利--快手小游戏入指南 一.接入游戏流程:申请开发者账号–申请接入游戏-完善游戏信息及上传证书-申请广告-调试项目-提交审核–上线 1.申请开发者账号资质 审核耗时半天 2.申请游戏 ...
最新文章
- java加快内存回收_java内存管理之垃圾回收及JVM调优
- retrofit 上传、下载文件
- AUTOSAR从入门到精通100讲(三十六)-AUTOSAR 通信服务两步走-CanSM概念-配置及代码分析
- linux mp4box安装,mp4box安装备忘
- (转)HapMap简介
- Linux 查询股价工具,find 查找工具
- Xcode设置编译链接-framework CoreFoundation
- 纯屏和液晶显示器有什么区别
- [走过的路]联想时光——人艰不拆(店长篇)
- 移动硬盘在电脑上显示为本地磁盘并且出现打不开的情况
- javamail模拟邮箱功能--邮件删除-中级实战篇【邮件标记方法】(javamail API电子邮件实例)
- android 获取 meid 代码,Android 各个版本获取IMEI、MEID
- moviepy截取视频片段的两种方法
- ubuntu16.04安装IDEA
- Linux ns 5. IPC Namespace 详解
- @Value(“${}“) 和 @Value(“#{}“) 的区别
- opencv读取图像的灰度值并显示出来
- Matlab 数字图像处理 频域滤波函数paddedsize
- 深圳MES系统在智能制造中的应用
- PYTHON判断素数优化函数以及素数为什么只用在开方里面找
热门文章
- 使用OpenAI的Whisper 模型进行语音识别
- 舍弗勒二合一电驱动桥在太仓投产;国轩高科与大众共建德国电池工厂;罗杰斯公司与孚能科技达成合作 | 能动...
- 昨天才提醒,今天就有网友点击QQ信息中的网址,中Worm Viking pk/Worm Win32 Viking jg了
- 海洋中的声速随温度、压强以及盐度变化关系Wilson公式
- 少儿编程:AI人工智能时代、每个孩子都应该学习编程的8个理由
- 计算机隐藏图标和通知,Win10怎么隐藏右下角图标?
- Windows10右下角通知中心没有反应
- 范数 --python
- java门禁系统面向对象程序设计
- 基于STM32设计的青少年学习监控系统(华为云IOT)