ant design vue table 高度自适应_Vue.JS 实现拼拼乐小游戏项目
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vue-cli。
前言
为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下:
- vue-cli4 基于vue的脚手架
- Xuery 笔者基于原生js二次封装的dom库
- vue mvvm库
因为该应用属于H5游戏,为了清亮化笔者没有采用第三方ui库, 如果大家想采用基于vue的第三方移动端ui库,笔者推荐如下:
- Mint 饿了么推出的移动端ui库
- NutUI 一套京东风格的移动端组件库
- muse-ui 基于MaterialUI风格的移动端UI组件
- cube-ui 滴滴团队开发的移动端UI组件库
- vant 有赞团队的电商风格的移动端组件库
- atom-design atom风格的移动端ui组件库
- mand-mobile 滴滴团队研发的基于金融场景的移动端ui组件库
以上笔者推荐的都是社区比较完善,bug比较少的组件库,大家可以感受一下。回到我们的小游戏开发,我们更多的是javascript和css3的掌握程度,在学习完这篇文章之后相信大家对javascript和css3的编程能力都会有极大的提升,后面还会介绍如何使用canvas实现生成战绩海报图的功能。
正文
我们先来看看游戏的预览界面:在线体验地址:传送门
本文的算法实现方式在之前的拼拼乐文章中已经说明,这里主要介绍核心算法, 至于vue-cli的使用方法,笔者之前也写过对应的文章,大家可以研究学习一下。vue-cli搭建项目方式如下:
// 安装yarn global add @vue/cli// 创建项目vue create pinpinle// 进入项目并启动cd pinpinle && yarn start复制代码
H5游戏核心功能介绍
目前笔者主要整理乐如下核心功能,接下来笔者会一一带大家实现:
- 实现纯javascript上传预览图片
- 实现拼图分割功能
- 实现洗牌算法
- 实现生成战绩海报功能
1. 实现纯javascript上传预览图片
文件上传预览主要采用FileReader API实现,原理就是将file对象传给FileReader的readAsDataURL然后转化为data:URL格式的字符串(base64编码)以表示所读取文件的内容。 具体代码如下:
// 2.文件上传解析let file = $('#file');file.on('change', function(e){var file = this.files[0];var fileReader = new FileReader();// 读取完成触发的事件 fileReader.onload = function(e) { $('.file-wrap')[0].style.backgroundImage = 'url(' + fileReader.result + ')'; imgSrc = fileReader.result; } file && fileReader.readAsDataURL(file);})复制代码
2. 实现拼图分割功能
一般我们处理这种拼图游戏都会有如下方案:
- 用canvas分割图片
- 采用n张不同的切好的切片图片(方法简单,但是会造成多次请求)
- 动态背景分割
经过权衡,笔者想出了第三种方法,也是自认为比较优雅的方法,即动态背景分割,我们只需要使用1张图片,然后利于css的方式切割图片,有点经典的雪碧图的感觉,如下:
本质就是我们设置九个div,每个div都使用同一张图片,并且图片大小等于游戏画布大小,但是我们通过backgroundPosition(背景定位)的方式来实现切割图片。这样做的另一个好处是方便我们实现洗牌逻辑。
3. 实现洗牌算法
洗牌逻辑依托于随机算法,这里我们结合坐标系,实现一个随机生成二维坐标系的逻辑,然后通过改变每个切片的translate位置,配合过渡动画,即可实现洗牌功能和洗牌动画。
3.1 数组乱序算法
数组乱序比较简单,代码如下:
// 数组乱序function upsetArr(arr) { arr.sort(function(a,b){return Math.random() > 0.5 ? -1 : 1 })}复制代码
3.2 洗牌逻辑
洗牌逻辑基于数组乱序,具体逻辑如下:
// 洗牌方法function shuffle(els, arr) { upsetArr(arr);for(var i=0, len=els.length; i< len; i++) {var el = els[i]; el.setAttribute('index', i); // 将打乱后的数组索引缓存到元素中 el.style.transform = 'translate(' + arr[i].x + 'vw,' + arr[i].y + 'vh'+ ')'; }}复制代码
3.3 生成n纬矩阵坐标
n维矩阵主要用来做洗牌和计算成功率的,具体实现如下:
// 生成n维矩阵坐标function generateMatrix(n, dx, dy) {var arr = [], index = 0;for(var i = 0; i< n; i++) {for(var j=0; j< n; j++) { arr.push({x: j*dx, y: i*dy, index: index}); index++; } }return arr}复制代码
3.4 置换算法
置换算法主要用来切换拼图的,比如用户想移动拼图,可以用过置换来实现:
// 数组置换function swap(arr, indexA, indexB) {let cache = arr[indexA]; arr[indexA] = arr[indexB]; arr[indexB] = cache;}复制代码
4. 实现生成战绩海报功能
生成战绩海报笔者采用canvas来实现,对于canvas的api不熟悉的可以查看MDN,讲的比较详细。这里笔者简单实现一个供大家参考:
function generateImg() {var canvas = document.createElement("canvas");if(canvas.getContext) {var winW = window.innerWidth, winH = window.innerHeight, ctx = canvas.getContext('2d'); canvas.width = winW; canvas.height = winH;// 绘制背景// ctx.fillStyle = '#06c';var linear = ctx.createLinearGradient(0, 0, 0, winH); linear.addColorStop(0, '#a1c4fd'); linear.addColorStop(1, '#c2e9fb'); ctx.fillStyle = linear; ctx.fillRect(0, 0, winW, winH); ctx.fill();// 绘制顶部图像var imgH = 0; img = new Image(); img.src = imgSrc; img.onload = function(){// 绘制的图片宽为.7winW, 根据等比换算绘制的图片高度为 .7winW*imgH/imgW imgH = .6*winW*this.height/this.width; ctx.drawImage(img, .2*winW, .1*winH, .6*winW, imgH); drawText(); drawTip(); drawCode(); }// 绘制文字function drawText() { ctx.save(); ctx.fillStyle = '#fff'; ctx.font = 20 + 'px Helvetica'; ctx.textBaseline = 'hanging'; ctx.textAlign = 'center'; ctx.fillText('我只用了' + (180 -dealtime) + 's,' + '快来挑战!', winW/2, .15*winH + imgH); ctx.restore(); }// 绘制提示文字function drawTip() { ctx.save(); ctx.fillStyle = '#000'; ctx.font = 14 + 'px Helvetica'; ctx.textBaseline = 'hanging'; ctx.textAlign = 'center'; ctx.fillText('关注下方二维码开始游戏', winW/2, .25*winH + imgH); ctx.restore(); }// 绘制二维码function drawCode() {var imgCode = new Image(); imgCode.src = '/piecePlay/images/logo.png'; imgCode.onload = function(){ ctx.drawImage(imgCode, .35*winW, .3*winH + imgH, .3*winW, .3*winW);// 生成预览图var img = new Image(); img.src= convertCanvasToImage(canvas, 1).src; img.className = 'previewImg'; img.onload = function(){ $('.preview-page')[0].appendChild(this); startDx = startDx - 100; transformX(wrap, startDx + 'vw'); } } } } else { alert('浏览器不支持canvas!') }}复制代码
H5拼图小游戏笔者已在github开源, 感兴趣的可以学习参考。以上的逻辑部分的代码可以直接整合到vue项目中即可,由于实现比较简单, 这里笔者就不详细介绍了。
ant design vue table 高度自适应_Vue.JS 实现拼拼乐小游戏项目相关推荐
- ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
- ant design vue table 高度自适应_很受欢迎的vue前端UI框架
最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...
- ant design vue table 高度自适应_2年Vue项目实战经验汇总!
前言 vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,由于其轻量和自底向上的渐进式设计思想,使其不仅仅被应用于PC系统,对于移动端,桌面软件(electronjs)等也有广泛的应用,与 ...
- ant design vue table 高度自适应_html之table表格
概述 html中提供了一个table表格的东西,不过到现在来说,用处基本上不是很大,但有些报表的项目中还是会用到的.此内容可以稍微一带而过,用到的时候,再回来复习也不迟.表格由 <table&g ...
- ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色 一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
- ant design vue table分页
ant design vue table分页设置 1.设置pagination <a-table :columns="columns" :dataSource="d ...
- Ant Design Vue Table 组件合并单元格
Ant Design Vue Table 组件合并单元格 项目开发中,有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现. <template><div ...
- vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用 场景复现 实际操作 解决a-table表格padding过宽 知识调用 文章中可能会 ...
- Ant Design Vue table表格点击行选中多选框
参考官方文档,实现点击行选中前边的多选框 <template><div><a-table :rowSelection="{selectedRowKeys: se ...
最新文章
- Java 9 揭秘(1. 入门介绍)
- 在RH6.5上安装sublime3 build3103步骤
- pandas isnull函数检查数据是否有缺失
- AT指令集及S寄存器
- 服务器说你注册过多,为什么我的世界服务器说此用户名已被注册我都换了很多用户了都没用 爱问知识人...
- 汉语拼音/pinyin4j
- govendor用法
- 各种水龙头拆卸图解_扭力扳手使用方法图解与注意事项、原理、种类
- 力扣-811 子域名访问计数
- LINUX上ZIP的使用
- Java solrj client 添加JavaEntity Bean
- 《高性能javascript》随笔
- 联想计算机无线网络设置密码,联想笔记本电脑wifi怎么连接
- bandizip修改压缩文件内容_BandiZip使用方法,成功压缩解压文件
- 网页(HTML)转换为PDF
- 《游戏人工智能》学习笔记3——7 用脚本写现实世界的行为树
- Python数据爬虫学习笔记(11)爬取千图网图片数据
- 共享软件作者怎样才能月入万
- 科普:什么是CPU?CPU和芯片关系?CPU怎么做的?CPU有什么用?不同CPU有什么区别?我们怎么选CPU?
- BAT超级入口“连接”战
热门文章
- FFmpeg流媒体调试工具(六)
- ckati与ninja构建demo
- 你足够了解Context吗?
- MediaCodec 编码H264 编码一帧后dequeueOutputBuffer为-1的问题
- Vue之webpack之vue
- educoder 初始mongodb
- Linux http网页美化,Linux_用javascript实现select的美化,论坛经常有人会问到用CSS如何 - phpStudy...
- python连续质数计算代码分析,素性测试的Miller-Rabin算法完全解析 (C语言实现、Python实现)...
- python如何避免访问对象不存在的属性_Python3基础 setattr 设置对象的属性值,如果属性不存在就创建一个...
- python重写和重载的区别_Java 重写(Override)与重载(Overload)