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

徐小夕
• 阅读 1444

前言

本文将带大家一步步实现一个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学习小组,一起学习前端技术;

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

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这