效果图
touchstart
- 获取当前触摸位置的坐标(x,y);
- 记录触摸点下view的各项坐标值;
- 记录触摸点下view的起点坐标,背景坐标,以及触摸点的坐标;
- 设置拖拽view为显示状态、设置起始坐标以及背景坐标为记录对应个坐标。
1 | page.onTouchStart = function(e){ |
touchmove
- 记录移动触摸点的当前坐标;
- 计算当前触摸点和起始触摸点的差距坐标;
- 记录当前触摸点下的view的各项坐标对象;
- 设置拖拽view的移动坐标,记住此处不改变背景坐标。
1 | page.onTouchMove = function(e){ |
touchend
- 切换背景坐标,将最后触摸点下view的背景坐标切换为开始触摸点下view的背景坐标;
- 设置拖拽view为隐藏、定位坐标和背景坐标还原为0;
- 将记录全局的起始触点坐标、起始view定位坐标、起始view背景坐标的变量全部还原为0;
- 判断是否图片还原;
- 提醒玩家闯关成功,是否继续下一关;
- 是则type++,游戏初始化init,
- 否则返回上一页。
1 | page.onTouchEnd = function(e){ |
判断是否拼图成功
通过 JSON.stringify 方法将 this.typeArr 和 this.newTypeArr 转化比较,判断是否拼图成功!
1 | checkWin(){ |