实现h5小游戏基本步骤

基本步骤

• 选型： 选择自己擅长的框架和语言来搭建项目
• 搭建好项目，解决路由问题后，先根据要实现的页面将页面静态实现
• 然后先确定好整体的思路，先总后分
• 整体思路确定后，先完成游戏的底部逻辑，然后按照游戏思路走，一步一步完成即可。

实现 h5 小游戏的技能

• 数学的逻辑思维，绘图(计算坐标时，可以绘图参考)，技能能力，框架认知

建议

• 一开始，按照自己的思路，用自己熟悉的语法表达出来即可，等到之后多看大佬的代码，学有所成后，觉得有能力对代码进行升级优化，在重新实现

遇到问题：

• 安装的版本的 typescript，而非 javascript，vue3 会提示找不到模块“@/views/HomeView.vue”或其相应的类型声明。
• 解决：

  在目录中带env.d.ts的文件中添加
  declare module '*.vue' {
     import type { DefineComponent } from 'vue'
     const component: DefineComponent<{}, {}, any>
     export default component
  }

参考

扫雷参考

扫雷思路

• 考虑到需要使用到随机函数，先封装一个随机函数
• 先将棋盘实现： 在初始化函数中实现一个 n*n 的空棋盘，本质上时实现一个二维数组
• 然后在棋盘中随机埋雷，给定雷的数量是多少，就循环多少次，并定义两个变量 x,y，获取在 0 到 n 的随机数，
• 然后设置二维数组的对应的 x,y 位置设置为雷
• 给雷生成提示，需要考虑边界和顶点这两种特殊情况，通过坐标
• 等提示生成后，存在有多个地雷挨得近的情况，在得到坐标的数组后，在计算从获取到的第一个雷的坐标开始，在距离这个坐标的两个格子，是否存在第二个雷，存在，则对应的值范围内坐标+1
• 然后将从埋雷开始的代码到提示的生成的代码全部放进点击开始的函数，并设立一个判断游戏开始的标签
• 处理上层的 mask 格子，需要将二位数组转化成复合要求的数组，这个 mask 数组应该存在 class，y 值，
• 在开始游戏的函数中需要更新 mask 数组
• 点击单个 mask 格子通过事件传递 y 值和 index，x 值
• 在该事件下封装一个函数，将点击格子附近的 n*n 区域除雷的格子背景设置为透明，这里主要注意顶点与其它区域的，设置连两个 x,y 的形参，
• 然后通过插旗的数量来判断第一次和其它次的点击生成范围
• 完成游戏失败判断
• 完成游戏胜利判断