h5 游戏源码_如何用200行代码写一个爱豆拼拼乐H5小游戏（附源码）

前言

本文将带大家一步步实现一个H5拼图小游戏，考虑到H5游戏的轻量级和代码体积，我没有使用react或vue这些框架，而采用我自己写的dom库和原生javascript来实现业务功能，具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库，构建工具我采用了自己搭建的gulp4开发项目脚手架。你将学到：

• 洗牌算法
• 洗牌动画实现原理
• 用FileReader API实现本地预览文件
• 用Canvas生成海报

零零总总花了半天的时间，希望对自己后面涉及H5游戏有所帮助，也希望大家通过这篇文章有所收获。

设计思路

效果演示

具体实现

接下来我将贴出每一步的核心代码，供大家参考学习。

1.文件上传解析

``` js
// 文件上传解析
    var 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海报

具体实现思路如下，canvas代码后期会封装成一个类，基本用法和思路大致如下：

function 

3.切换元素动画和洗牌算法

我们用transform实现洗牌动画和拼图切换的动画，洗牌算法主要通过维护一个矩阵序列来实现。接下来是基本的工具方法：

// 滑动元素,用于切换页面

有了工具方法，我们可以通过如下调用实现洗牌：

//初始数组

该游戏的核心算法已经交给大家了，如想体验真实游戏，欢迎交流哈，如果想研究游戏源码，欢迎和我交流哈。

最后，欢迎加入前端技术群，一起探讨前端的魅力

更多推荐

• 如何快速掌握es6+新特性及核心语法？
• 前端开发中79条不可忽视的知识点汇总
• 15条前端必备的性能优化方法，你知道哪些
• 如何用css3实现惊艳面试官的背景动画（高级附源码）？
• 用webpack4.0撸单页/多页脚手架(jquery,react,vue,typescript)
• 《javascript高级程序设计》核心知识总结
• vue高级进阶系列——用typescript玩转vue和vuex