canvas drag 实现拖拽拼图小游戏
博主一直心心念念想做一个小游戏~ 前端时间终于做了一个小游戏,直到现在才来总结,哈哈~ 以后要勤奋点更新博客!
实现原理
1.如何切图?
用之前的方法就是使用photoshop将图片切成相应大小的图片。这种做法不灵活,如果要更换图片的话,就得重新去切图,很麻烦。
现在是使用canvas,图片是一整张jpg或者png,把图片导入到canvas画布,然后再调用上下文context的getImageData方法,把图片处理成小图,这些小图就作为拼图的基本单位
renderImg: function (image) {
var index = 0;
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
this.context.drawImage(image, 300 * j, 300 * i, 300, 600, 0, 0, 300, 300);
this.imgArr[index].src = this.canvas.toDataURL('image/jpeg');
this.imgArr[index].id = index;
index++;
}
}
},
2.如何判断游戏是否结束?
在刚刚生成的小图上面添加自定义属性 , 后期在小图被移动后再一个个判断,如果顺序是对的,那么这张大图就拼接成功, 允许进入下一关;
isSuccess: function () {
var imgLikeArr = document.querySelectorAll('img'),
imgArr = Array.prototype.slice.call(imgLikeArr),
len = imgArr.length, i,
flag = true, self = this; for (i = 0; i < len; i++) {
if (imgArr[i].id != i) {
flag = false;
}
} if (flag) {
setTimeout(function () {
self.showtip();
}, 200);
}
}
3.如何实现小图片随机排列?
使用math.random
randomImg: function () {
this.imgArr.sort(function () {
return Math.random() - Math.random();
});
},
4.拖拽功能实现?
drag知识点补充站:
兼容性:IE9+,主流浏览器,移动端所有型号暂不支持
一个完整的drag and drop流程通常包含以下几个步骤:
- 设置可拖拽目标.设置属性
draggable="true"
实现元素的可拖拽. - 监听
dragstart
设置拖拽数据 - 设置允许的拖放效果,如
copy
,move
,link
- 设置拖放目标,默认情况下浏览器阻止所有的拖放操作,所以需要监听
dragenter
或者dragover
取消浏览器默认行为使元素可拖放. - 监听
drop
事件执行所需操作
拖拽事件周期中会初始化一个DataTransfer
对象,用于保存拖拽数据和交互信息.以下是它的属性和方法.
setData(format, data)
: 以键值对设置数据,format通常为数据格式,如text
,text/html
getData(format)
: 获取设置的对应格式数据,format与setData()中一致
实例代码:
//监听dragstart设置拖拽数据
on(contain, 'dragstart', function (e) {
var target = getTarget(e); if (target.tagName.toLowerCase() == "img") {
e.dataTransfer.setData('id', e.target.id);
}
}); on(contain, 'drop', function (ev) {
var target = getTarget(ev);
//交换图片
if (target.tagName.toLowerCase() == "img") {
var originObj = document.getElementById(ev.dataTransfer.getData('id'));
var cache = {
'src': originObj.src,
'id': originObj.id
};
var endObj = ev.target.querySelector('img') || ev.target; originObj.src = endObj.src;
originObj.id = endObj.id;
endObj.src = cache.src;
endObj.id = cache.id; if (originObj.id != endObj.id) {
self.changestep();
} self.isSuccess();
}
}); //取消浏览器默认行为使元素可拖放.
on(contain, 'dragover', function (ev) {
ev.preventDefault();
});
核心代码和思路就是上面这些,其实整个流程走下来还是蛮简单的
有兴趣的可以上我的github ,欢迎fork~star~
canvas drag 实现拖拽拼图小游戏的更多相关文章
- 拼图 canvas分割 dom拖拽 pc 移动端
参考:Canvas drag 实现拖拽拼图小游戏 参考的案例,不支持手机端.总结下实现过程中遇到的小坑. gitHub:https://github.com/WppFrontEnd/puzzle 大概 ...
- 使用NGUI实现拖拽功能(拼图小游戏)
上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...
- 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 打造专属自己的html5拼图小游戏
最近公司刚好有个活动是要做一版 html5的拼图小游戏,于是自己心血来潮,自己先实现了一把,也算是尝尝鲜了.下面就把大体的思路介绍一下,希望大家都可以做出一款属于自己的拼图小游戏,必须是更炫酷,更好玩 ...
- JavaScript版拼图小游戏
慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...
- jQuery实现拼图小游戏
小熊维尼拼图 2017-07-23 ...
- jQuery拼图小游戏
jQuery拼图小游戏 最后样式 核心代码部分 <script type="text/javascript" > $(function () { $("td& ...
- 在HTML页面中有jQuery实现实现拼图小游戏
1.用jQuery实现拼图小游戏 2.首先获得td的点击事件.再进行交换位置 3.下面这种仅供参考 4.下面这些是HTMl标签 当这个世界变得越来越复杂的时候,内心最需保持一份简单一份纯真:
- atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结
atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结 1. DND的操作流程 1 2. Html5 注 ...
随机推荐
- druid连接池异常
在从excel导入10W条数据到mysql中时,运行一段时间就会抛这个异常,连接池问题 org.springframework.transaction.CannotCreateTransactionE ...
- CSS之旅——第二站 如何更深入的理解各种选择器
上篇我们说了为什么要使用css,这篇我们就从选择器说起,大家都知道浏览器会把远端过来的html解析成dom模型,有了dom模型,html就变成 了xml格式,否则的话就是一堆“杂乱无章”的string ...
- MySQL的Explain命令
Explain命令是查看查询优化器如何决定执行查询的主要办法. 调用 EXPLAIN 要使用EXPLAIN,只需在查询中的SELECT关键字之前增加EXPLAIN.MySQL会在查询上设置一个 ...
- Linux 开机自启动脚本详解
以kibana为例 以下为skibana名称的脚本内容 #!/bin/bash #chkconfig: 2345 80 90 #description:kibana kibana=" ...
- 不错的flash,动漫,小插件小集
(来源:http://abowman.com/google-modules/) embed code <object width="220" height="166 ...
- eclipse 启动报错\workspace\.metadata\.log
eclipse启动报错,让查看.metadata\.log日志 eclipse启动不了,让查看.metadata\.log日志,上面为日志中的错误提示. 解决办法:删除 .metadata\.plug ...
- Confluence自启动脚本
由于confluence用rc.local是无法自启动的,所以这里附上confluence的启动脚本 将以下脚本拷贝到/etc/init.d/confluenced # cd /etc/init.d/ ...
- TCMalloc 安装和使用
前面三篇译文<TCMalloc:线程缓冲的Malloc>.<使用TCMalloc的堆栈检查>.<使用TCMalloc进行堆栈分析>介绍了TCMalloc的基本原理, ...
- 让CKEditor支持FLV视频播放
平时都是做C/S开发,最近需要维护一个协会门户网站. 文章编辑使用CKEditor 3.3.2 + ckfinder 2.0的方案.可是这种方案居然不支持FLV视频播放,度娘说以前的老版本是支持的,这 ...
- SVN服务器&客户端的搭建和使用
目录结构: 1. SVN服务器搭建和使用-VisualSVNServer 2. SVN客户端安装和使用-TortoiseSVN 3. TortoiseSVN使用方法 SVN简介 SVN是Subvers ...