乐趣区

BUI实战篇BUI数据驱动做的拼图游戏-Webapp移动适配版基于vuejs拼图游戏改造

jiezi

前言

如果你还不了解 bui 是什么？建议先看看这两篇文章。

  • 一张脑图看懂 BUI Webapp 移动快速开发框架【上】– 框架与工具、资源
  • 2019 开发最快的 Webapp 框架 –BUI 交互框架

bui.store 是 bui 的核心一部分，基于 DOM 的数据驱动。为了让熟悉 vuejs 更容易上手，接口参照 vuejs 的 api 设计。刚好看到一个有意思的基于 vuejs 设计的拼图游戏，于是动手转换，把整个开发过程记录下来，并做了移动端适配，优化，不费吹灰之力，拼图源码的创意归原作者所有。

玩一玩

在线拼图玩一玩

代码分析

vuejs 版核心

该拼图游戏项目来源于：https://github.com/luozhihao/…

App.vue 核心代码：具体的实现可以查看源码，这里只保留基本的结构。

<template>
    <div class="box">
        <ul class="puzzle-wrap">
            <li 
                :class="{'puzzle': true,'puzzle-empty': !puzzle}" 
                v-for="puzzle in puzzles" 
                v-text="puzzle"
                @click="moveFn($index)"
            ></li>
        </ul>
        <button class="btn btn-warning btn-block btn-reset" @click="render"> 重置游戏 </button>
    </div>
</template>

