2048 小游戏前端开发
技术栈选取
vue3+vite+ts+tailwind
游戏规则
游戏界面如下:
游戏界面由 4*4 的方格组成,每次可以选择上下左右其中一个方向去滑动,每滑动一次,所有的数字方块都会往滑动的方向靠拢外,系统也会在空白的地方乱数出现一个数字方块(2 或者 4),相同数字的方块在靠拢、相撞时会相加。不断的叠加最终拼凑出 2048 这个数字就算成功,如果格子满了不能再滑动了则失败。
设计思路
布局
分为三个部分,头部的 title,中间的游戏操作界面,底部的操作按钮(重新开始)以及得分。主要代码如下:
<div class="w-full h-full p-4 flex flex-col items-center">
<header class="text-3xl">2048小游戏</header>
<footer ref="target" class="m-4 w-[90%] max-w-[460px] h-[50%] max-h-[460px] p-[10px] bg-slate-300 flex flex-wrap justify-between items-center">
<div
v-for="item in arr"
:key="item.index"
:style="{ 'background-color': refreshColor(item.value) }"
class="w-[23%] h-[23%] text-2xl flex items-center justify-center"
>
{{ item.value }}
</div>
</footer>
<div>
<button class="w-20 h-10 bg-orange-50" style="border: 1px solid red; border-radius: 5px" @click="init"> 重新开始 </button>
当前得分:<span class="text-lg">{{ score }}</span>
</div>
</div>
设计思路
- 4*4 的小正方形设计为一个数组,初始值设计为 0
- 空白的地方随机生成 2 或者 4:从数组中获取值为 0 的对象生成一个新的数组,从中随机选择一个,赋予值 2 或者 4。
- 监听操作:监听键盘的上下左右按钮;监听页面的滑动。
- 核心:数值的和并,把大数组分成 4 个小数组,每个小数组先把 0 去除,根据操作方向(上下左右),去合并数值,最后把数组补充 0(恢复成原本长度)。
- 判断输赢:赢,如果数组出现 2048 则胜利;输:格子满了,且上下左右没有可以合并的值。
for (let i = 0; i < 4; i++) {
// 分解大数组为四个小数组,同时把值为0的去掉
let itemArr: Array<number> = [arr.value[i * 4].value, arr.value[i * 4 + 1].value, arr.value[i * 4 + 2].value, arr.value[i * 4 + 3].value].filter(
(item: number) => item != 0
)
const length = itemArr.length
if (length > 1) {
if (direction == 'right') {
for (let j = length; j > 1; j--) {
if (!itemArr[j - 1]) {
continue
}
// 判断值是否相等,相等则合并
if (itemArr[j - 1] == itemArr[j - 2]) {
itemArr[j - 1] = 2 * itemArr[j - 1]
score.value += itemArr[j - 1]
if (itemArr[j - 1] === 2048) isWin = true
itemArr[j - 2] = 0
}
}
} else {
for (let j = 0; j < length - 1; j++) {
if (!itemArr[j]) {
continue
}
if (itemArr[j] == itemArr[j + 1]) {
itemArr[j] = 2 * itemArr[j]
score.value += itemArr[j]
if (itemArr[j] === 2048) isWin = true
itemArr[j + 1] = 0
}
}
}
}
itemArr = itemArr.filter((item: number) => item != 0)
const finalLength = itemArr.length
if (finalLength != 4) {
for (let k = 0; k < 4 - finalLength; k++) {
if (direction == 'right') {
itemArr.unshift(0)
} else {
itemArr.push(0)
}
}
}
arr.value[i * 4].value = itemArr[0]
arr.value[i * 4 + 1].value = itemArr[1]
arr.value[i * 4 + 2].value = itemArr[2]
arr.value[i * 4 + 3].value = itemArr[3]
}