前端实战:从零到一实现H5拼图小游戏

开发 前端
我去年曾写过一个用H5,Javascript,css3实现的拼拼乐小游戏,技术栈采用自己封装的类Jquery框架 Xuery ,其中涉及到了很多经典的 javascript 算法和css3特性 ,对大家的编程能力会有很大的提高,文末我也会放上源码获取方式,大家可以学习体验一下。

[[417629]]

我去年曾写过一个用H5,Javascript,css3实现的拼拼乐小游戏,技术栈采用自己封装的类Jquery框架 Xuery ,其中涉及到了很多经典的 javascript 算法和css3特性 ,对大家的编程能力会有很大的提高,文末我也会放上源码获取方式,大家可以学习体验一下。

前言

因为该应用属于 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 实现生成战绩海报图的功能。

正文

我们先来看看游戏的预览界面:

本文的算法实现方式涉及到洗牌算法,动态生成n维坐标,图片切割等,接下来会介绍核心算法的实现, 至于vue-cli的使用方法,笔者之前也写过对应的文章,大家可以研究学习一下。vue-cli搭建项目方式如下:

  1. // 安装 
  2. yarn global add @vue/cli 
  3.  
  4. // 创建项目 
  5. vue create pinpinle 
  6.  
  7. // 进入项目并启动 
  8. cd pinpinle && yarn start 

关于vue-cli3配置实战,可以移步 一张图教你快速玩转vue-cli3

H5游戏核心功能介绍

目前笔者主要整理乐如下核心功能,接下来笔者会一一带大家实现:

  • 实现纯javascript上传预览图片
  • 实现拼图分割功能
  • 实现洗牌算法
  • 实现生成战绩海报功能

1. 实现纯javascript上传预览图片

文件上传预览主要采用FileReader API实现,原理就是将file对象传给FileReader的readAsDataURL然后转化为data:URL格式的字符串(base64编码)以表示所读取文件的内容。 具体代码如下:

  1. // 2.文件上传解析 
  2. let file = $('#file'); 
  3. file.on('change'function(e){ 
  4.     var file = this.files[0]; 
  5.     var fileReader = new FileReader(); 
  6.     // 读取完成触发的事件 
  7.     fileReader.onload = function(e) { 
  8.         $('.file-wrap')[0].style.backgroundImage = 'url(' + fileReader.result + ')'
  9.         imgSrc = fileReader.result; 
  10.     } 
  11.  
  12.     file && fileReader.readAsDataURL(file); 
  13. }) 

2. 实现拼图分割功能

一般我们处理这种拼图游戏都会有如下方案:

  • 用canvas分割图片
  • 采用n张不同的切好的切片图片(方法简单,但是会造成多次请求)
  • 动态背景分割

经过权衡,笔者想出了第三种方法,也是自认为比较优雅的方法,即动态背景分割,我们只需要使用1张图片,然后利于css的方式切割图片,有点经典的雪碧图的感觉,如下:

本质就是我们设置九个div,每个div都使用同一张图片,并且图片大小等于游戏画布大小,但是我们通过backgroundPosition(背景定位)的方式来实现切割图片。这样做的另一个好处是方便我们实现洗牌逻辑。

3. 实现洗牌算法

洗牌逻辑依托于随机算法,这里我们结合坐标系,实现一个随机生成二维坐标系的逻辑,然后通过改变每个切片的translate位置,配合过渡动画,即可实现洗牌功能和洗牌动画。

3.1 数组乱序算法

