网页版扫雷 -- React练习

最新推荐文章于 2024-05-09 14:17:00 发布

一朵小呆毛

最新推荐文章于 2024-05-09 14:17:00 发布

阅读量1.4k

点赞数 2

分类专栏：游戏 javascript dataStructure 文章标签： javascript react 扫雷 webpack

本文链接：https://blog.csdn.net/weixin_43681425/article/details/89039021

版权

开会不准带电脑，手机app玩扫雷玩到眼快瞎，而且每次都要忍受长达十秒的广告，自己写一个算了。
详细代码在git里，还在更新。

第一步： React & webpack setup

用webpack主要目的是为了搭建一个简单的webpack server，顺带着直接用它打包发布好了.

set up React

React需要安装一系列相关包，什么ReactDom啊之类的，直接 npm install XX --save-dev安装之就好。

set up webpack

npm install webpack --save-dev
npm install webpack-dev-server --save-dev
npm install html-webpack-plugin --save-dev

--save-dev是因为这些包只为开发用，不是给user用的
然后配置一下webpack.config.js:

    entry: {
    //程序的入口，类似于定义java的main方法，逻辑从这里开始
        app: path.resolve(__dirname, 'src') + '/index.js'
    },
    devServer: {
   //定义webpack-server
        port: 8089, // localhost:8089/会访问到本地的页面
        contentBase: [
            path.join(__dirname, 'site/'), // localhost:8089/index.html会访问到server的site/index.html
        ],
    },
    output: {
    //所有的js代码都输出到bundle.js里，然后放到site/文件夹里
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'site/')
    },
    resolve: {
    
        modules: ['node_modules'],
        extensions: ['.js', '.jsx'], //import xx.js或者xx.jsx可以省略后缀
    },
    plugins: [ // 因为有一个html template，所以需要html-webpack-plugin来添加html文件。
        new HtmlWebpackPlugin({
   
            filename: 'index.html',
            template: 'src/index.html'//html template直接放在src根目录里。
        }),
    ],

然后在package.json里面的
scripts里面添加：

 "build": "webpack -d",
 "start:dev": "webpack -d && webpack-dev-server --progress --colors --config ./webpack.config.js"

这样就可以用 npm run build来打包所有代码到site里
用npm run start:dev来启动本地的webpack server

webpack要点大概就这些了。配置好了之后就开始写代码了。

第二步：生成一个布好雷的方格：

数据结构：

扫雷的数据结构没什么可以纠结的，一个二维数组。

数据类型：

也没啥好纠结的，数字嘛。
数字范围就是1-8，也没啥悬念嘛。表示周围有1-8个雷（玩了几千把扫雷，只遇到过一次8）。
空白的格子就用0表示了，表示周围没有雷嘛。
还剩下一个9就用来表示雷好雷嘛。到此为止，一位数的数字全部用上了。

生成数组：

剩下的问题就是，怎么把这个数组生成出来。
首先，根据我几千把扫雷的经验，这应该是个随机生成的数组。不大可能有什么库之类的。
那么如何随机生成？
每一盘，雷的个数是不变的，那也就是说，我们可以随机找几个为止把雷放进去，然后计算剩下的每个格子周围有多少个雷就可以了。
事情就简单起来了：（以简单为例子，10*8的矩阵，10个雷。）

生成一个10*8长度的数组。塞进去10个9.（怎么喜欢怎么来）
- 可以先放进去10个9，70个0，然后shuffle 打乱顺序
- 也可以先生成一个80个0 的数组，然后随机抽取10个位置替换为9.
把这个数组每8个一截，折断成10截，放进一个二维数组。
开始计算这个二维数组所有目前为0的位置周围有多少个9，然后替换成真正的数字。

一个由0-9组成的二维数组就好了。注意数雷的时候小心处理边界条件。

第三步：template和js入口

html

react的话 html 的template就很简单了。只有几行：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport"

最低0.47元/天解锁文章

一朵小呆毛

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
网页版扫雷 -- React练习

开会不准带电脑，手机app玩扫雷玩到眼快瞎，而且每次都要忍受长达十秒的广告，自己写一个算了。详细代码在git里，还在更新。第一步： React & webpack setup用webpack主要目的是为了搭建一个简单的webpack server，顺带着直接用它打包发布好了.set up ReactReact需要安装一系列相关包，什么ReactDom啊之类的，直接 npm i...
复制链接

扫一扫