打造专属自己的html5拼图小游戏

利用canvas切出小块图片

我们知道现在的拼图游戏都是由九张小图片依次排列组成的,就是类似九宫格那样。那么以前的做法就是我们利用Photoshop这样的工具把原始大图【尺寸一般都是正方形的哦】切成九张小块的正方形小图,但是这种做法有点不灵活,如果我们要更换图片的话,就得重新去切图,好麻烦。。。 不过没关系,现在我们有了canvas!利用canvas我们可以很轻松的做到这些。核心代码如下:

var image = new Image();

image.onload = function() {

    var index = 1;

    for (var i=0; i<3; i++) {

        for (var j=0; j<3; j++) {

            ctx.drawImage(image, 300*j, 300*i, 300, 300, 0, 0, 300, 300);

            $lis.eq(index-1).find('img').attr('src', canvas.toDataURL('image/jpeg'));

            index++;

        }

    }

}

//900x900

image.src = "shanlian.jpg";


实现小块图片的随机排列
这里的核心是利用了javascript数组的随机排序,核心代码如下:
imgArr.sort(function(a, b) {

    return Math.random() - Math.random();

});

var index = 1;

for (var i=0; i<3; i++) {

    for (var j=0; j<3; j++) {

        ctx.drawImage(image, 300*j, 300*i, 300, 300, 0, 0, 300, 300);

        $lis.eq(imgArr[index-1]-1).find('img').data('seq', index).attr('src', canvas.toDataURL('image/jpeg'));

        index++;

    }

}

相关touch事件的监听和实现

这里无非就是利用向左滑动,向右滑动这些去实现拼图的操作。核心代码如下:

//阻止手机上浏览器的弹性下拉。。。

$('body').on('touchstart', function(e) {

    e.preventDefault();

});

$lis.on('swipeLeft', function(e) {

    e.preventDefault();

    var $this = $(this);

    var index = $this.index();

    var html = $this.html();

    var $prev = $this.prev();

    if ($.inArray(index, [3, 6]) > -1 || $prev.size() <= 0) {

        return false;

    }

    $this.html($prev.html());

    $prev.html(html);

    App.check();

});

$lis.on('swipeRight', function(e) {

    e.preventDefault();

    var $this = $(this);

    var index = $this.index();

    var html = $this.html();

    var $next = $this.next();

    if ($.inArray(index, [2, 5]) > -1 || $next.size() <= 0) {

        return false;

    }

    $this.html($next.html());

    $next.html(html);

    App.check();

});

$lis.on('swipeUp', function(e) {

    e.preventDefault();

    var $this = $(this);

    var html = $this.html();

    var index = $this.index() - 3;

    var $up = $lis.eq(index);

    if (index >= 0 && $up.size() > 0) {

        $this.html($up.html());

        $up.html(html);

        App.check();

    }

});

$lis.on('swipeDown', function(e) {

    e.preventDefault();

    var $this = $(this);

    var html = $this.html();

    var index = $this.index() + 3;

    var $down = $lis.eq(index);

    if (index < 9 && $down.size() > 0) {

        $this.html($down.html());

        $down.html(html);

        App.check();

    }

});

游戏是否完成的判断

这里的话,拼图顺序的每一次变化都要去检测一下是否完成了,原理就是获取当前小块图片的顺序和原始的图片进行比较。核心代码如下:

var resArr = [];

$('#gameBox img').each(function(k, v) {

    resArr.push(v.getAttribute("data-seq"));

});

if (resArr.join("") === oriArr.join("")) {

    //完成的处理。。。

}

原文发布于微信公众号 - Golang语言社区(Golangweb)

原文发表时间:2017-09-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

微信小程序从零开始开发步骤(五)轮播图

3803
来自专栏CRPER折腾记

React 折腾记 - (2) 实现路由动效过渡,并解决过程中奇奇怪怪的问题

注意: 这里的样式用的style-components来写的,感兴趣的可以自行了解下

1311
来自专栏向治洪

react native实现上拉加载下拉刷新

前言 我们在做原生app开发的时候,很多场景都会用到下拉刷新、上拉加载的操作,Android中如PullToRefreshListView,ios中如MJRef...

2878
来自专栏前端人人

React第三方组件1(路由管理之Router的使用⑤按需加载-下)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

2936
来自专栏Hadoop实操

使用Cloudera Manager查看集群,服务,角色和主机的图表

对于集群,服务,角色和主机,你都可以查看与之相关的各种指标的图标的仪表盘。虽然对于不同实体的指标显示是不一样的,但是基本功能都是一样的。

5659
来自专栏我和未来有约会

Silverlight控件 - Carrousel

Silverlight控件 - Carrousel 简介: Carrousel是一个布局控件,可对其内部的子控件排出像《旋转木马》一样的效果。 项目地...

3456
来自专栏电光石火

防F12扒代码:按下F12关闭当前页面

<script>   function fuckyou(){       window.close(); //关闭当前窗口(防抽)      wind...

2476
来自专栏用户2442861的专栏

sublime text 配置php调试环境(快捷键)

2、在sublime text 2中 工具->编译系统->新建编译系统 添加如下代码:

1821
来自专栏mukekeheart的iOS之旅

iOS模拟器使用

  在iOS开发过程中一直都是使用模拟器进行调试,在模拟器上有很多不适应的地方,但是其实在模拟器上也有很多其他的功能,在本文中主要对模拟器的一些基本功能进行总结...

1183
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(三)Zepto

Zepto是一个轻量级的针对现代高级浏览器的 JavaScript库, 它与jquery有着类似的api。

1932

扫码关注云+社区

领取腾讯云代金券