数组乱序比较简单,代码如下:

  1. // 数组乱序 
  2. function upsetArr(arr) { 
  3.     arr.sort(function(a,b){ 
  4.         return Math.random() > 0.5 ? -1 : 1 
  5.     }) 

3.2 洗牌逻辑

洗牌逻辑基于数组乱序,具体逻辑如下:

  1. // 洗牌方法 
  2. function shuffle(els, arr) { 
  3.     upsetArr(arr); 
  4.     for(var i=0, len=els.length; i< len; i++) { 
  5.         var el = els[i]; 
  6.         el.setAttribute('index', i);  // 将打乱后的数组索引缓存到元素中 
  7.         el.style.transform = 'translate(' + arr[i].x + 'vw,' + arr[i].y + 'vh'')'
  8.     } 

3.3 生成n纬矩阵坐标

n维矩阵主要用来做洗牌和计算成功率的,具体实现如下:

  1. // 生成n维矩阵坐标 
  2. function generateMatrix(n, dx, dy) { 
  3.     var arr = [], index = 0; 
  4.     for(var i = 0; i< n; i++) { 
  5.         for(var j=0; j< n; j++) { 
  6.             arr.push({x: j*dx, y: i*dy, indexindex}); 
  7.             index++; 
  8.         } 
  9.     } 
  10.     return arr 

3.4 置换算法

置换算法主要用来切换拼图的,比如用户想移动拼图,可以用过置换来实现:

  1. // 数组置换 
  2. unction swap(arr, indexA, indexB) { 
  3.    let cache = arr[indexA]; 
  4.    arr[indexA] = arr[indexB]; 
  5.    arr[indexB] = cache; 

4. 实现生成战绩海报功能

生成战绩海报笔者采用canvas来实现,对于canvas的api不熟悉的可以查看MDN,讲的比较详细。这里笔者简单实现一个供大家参考:

  1. function generateImg() { 
  2.     var canvas = document.createElement("canvas"); 
  3.  
  4.     if(canvas.getContext) { 
  5.         var winW = window.innerWidth, 
  6.             winH = window.innerHeight, 
  7.         ctx = canvas.getContext('2d'); 
  8.         canvas.width = winW; 
  9.         canvas.height = winH; 
  10.  
  11.         // 绘制背景 
  12.         // ctx.fillStyle = '#06c'
  13.         var linear = ctx.createLinearGradient(0, 0, 0, winH); 
  14.         linear.addColorStop(0, '#a1c4fd'); 
  15.         linear.addColorStop(1, '#c2e9fb'); 
  16.         ctx.fillStyle = linear; 
  17.         ctx.fillRect(0, 0, winW, winH); 
  18.         ctx.fill(); 
  19.  
  20.         // 绘制顶部图像 
  21.         var imgH = 0; 
  22.         img = new Image(); 
  23.         img.src = imgSrc; 
  24.         img.onload = function(){ 
  25.             // 绘制的图片宽为.7winW, 根据等比换算绘制的图片高度为 .7winW*imgH/imgW 
  26.             imgH = .6*winW*this.height/this.width; 
  27.             ctx.drawImage(img, .2*winW, .1*winH, .6*winW, imgH); 
  28.  
  29.             drawText(); 
  30.             drawTip(); 
  31.             drawCode(); 
  32.         } 
  33.  
  34.         // 绘制文字 
  35.         function drawText() { 
  36.             ctx.save(); 
  37.             ctx.fillStyle = '#fff'
  38.             ctx.font = 20 + 'px Helvetica'
  39.             ctx.textBaseline = 'hanging'
  40.             ctx.textAlign = 'center'
  41.             ctx.fillText('我只用了' + (180 -dealtime) + 's,' + '快来挑战!', winW/2, .15*winH + imgH); 
  42.             ctx.restore(); 
  43.         } 
  44.  
  45.         // 绘制提示文字 
  46.         function drawTip() { 
  47.             ctx.save(); 
  48.             ctx.fillStyle = '#000'
  49.             ctx.font = 14 + 'px Helvetica'
  50.             ctx.textBaseline = 'hanging'
  51.             ctx.textAlign = 'center'
  52.             ctx.fillText('关注下方二维码开始游戏', winW/2, .25*winH + imgH); 
  53.             ctx.restore(); 
  54.         } 
  55.  
  56.  
  57.         // 绘制二维码 
  58.         function drawCode() { 
  59.             var imgCode = new Image(); 
  60.             imgCode.src = '/piecePlay/images/logo.png'
  61.             imgCode.onload = function(){ 
  62.                 ctx.drawImage(imgCode, .35*winW, .3*winH + imgH, .3*winW, .3*winW); 
  63.  
  64.                 // 生成预览图 
  65.                 var img = new Image(); 
  66.                 img.src= convertCanvasToImage(canvas, 1).src; 
  67.                 img.className = 'previewImg'
  68.                 img.onload = function(){ 
  69.                     $('.preview-page')[0].appendChild(this); 
  70.                     startDx = startDx - 100; 
  71.                     transformX(wrap, startDx + 'vw'); 
  72.                 } 
  73.             } 
  74.         }   
  75.     } else { 
  76.         alert('浏览器不支持canvas!'
  77.     } 

 

H5拼图小游戏笔者已在github开源, 感兴趣的可以学习参考。以上的逻辑部分的代码可以直接整合到vue项目中即可,由于实现比较简单,这里笔者就不详细介绍了。

本文转载自微信公众号「趣谈前端」,可以通过以下二维码关注。转载本文请联系趣谈前端公众号。

 

责任编辑:武晓燕 来源: 趣谈前端
相关推荐

2022-03-29 07:40:23

H5游戏开发扫雷游戏

2015-09-25 17:54:59

H5游戏

2023-11-29 08:10:36

javascriptH5游戏

2022-03-24 08:33:58

小游戏项目cmdvue3

2022-03-28 07:52:31

H5小游戏开发教程页面基础布局

2023-07-06 20:40:57

圣诞抽抽乐H5

2020-11-30 06:20:13

javascript

2018-08-29 13:57:40

前端性能测试Html5

2011-01-13 14:29:54

2015-08-14 10:42:05

2022-02-17 20:18:27

JS鸿蒙操作系统

2022-09-27 07:30:16

H5益智游戏引擎

2022-06-27 09:48:15

H5移动互联网页面性能

2011-05-04 11:31:09

Windows PhoWindows Pho游戏开发

2020-11-12 09:44:43

鸿蒙

2022-02-13 23:00:48

前端微前端qiankun

2016-01-27 12:05:13

2016HTML5观点

2016-03-10 11:21:57

H5前端框架

2021-06-30 07:51:09

新项目领域建模

2012-05-14 13:29:25

HTML5
点赞
收藏

51CTO技术栈公众号