<script>
export default {data () {
        return {puzzles: []
        }
    },
    methods: {
        // 重置渲染
        render () {
            // 部分省略
            this.puzzles = puzzleArr
            this.puzzles.push('')
        },
        // 点击方块
        moveFn (index) {// 省略},
        // 校验是否过关
        passFn () {// 省略}
    },
    mounted () {this.render()
    }
}
</script>

样式部分代码暂时去掉

从零开始，基于 bui.store 改造过程

1. 新建 BUI 工程，工程名：bui-puzzle

# 创建工程
buijs create bui-puzzle

如果没有安装 buijs 构建工具, 可以直接点击下载单页工程包

2. 运行预览效果

# 进入文件夹
cd bui-puzzle

# 安装依赖
npm install

# 起服务预览效果
npm run dev

这些是工程化的处理，这个游戏只有一个页面，也没有数据请求那些，所以直接打开 index.html 就可以了。

3. 修改模板 main.html

了解 bui 的都知道，单页工程里面，打开index.html 默认会加载 pages/main/main.html ,pages/main/main.js 模板，所以我们接下来要更改这 2 个文件，一个是模板，一个是逻辑。

main.html

我们把它改成这样，去掉顶部图标，修改标题，去掉 footer 标签，把 vuejs 版的内容复制过来，放在 main 标签里面，做以下修改。

<div class="bui-page">
    <header class="bui-bar">
        <div class="bui-bar-left"> </div>
        <div class="bui-bar-main">BUI 拼图游戏 - 数据驱动 </div>
        <div class="bui-bar-right"> </div>
    </header>
    <main>
        <div class="box">

            <ul class="puzzle-wrap" b-template="page.tplGame(page.puzzles)"></ul>

            <button class="bui-btn" b-click="page.render"> 重置游戏 </button>
        </div>
    </main>
</div>

说明：bui-page 是标准的页面结构，main 标签是滚动的内容容器；b-开头的是 bui.store的行为属性，b-template为模板，b-click为事件。值为 page.xxx page 可以理解为自定义的作用域，初始化的时候的 scope 参数。

4. 修改模块 main.js

main.js 输入 bui-store，生成初始化，需要安装 bui-fast（vscode 直接搜索插件bui-fast 安装），把刚刚导出的模块里面的方法，复制到 methods, templates 为 main.html 指向的模板名tplGame。

loader.define(function(require, exports, module) {

    // 初始化数据行为存储，this 指向当前模块, bs 为 Behavior Store 简称。let bs = bui.store({
        //el: ".bui-page",
        scope: "page",
        data: {puzzles: []
        },
        methods: {
            // 重置渲染
            render() {
                // 部分省略
                puzzleArr.push('');
                // 这里不能直接采用赋值，需要使用数组提供的方法才能触发视图更新
                this.puzzles.$replace(puzzleArr)
            },

            // 点击方块
            moveFn(index) {// 省略},

            // 校验是否过关
            passFn() {// 省略}
        },
        watch: {},
        computed: {},
        templates: {tplGame(data) {
                // b-template 指向当前模板
                var html = "";
                
                // 返回结构
                return html;
            }
        },
        mounted: function() {
            // 数据解析后执行
            this.render();}
    })
})

参数说明

  • el:”.bui-page” 默认指向 .bui-page , 使用标准结构则不用管这个参数；
  • scope:”page” 默认可以都写page, 这个可以理解为作用域，写模板的时候，需要以这样 page.xxx 指向对应的方法或者数据；
  • templates:{} 为 b-template 指向的模板方法名，需要返回对应的结构；

其它基本跟 vuejs 保持一致。初始化必须写在 loader.define 里面。

最终代码

main.html

<style>
@import url('css/bootstrap.min.css');

body {font-family: Arial, "Microsoft YaHei";}

.box {
    width: 400px;
    margin: 50px auto 0;
}

.puzzle-wrap {
    width: 400px;
    height: 400px;
    margin-bottom: 40px;
    padding: 0;
    background: #ccc;
    list-style: none;
}

.puzzle {
    float: left;
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: #f90;
    text-align: center;
    line-height: 100px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 4px;
    text-shadow: 1px 1px 1px #B9B4B4;
    cursor: pointer;
}

.puzzle-empty {
    background: #ccc;
    box-shadow: inset 2px 2px 18px;
}

.btn-reset {box-shadow: inset 2px 2px 18px;}
</style>
<div class="bui-page">
    <header class="bui-bar">
        <div class="bui-bar-left"> </div>
        <div class="bui-bar-main">BUI 拼图游戏 - 数据驱动 </div>
        <div class="bui-bar-right"> </div>
    </header>
    <main>
        <div class="box">

            <ul class="puzzle-wrap bui-fluid-4" b-template="page.tplGame(page.puzzles)"></ul>

            <button class="bui-btn warning round" b-click="page.render"> 重置游戏 </button>
        </div>
    </main>
</div>

main.js

/**
 * 拼图游戏
 * 默认模块名: main
 */
loader.define(function(require, exports, module) {

    // 初始化数据行为存储
    var bs = bui.store({
        scope: "page",
        data: {puzzles: []
        },
        methods: {
            // 重置渲染
            render:function() {let puzzleArr = [],
                    i = 1

                // 生成包含 1 ~ 15 数字的数组
                for (i; i < 16; i++) {puzzleArr.push(i)
                }

                // 随机打乱数组
                puzzleArr = puzzleArr.sort(() => {return Math.random() - 0.5
                });

                // 页面显示, 前面声明是数组以后，不能使用赋值监听到变更, 先处理再替换，这样只触发一次视图变更
                puzzleArr.push('');
                this.puzzles.$replace(puzzleArr)
            },

            // 点击方块
            moveFn:function (index) {

                // 获取点击位置及其上下左右的值
                let curNum = this.puzzles[index],
                    leftNum = this.puzzles[index - 1],
                    rightNum = this.puzzles[index + 1],
                    topNum = this.puzzles[index - 4],
                    bottomNum = this.puzzles[index + 4]

                // 和为空的位置交换数值
                if (leftNum === '' && index % 4) {this.puzzles.$set(index - 1, curNum)
                    this.puzzles.$set(index, '')
                } else if (rightNum === '' && 3 !== index % 4) {this.puzzles.$set(index + 1, curNum)
                    this.puzzles.$set(index, '')
                } else if (topNum === '') {this.puzzles.$set(index - 4, curNum)
                    this.puzzles.$set(index, '')
                } else if (bottomNum === '') {this.puzzles.$set(index + 4, curNum)
                    this.puzzles.$set(index, '')
                }

                this.passFn()},

            // 校验是否过关
            passFn:function () {if (this.$data.puzzles[15] === '') {const newPuzzles = this.puzzles.slice(0, 15)

                    const isPass = newPuzzles.every((e, i) => e === i + 1)

                    if (isPass) {alert ('恭喜，闯关成功！')
                    }
                }
            }
        },
        watch: {},
        computed: {},
        templates: {tplGame: function (data) {
                var html = "";
                data.forEach(function (puzzle,index) {
                    var hasEmpty = !puzzle ? "puzzle-empty" : "";
                     html +=`<li class="puzzle ${hasEmpty}" b-click="page.moveFn($index)">${puzzle}</li>`
                })
                return html;
            }
        },
        mounted: function(){
            // 数据解析后执行
            this.render();}
    })
})

这里我们的方法定义改为了 es5 的写法，移动端有些对 es6 并不友好。

vuejs 跟 bui.store 对比

通过比对 vuejs 版跟 bui.store版本，你会发现，里面的业务方法几乎不用改变，重点在 vuejs 模板引擎转换成 bui 的模板的思路转换，bui 模板里面使用 es6 模板引擎，每次数据改变都会把模板重新渲染一遍，无需通过虚拟 Dom 去比对改变的位置。

vuejs

  • 双向绑定
  • 虚拟 Dom
  • 单文件组件
  • 模板引擎

bui.store

  • 双向绑定；
  • 真实 Dom，可以跟 Dom 的 UI 更好配合；
  • 组件分离，模板及逻辑，这样模板及脚本可以得到缓存，按需加载，也支持以单文件组件加载；
  • 无模板引擎，模板的渲染在脚本，无需过多关注模板，当然你可以使用第三方模板引擎配合；
  • 支持私有数据及公有数据；
  • 模块的访问是并行的，各自管自己，之间的访问无需像组件树一样，从上到下传参；

优化

bui.store是基于真实 Dom 的数据驱动。当数据改变以后，会找到对应的选择器做对应的变更。上面的例子如果你在 tplGame模板方法里面输出，你会发现，每次点击一个方块，会有 2 次触发，意味着有 2 次 Dom 渲染，这个应该避免。

优化后的 main.js

loader.define(function(require, exports, module) {

    // 初始化数据行为存储
    let bs = bui.store({
        scope: "page",
        data: {puzzles: []
        },
        methods: {
            // 重置渲染
            render: function() {let puzzleArr = [],
                    i = 1

                // 生成包含 1 ~ 15 数字的数组
                for (i; i < 16; i++) {puzzleArr.push(i)
                }

                // 随机打乱数组
                puzzleArr = puzzleArr.sort(() => {return Math.random() - 0.5
                });

                // 页面显示, 前面声明是数组以后，不能使用赋值监听到变更, 先处理再替换，这样只触发一次视图变更
                puzzleArr.push('');
                // 这里如果直接赋值不会触发视图更新
                // this.puzzles = puzzleArr;
                this.puzzles.$replace(puzzleArr);

            },

            // 点击方块
            moveFn: function(index) {
                // 获取点击位置及其上下左右的值
                let curNum = this.$data.puzzles[index],
                    leftNum = this.$data.puzzles[index - 1],
                    rightNum = this.$data.puzzles[index + 1],
                    topNum = this.$data.puzzles[index - 4],
                    bottomNum = this.$data.puzzles[index + 4]

                // 和为空的位置交换数值
                if (leftNum === '' && index % 4) {
                    // 只修改数据，不触发视图
                    this.$data.puzzles[index - 1] = curNum;
                    this.$data.puzzles[index] = '';
                    // 触发一次视图
                    this.puzzles.$replace(this.$data.puzzles);
                } else if (rightNum === '' && 3 !== index % 4) {
                    // 只修改数据，不触发视图
                    this.$data.puzzles[index + 1] = curNum;
                    this.$data.puzzles[index] = '';

                    // 触发一次视图
                    this.puzzles.$replace(this.$data.puzzles);

                } else if (topNum === '') {
                    // 只修改数据，不触发视图
                    this.$data.puzzles[index - 4] = curNum;
                    this.$data.puzzles[index] = '';
                    // 触发一次视图
                    this.puzzles.$replace(this.$data.puzzles);
                } else if (bottomNum === '') {
                    // 只修改数据，不触发视图
                    this.$data.puzzles[index + 4] = curNum;
                    this.$data.puzzles[index] = '';
                    // 触发一次视图
                    this.puzzles.$replace(this.$data.puzzles);
                }
                this.passFn()},

            // 校验是否过关
            passFn: function() {if (this.$data.puzzles[15] === '') {const newPuzzles = this.$data.puzzles.slice(0, 15)
                    const isPass = newPuzzles.every((e, i) => e === i + 1)

                    if (isPass) {bui.alert('恭喜，闯关成功！')
                    }
                }
            }
        },
        watch: {},
        computed: {},
        templates: {tplGame: function(data) {
                var html = "";
                data.forEach(function(puzzle, index) {
                    var hasEmpty = !puzzle ? "puzzle-empty" : "";
                    html += `<li class="puzzle ${hasEmpty}" b-click="page.moveFn($index)">${puzzle}</li>`
                })
                return html;
            }
        },
        mounted: function() {
            // 数据解析后执行
            this.render();}
    })
})

优化说明

  • this.puzzles 改成了 this.$data.puzzles，这里数据的访问只有一层，所以没有出现问题；
  • 用来访问的值应该使用 this.$data.puzzles；
  • 当this.abc = 123 的时候，this.$data.abc === 123 ;
  • 当this.$data.abc = 123; this.abc 还是等于原来的值；
  • this.abc 会触发视图更新，this.$data.abc 则不会。

例子：

这里修改一次数据，改成就会触发一次视图更新，造成 2 次页面渲染。

this.puzzles.$set(index + 1, curNum); this.puzzles.$set(index, '');

优化：

// 只修改数据，不触发视图
this.$data.puzzles[index + 4] = curNum;
this.$data.puzzles[index] = '';
// 最后触发一次视图
this.puzzles.$replace(this.$data.puzzles);

适配

这个效果在 PC 效果还不错，但到了手机端就成了这样，手机无法正常操作。

优化：去除引入 bootstrap 样式，按照 BUI 的 750 设计规范，把效果图转成 rem 单位。1rem=100px，宽度只要不大于 750px 就不会有横向滚动条。把原本的 float 布局也改为 bui-fluid-4列布局，里面只需要定义好高度就可以了。

<style type="text/css">
    .box {
        width: 6.8rem;
        margin: .4rem auto 0;
    }
    
    .puzzle-wrap {
        width: 100%;
        height: 6.8rem;
        margin-bottom: .4rem;
        padding: 0;
        background: #ccc;
    }
    
    .puzzle {
        width: 1.7rem;
        height: 1.7rem;
        font-size: .4rem;
        background: #f90;
        text-align: center;
        line-height: 1.7rem;
        border: 1px solid #ccc;
        box-shadow: 1px 1px 4px;
        text-shadow: 1px 1px 1px #B9B4B4;
        cursor: pointer;
    }
    
    .puzzle-empty {
        background: #ccc;
        box-shadow: inset 2px 2px 18px;
    }
</style>
<div class="bui-page">
    <header class="bui-bar">
        <div class="bui-bar-left"> </div>
        <div class="bui-bar-main">BUI 拼图游戏 - 数据驱动 </div>
        <div class="bui-bar-right"> </div>
    </header>
    <main>
        <div class="box">
            <ul class="puzzle-wrap bui-fluid-4" b-template="page.tplGame(page.puzzles)"></ul>

            <button class="bui-btn warning round" b-click="page.render"> 重置游戏 </button>
        </div>
    </main>
</div>

优化后的适配效果图：

iPhone5 iPhone678 iPhone678 Plus

最后一步

执行编译压缩，把工程生成 dist 目录，这个就是用来发布的文件夹，代码会执行转换编译成 es5 以及把 js 压缩。

npm run build

源码下载

该源码放在 bui-puzzle。喜欢就给颗星星吧。^_^

结语

谢谢阅读！欢迎关注 BUI Webapp 专栏。BUI 还有很多姿势等待你的开启。

  • BUI 官网

专栏往期热门文章：

  • 一张脑图看懂 BUI Webapp 移动快速开发框架【上】– 框架与工具、资源
  • 2019 开发最快的 Webapp 框架 –BUI 交互框架
  • 微信 Webapp 开发的各种变态路由需求及解决办法!
  • webapp 结合 Dcloud 平台打包图文教程
退出移动版