怎样制作游戏 源码编辑器制作简单小游戏

我曾经研发过一款运用了H5、Javascript、css3技术的小游戏，其中的技术栈包括我自己封装的类似Jquery框架的Xuery。在这款游戏中，我运用了许多经典的javascript算法和css3特性，对编程能力的提升有很大帮助。下面，我将分享一下这款游戏的开发经历，并附上源码获取方式，供大家学习体验。

由于此H5游戏项目轻量化的需求，我并未采用第三方的ui库。若大家想要在移动端使用ui库，我推荐几个我曾使用过且评价较高的：

• Mint，饿了么团队推出的移动端ui库。
• NutUI，一套京东风格的移动组件库。
• muse-ui，基于MaterialUI风格的移动端UI组件。
• cube-ui，滴滴团队开发的移动端组件库。
• vant，有赞团队打造的电商风格移动端组件库。
• atom-design，提供atom设计风格的移动端ui组件。
• 还有mand-mobile，是滴滴团队专为金融场景研发的移动端ui组件库。

这些组件库都是社区广泛使用且bug较少的，值得大家体验。回归到我们的小游戏开发，这更多的是对javascript和css3掌握程度的考验。学完本文后，相信大家的javascript和css3编程能力都会有显著提升。后面，我还会介绍如何使用canvas来实现生成战绩海报图的功能。

让我们先预览一下游戏的界面。关于算法的实现，我在之前的文章中已有说明，这里主要介绍核心算法。至于vue-cli的使用方法，我之前也写过相关文章，大家可以研究学习。

关于vue-cli3的配置实战，详细信息可参考“一张图教你快速玩转vue-cli3”。我现在主要整理了如下核心功能，接下来将逐一带领大家实现：纯javascript上传预览图片、拼图分割功能、洗牌算法以及生成战绩海报功能。

文件上传预览主要利用FileReader API实现，其原理是将file对象传给FileReader的readAsDataURL方法，转化为data:URL格式的字符串（base64编码）以表示文件内容。具体代码如下所示。

拼图游戏的实现方案通常有：使用canvas分割图片、采用多张切好的切片图片（方法简单但需多次请求）、动态背景分割等。经过权衡，我采用了动态背景分割的方法，只需使用1张图片，通过css的backgroundPosition属性实现图片的切割，这样不仅方便实现洗牌逻辑，还提高了效率。

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

关于数组乱序、n维矩阵用于洗牌和计算成功率、置换算法用于拼图切换等具体实现细节，这里就不一一展开了。生成战绩海报部分，我采用了canvas来实现。对于canvas的API不熟悉的读者，可以查阅MDN的详细讲解。

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