教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)

徐小夕 等级 361 0 0

前言

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

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

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

设计思路

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)

效果演示

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)

教你用200行代码写一个爱豆拼拼乐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 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 = './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!')
        }
    }

    // 将canvas转化为图片
    function convertCanvasToImage(canvas, quality) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png", quality);
        return image;
    }

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

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

// 滑动元素,用于切换页面
    function transformX(el, dx) {
        el.style.transform = 'translateX(' + dx + ')';
    }

// 生成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
    }

// 数组置换
    function swap(arr, indexA, indexB) {
        var cache = arr[indexA];
        arr[indexA] = arr[indexB];
        arr[indexB] = cache;
    }

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

// 洗牌方法
    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'+ ')';
        }
    }

// 校验是否成功方法
    function isTestSuccess(arr) {
        return arr.every(function(item, i){ return item.index === i })
    }
// 

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

//初始数组
let pool = generateMatrix(3, 28, 20);   
// 洗牌 pieces是拼图的dom集合
shuffle(pieces, pool);

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

更多推荐

欢迎关注下方公众号,获取更多前端知识精粹学习社群教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码) 在公众号点击进群,可以加入vue学习小组,一起学习前端技术;

回复学习路径,将获取笔者多年从业经验的前端学习路径的思维导图。

收藏
评论区

相关推荐

如何用不到200行代码写一款属于自己的js类库
前言 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力。本文将使用面向对象的方式,来教大家用原生js写出一个类似jQuery这样的类库。我们将会学到如下知识点: 闭包:减少变量污染,缩短变量查找范围 自执行函数在对象中的运用 extend的实现原理 如何实现跨浏览器的事件监听 原型链与继承 接下来我会对类库
教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
css3实战汇总(附源码)
本文是继上一篇文章用css3实现惊艳面试官的背景即背景动画(高级附源码)(https://juejin.im/post/6844903950123188237)的续篇也是本人最后一篇介绍css3技巧的文章,因为css这块知识难点不是很多,更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结,另一
Android WebView加载优化
1.前言 最近几年关于原生WebView与H5混合开发的项目越来越多,这种开发带来了很多便利,但也会有一些缺点,比如说通过WebView加载H5会有一定的卡顿现象,会影响用户体验。下面本文就此问题一一展开讨论。 2. 场景 根据日常需求一般是通过webView.loadUrl()方法加载指定的网页,其大概流程如下: (https://i
Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。 本文将对这两种情况分别讲解,H5 端用 vue 实现。 一、前期准备(Vue项目准备) 本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。 项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令
看了10款文档编辑器之后, 我决定...
作为一名技术工作者, 我们经常会遇到编写技术文档, 技术分享等需求, 网上也有很多现成的文档管理工具, 出于好奇心, 我拉着朋友一起实现了一个, 用来自给自足. 接下来就来介绍一下轻量级且灵活方便的文档编辑工具—— powerNice(http://h5.dooring.cn/powernice). powerNice(http://h5.door
Android通过URL打开Activity
关注公众号 QXF069 为每个 Activity 绑定一个 url 可以方便的让第三方 app 直接打开这些 Activity。也可以方便在 app 内部进行页面跳转,解耦。 背景 举一个常见的案例,假设我们有个产品 A,产品 A 包含 h5 网页端和客户端,当用户在手机打开我们的 h5 网页端的时候,我们会期望如果用户手机安装了我们的客户端,则直接打
H5游戏开发:FC小蜜蜂 | Aotu.io「凹凸实验室」
H5游戏开发:FC小蜜蜂 by TH(https://github.com/ONESUNDAY) on 20180128 使用 Phaser 游戏引擎开发,主要
H5游戏开发:消灭星星 | Aotu.io「凹凸实验室」
H5游戏开发:消灭星星 by leeenx(https://github.com/leeenx) on 20180
从零开发一款可视化大屏制作平台
几个月前开源的H5页面制作平台H5Dooring(http://h5.dooring.cn/) 收到了很多热心的反馈和交流, 顺着笔者之前的规划, 我们又做了一款可视化大屏编辑器V6.Dooring(https://github.com/MrXujiang/v6.dooring.public). 接下来笔者就来带大家一起看看我们的方案设计和技术实现
vue h5 对接支付宝,微信支付,微信js支付
vue h5 实现支付(支付宝,微信) h5端实现支付难度不大,只是有些小的点需要注意下,其他的看文档撸就行了。 支付宝很简单,后端返回一个 html ,前端插入调用就行了,微信支付分两种:1、微信内支付(jsapi,微信内浏览器)2、微信外支付(h5支付)。 一、支付宝支付 // 前端啥都不用管,交给后端去干,返回 html 调用点击就好了 /
h5 - 总结及踩坑记录
这是近期的一个 h5 项目,由于某些原因,预览地址不能放出来。不过这不是重点,没有 demo 不就可以好好看文章了吗 哈哈哈~文中提到的 pixi 是 pixiJs,精灵是 pixiJs 中的概念。阅读本文假设你已经知道了这些东西,不过这在本篇文章中并没有太多关于这个库的内容觉得这篇文章有帮助到自己,就让它去收藏夹吃灰;觉得没用或觉得写的不好的,可以留下
Python爬取 201865 条《隐秘的角落》弹幕,发现看剧不如爬山?
本文不涉及剧透!请放心食用 最近又火了一部国产剧:《隐秘的角落》如果你没看过,那可能会对朋友圈里大家说的“一起去爬山”、“小白船”、“还有机会吗”感到莫名其妙。暑期推荐旅游小五在这个端午假期也赶紧刷完了本剧,必须要写篇文章了。由于《隐秘的角落》是在爱奇艺独播,所以数据从爱奇艺下手最直接。如果没爬过爱奇艺,可以考虑使用豆瓣、微博、知乎(电视剧数据分析 · 万
用了这 7 个 VS Code 插件,想写一辈子代码
0\. 往期精彩工具推荐 译文来自 https://levelup.gitconnected.com/7vscodeextensionsthatmakeyouwanttokeepcodingforeverf205e597ae34 原作者 Daan 译者: 蓝色的秋风(github
APP 开发技术该如何选型 ?
目前 按照 APP 开发分类,分为以下三大类 原生 APP  \[ Android Swift  \] WEB APP Hybrid App \[混合 APP  \] 在找工作的当中,很多岗位 要求 会开发 H5 App ,那到底什么是H5 APP 呢?一开始我也有点疑惑,没接触这块,按自己理解 就是 采用 HTML5 技术