基于JavaScript编写一个翻卡游戏_F11 - 专业站长和开发者的学习网站

分享到

基于JavaScript编写一个翻卡游戏

JavaScript 来源：互联网作者：佚名发布时间：2023-02-16 22:23:07 人浏览

摘要

前言首先将这个游戏需求拆分成三个部分：翻卡动画生成随机分布数组点击事件翻卡动画假如我们的盒子模型不是个二维的平面，而是有个三维的体积，让它可以有正反两面，那我

前言

首先将这个游戏需求拆分成三个部分：

翻卡动画
生成随机分布数组
点击事件

翻卡动画

假如我们的盒子模型不是个二维的平面，而是有个三维的体积，让它可以有正反两面，那我们在做的时候是不是只要将它真实的翻个面就可以了。让我们来想想将它变成三维的方法。之后发现了这个属性：

1	transform: translateZ(1px);

使用了它，就可以把盒子内部的元素与盒子的底部撑出个高度。

<div class="top">我是正面哦～</div>

</div>

只用给叫做“top”的子盒子一个“距离父亲的距离”，再将叫做“card”的父盒子预先翻转180度rotateY(180deg)，等到点击的时候给它翻回来transform: rotateY(0)就可以了。

.card{

...

height: 100%;

width: 100%;

position: relative;

transform-style: preserve-3d;

transform: rotateY(180deg);

transition: all 600ms;

background: pink;

&.select {

transform: rotateY(0);

}

.top{

...

height: 100%;

width: 100%;

position: absolute;

top: 0;

left: 0;

box-sizing: border-box;

background: white;

border: 2px solid #b6a6dc;

transform: translateZ(1px);

}

生成随机分布数组

我们先来说下在理想环境中，每个元素都能匀均出现（次数相等）的情况。再来说下不能均匀出现的情况下，怎样最大限度的均匀。

均匀元素下的随机算法

此算法脑内模型由西塔(θ)先生友情提供

假设我们一共需要20个元素，有5个不同类型的格子，正好每个格子出现4次。我们就有了一个待分配元素的集合W：

const total = 20

const icons = ['a', 'b', 'c', 'd', 'e']

// => 得到集合W

const W = ['a', 'a', 'a', 'a',

'b', 'b', 'b', 'b',

'c', 'c', 'c', 'c',

'd', 'd', 'd', 'd',

'e', 'e', 'e', 'e']

混淆集合

有个指针p从下标0开始，在长度为20的数组格子里面负责填图案，填图案的规律是从集合w中随机取一个元素，取完后删除该元素，p移动到下一个格子里，迭代至完成。

function createRandomList(W: string[], total: number) {

const list: any[] = []

function it(time: number): any {

if (time === 0) return list

// 随机每次集合元素下标

const randomNum = Math.floor(Math.random() * (W.length))

list.push(W[randomNum]) // 新数组中加入随机到的元素

W.splice(randomNum, 1) // 删除集合中的元素

return it(--time)

}

return it(total)

}

我们再让这个方法灵活一点，使它的返回结果能够随便指定格式：

// fn非必传项，默认返回原数据

function createRandomList(W: string[], total: number, fn: (<T>(icon: string, index?: number) => T) = icon => icon) {

const list: any[] = []

// 迭代器

function it(time: number): any {

if (time === 0) return list

// 随机每次集合元素下标

const randomNum = Math.floor(Math.random() * (W.length))

list.push(fn(W[randomNum], total-time)) // 将元素和下标传入fn中，将fn的计算结果加入到新数组中

W.splice(randomNum, 1) // 删除集合中的元素

return it(--time)

}

return it(total)

}

不均匀元素下的随机算法

1	const W = []

不均匀元素，其实就是集合W里的元素分布规则改变了，混淆算法仍然不受影响。之后，让我们来思考下怎么定义一个“不均匀中的最大程度均匀”的集合。将集合W分为两个部分: 最大可均匀分布部分 + 随机部分

最大可均匀分布的部分，它代表着icons中的每个元素都能出现相同的最多偶数次。可以这样得到它：

icons个数x2，得到完整一次配对需要多少格子
总格子数 / 一次完整格子数，得到可以完整配对的最大次数n
循环n次，每次循环往W里添加icons x 2

// 得到最大重复次数

const times = Math.floor(total / (icons.length * 2))

for (let index = 0; index < times; index++)

W.push(...icons, ...icons)

剩下的是需要随机分布的部分，它代表着，某几个元素可以在这里出现2次，剩下的则不会出现。

总格子数 % icons个数x2, 得到剩下未分配的格子
未分配格子 / 2，就是需要随机从icons中取出的元素个数n，这个n一定小于icons的个数
从icons中随机取n个数，可以采用每取一个数，将该数从原集合删除，重复n次的方法
将得到的n个数x2，往W里添加

第（3）条是不是听起来很耳熟，好像前面做过，没错就是前面写的createRandomList函数，W集合变成了icons，total变成了需要的个数n。

// 剩下未分配的格子个数

const lastCount = total % (icons.length * 2)

// 从icons中随机获取n个数

const lastList = createRandomList(icons, lastCount / 2)

W.push(...lastList, ...lastList)

合在一起就是就是创建W的方法：

function createW(icons: string[], total: number) {

const times = Math.floor(total / (icons.length * 2))

const lastCount = total % (icons.length * 2)

const W = []

for (let index = 0; index < times; index++)

W.push(...icons, ...icons)

const lastList = createRandomList(icons, lastCount / 2)

W.push(...lastList, ...lastList)

return W

}

生成最终数组

完整的生成随机数组代码：

function createW(icons: string[], total: number) {

const times = Math.floor(total / (icons.length * 2))

const lastCount = total % (icons.length * 2)

const W = []

for (let index = 0; index < times; index++)

W.push(...icons, ...icons)

const lastList = createRandomList(icons, lastCount / 2)

W.push(...lastList, ...lastList)

return W

}

function createRandomList(W: string[], total: number, fn: (<T>(icon: string, index?: number) => T) = icon => icon) {

const list: any[] = []

function it(time: number): any {

if (time === 0) return list

const randomNum = Math.floor(Math.random() * (W.length))

list.push(fn(W[randomNum], total-time))

W.splice(randomNum, 1)

return it(--time)

}

return it(total)

}

// ['a', 'b', 'c', "d"] => ['c', 'd'...x15...'b', 'c', 'a']

createRandomList(createW(icons, total), total)

点击事件

乱序的随机数组有了，点一点还不简单吗！先让生成的数组属性更丰富一些，来帮助我们展示内容。

type CardItem = { icon: string; isDel: boolean; isSelect: boolean, index: number }

let list: CardItem[] = []

// isSelect属性判断是否翻转，isDel属性判断是否已经消除，icon属性标注元素属性，index用来快速找到点击元素位于数组中的位置

list = createRandomList(createW(icons, total), total, (icon: string, index) => ({ icon, isDel: false, isSelect: false, index }))

这下可以用生成的数组去展示了。接下来我们写个点击事件，接收参数是点击的数组元素：

// isLock用来锁定动画完成前不能进行别的操作

function handlerTap(card: CardItem) {

if (isLock) return

list[card.index].isSelect = true

const selectors = list.filter(item => item.isSelect && !item.isDel)

// 假如选择元素<2，直接返回，不走之后流程

if (selectors.length <= 1) return

isLock = true

const [item1, item2] = selectors

// 翻转动画完成后进行操作

setTimeout(() => {

// 如果选择的元素相同，则消除属性等于true

if (item1.icon === item2.icon) {

list[item1.index].isDel = true

list[item2.index].isDel = true

}

//将所有卡牌翻转过背面

list = list.map(item => ({...item, isSelect: false}))

isLock = false

// 判断是否所有卡牌都已经翻转完成

if (list.every(item => item.isDel)) console.log( "your win!")

}, 800)

}

完整代码

100行整）。

100

type CardItem = { icon: string; isDel: boolean; isSelect: boolean, index: number }

const icons = ['a', 'b', 'c', "d"]

const total = 20

let list: CardItem[] = []

let isLock = false

function handlerTap(card: CardItem) {

if (isLock) return

list[card.index].isSelect = true

const selectors = list.filter(item => item.isSelect && !item.isDel)

if (selectors.length <= 1) return

isLock = true

const [item1, item2] = selectors

setTimeout(() => {

if (item1.icon === item2.icon) {

list[item1.index].isDel = true

list[item2.index].isDel = true

}

list = list.map(item => ({...item, isSelect: false}))

isLock = false

if (list.every(item => item.isDel)) console.log( "your win!")

}, 800)

}

function createW(icons: string[], total: number) {

const times = Math.floor(total / (icons.length * 2))

const lastCount = total % (icons.length * 2)

const W = []

for (let index = 0; index < times; index++)

W.push(...icons, ...icons)

const lastList = createRandomList(icons, lastCount / 2)

W.push(...lastList, ...lastList)

return W

}

function createRandomList(W: string[], total: number, fn: (<T>(icon: string, index?: number) => T) = icon => icon) {

const list: any[] = []

function it(time: number): any {

if (time === 0) return list

const randomNum = Math.floor(Math.random() * (W.length))

list.push(fn(W[randomNum], total-time))

W.splice(randomNum, 1)

return it(--time)

}

return it(total)

}

list = createRandomList(createW(icons, total),

total,

(icon: string, index) => ({ icon, isDel: false, isSelect: false, index }))

</script>

{#each list as item}

{#if !item.isDel}

<div class="card {item.isSelect && 'select'}" on:click="{() => handlerTap(item)}">

</div>

{/if}

</div>

{/each}

</div>

.game-box{

margin: 10px auto 0;

width: 90vw;

height: 80vh;

display: grid;

grid-template-columns: repeat(4, calc(100% / 4 - 3px));

grid-template-rows: repeat(5, calc(100% / 5 - 3px));

grid-row-gap:3px;

grid-column-gap: 3px;

.card{

height: 100%;

width: 100%;

box-sizing: border-box;

position: relative;

transform-style: preserve-3d;

transform: rotateY(180deg);

transition: all 600ms;

background: pink;

&.select {

transform: rotateY(0);

}

.top{

height: 100%;

width: 100%;

position: absolute;

top: 0;

left: 0;

box-sizing: border-box;

display: flex;

justify-content: center;

align-items: center;

background: white;

border: 2px solid #b6a6dc;

transform: translateZ(1px);

}

</style>

您可能感兴趣的文章 :

原文链接 : https://juejin.cn/post/7200184156176580667

Tag : JavaScript(107)

electron创建新窗口模态框并实现主进程传值给子进

我们在开发的过程中难免会遇到需要创建一个子窗口（子进程），但是在这个子进程中所有值都是初始化的，而我们肯定是需要一些值才能
基于JavaScript编写一个翻卡游戏

前言首先将这个游戏需求拆分成三个部分：翻卡动画生成随机分布数组点击事件翻卡动画假如我们的盒子模型不是个二维的平面，而是
react中定义变量并使用方式的介绍

react定义变量并使用这里面涉及到了 1、变量如何定义 2、变量如何进行改变 3、方法如何调用都写有详细的注释大家可详细观看适合刚学习
Three.js Interpolant实现动画插值的介绍

这个类主要是用来实现插值，常用于动画。可以把这个类理解为是一个数学函数，给定一个自变量，要返回对应的函数值。只是，在我们定
HTML页面中使用Vue示例进阶（快速学会上手Vue）

Vue是用于构建用户界面的渐进式JavaScript框架。特色：构建用户界面数据变成界面；渐进式Vue可以自底向上逐层的应用。 Vue有两种使用方式，
umi插件开发仿dumi项目自动生成导航栏实现

前面我们已经完成了页面布局和页面路由，现在我们的导航栏还是自己写死在代码中，现在我们来改造成自动根据页面路由来生成导航栏。
umi插件开发仿dumi项目实现页面布局

上一章我们已经完成/docs目录下文件自动生路由功能，本章我们将在此基础上，实现自动生成页面导航的功能。使用默认模板提供的layout展
umi插件开发仿dumi项目实现基础路由解析

umi默认约定在/src/pages添加的(j|t)sx?文件会自动加载为路由。同样我们希望实现在某个目录下添加的markdown文件自动加载成为路由直接访问，本
js实现兔年转圈圈动画的代码

兔年到了，兔年大吉祥，为了庆祝这份喜庆的兔年，今天我们设计一个兔子转圈圈的动画模拟吧。希望大家可以得到我的祝福和好运哦。。
Angular8升级至Angular13遇到的问题解决

根据项目需求，需要把Angular版本从8升级到13，无法从8直接升至13，需要一级一级的升级，本文介绍了在升级Angular版本的时候的一种报错和解