java翻牌游戏_js实现翻牌小游戏

本文实例为大家分享了js实现翻牌小游戏的具体代码,供大家参考,具体内容如下

效果图

dcc3bf6001ccb3676d5a329058f4fcad.png

需求分析

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

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
记忆翻牌游戏是一种常见的益智游戏,玩家需要在有限时间内翻开所有的卡片并找到相同的卡片配对。以下是一个简单的记忆翻牌游戏Java实现: ``` import java.util.*; public class MemoryGame { public static void main(String[] args) { Scanner input = new Scanner(System.in); int size, numPairs, guess1, guess2, count = 0; boolean gameOver = false; System.out.print("Enter the size of the board (even number): "); size = input.nextInt(); numPairs = size*size/2; int[] board = new int[size*size]; for (int i = 0; i < numPairs; i++) { board[2*i] = i+1; board[2*i+1] = i+1; } shuffle(board); while (!gameOver) { drawBoard(board); System.out.print("Enter the first card to guess: "); guess1 = input.nextInt()-1; System.out.print("Enter the second card to guess: "); guess2 = input.nextInt()-1; if (board[guess1] == board[guess2]) { board[guess1] = 0; board[guess2] = 0; count += 2; } else { System.out.println("Not a match!"); } if (count == size*size) { gameOver = true; System.out.println("Congratulations, you won!"); } } } public static void shuffle(int[] arr) { Random rand = new Random(); for (int i = 0; i < arr.length; i++) { int j = rand.nextInt(arr.length); int temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } } public static void drawBoard(int[] arr) { for (int i = 0; i < arr.length; i++) { if (arr[i] == 0) { System.out.print("[ ]"); } else { System.out.print("["+arr[i]+"]"); } if ((i+1) % Math.sqrt(arr.length) == 0) { System.out.println(); } } } } ``` 该实现使用了一个一维数组来表示卡片,其中每个元素都是卡片上的数字,相同的数字表示一对卡片。`shuffle`方法用于随机打乱数组顺序,`drawBoard`方法用于绘制当前卡片状态的矩阵。在主函数中,程序通过不断读入用户猜测的卡片位置并与之前猜测的位置进行比较,如果两个位置的卡片数字相同则表示猜对了一对,并将这两张卡片从矩阵中删除。当所有卡片都被删除后,游戏结束。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值