Canvas drag 实现拖拽拼图小游戏

博主一直心心念念想做一个小游戏~  前段时间终于做了一个小游戏,直到现在才来总结,哈哈~ 以后要勤奋点更新博客!

实现原理

1.如何切图?

用之前的方法就是使用photoshop将图片切成相应大小的图片。这种做法不灵活,如果要更换图片的话,就得重新去切图,很麻烦。

现在是使用canvas,图片是一整张jpg或者png,把图片导入到canvas画布,然后再调用上下文context的getImageData方法,把图片处理成小图,这些小图就作为拼图的基本单位

2.如何判断游戏是否结束?

在刚刚生成的小图上面添加自定义属性 , 后期在小图被移动后再一个个判断,如果顺序是对的,那么这张大图就拼接成功, 允许进入下一关;

3.如何实现小图片随机排列?

使用math.random

4.拖拽功能实现?

drag知识点补充站:

兼容性:IE9+,主流浏览器,移动端所有型号暂不支持

一个完整的drag and drop流程通常包含以下几个步骤:

  1. 设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽.
  2. 监听dragstart设置拖拽数据
  3. 设置允许的拖放效果,如copy,move,link
  4. 设置拖放目标,默认情况下浏览器阻止所有的拖放操作,所以需要监听dragenter或者dragover取消浏览器默认行为使元素可拖放.
  5. 监听drop事件执行所需操作

拖拽事件周期中会初始化一个DataTransfer对象,用于保存拖拽数据和交互信息.以下是它的属性和方法.

  • setData(format, data): 以键值对设置数据,format通常为数据格式,如text,text/html
  • getData(format): 获取设置的对应格式数据,format与setData()中一致

实例代码:

核心代码和思路就是上面这些,其实整个流程走下来还是蛮简单的

有兴趣的可以上我的github  ,欢迎fork~star~

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

1 6 收藏 4 评论

关于作者:陈被单

热爱前端,欢迎交流 个人主页 · 我的文章 · 19 ·   

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部