数智资源网
首页 首页 网络知识 查看内容

原生javascript制作的拼图游戏实现方法详解

木马童年 2020-3-3 15:27 183 0

本文实例讲述了原生javascript制作的拼图游戏实现方法。分享给大家供大家参考,具体如下:实现方法//1、让所有的li(在ul里)可以拖拽//2、交换li的位置 计算背景图位置//1、让所有的li(在ul里)可以拖拽//根据鼠标 ...

本文实例讲述了原生javascript制作的拼图游戏实现方法。分享给大家供大家参考,具体如下:

实现方法

//1、让所有的li(在ul里)可以拖拽

//2、交换li的位置  计算背景图位置

//1、让所有的li(在ul里)可以拖拽

//根据鼠标的位置,计算目标li的序号

//根据行号和列号计算下标

//行号*3+列号

//2、归位

此处没有背景图  请自行添加 css样式

这个是这连个js连接的代码

  //csstools  //功能:获取某个DOM元素的样式属性的兼容性写法  //参数:dom元素,样式属性名  //返回值:样式属性的值  function getStyle(domObj,attr){    if(domObj.currentStyle){//domObj.currentStyle如果能够正确获取到,那就真      return domObj.currentStyle[attr];//当对象的属性名是变量时,用方括号而不是点。    }else{      return window.getComputedStyle(domObj)[attr];    }    }

  //eventTools  //功能:阻止浏览器默认行为的封装  //参数:事件对象  //返回值:无  function preventDefault1809(evt) {    if(evt.returnValue){      evt.returnValue = false;    }else{      evt.preventDefault();    }  }  //功能:绑定事件  //参数:    //事件源    //事件类型名,不带on    //事件处理函数,    //是否冒泡  //返回值:无  function addEvent1809(domObj,eventType,func,isBubble){    if(domObj.addEventListener){      domObj.addEventListener(eventType,func,isBubble);    }else if(domObj.attachEvent){      domObj.attachEvent('on'+eventType,func);    }else{      domObj['on'+eventType] = func;    }  }  //当对象的属性是变量时,不能用点,只能用方括号  /*  var obj = {    id:'007'  }  obj.id;  var temp = "id";  obj[temp]  */

js部分

PS:这里给大家推荐一款相似的在线工具供大家参考:

在线美女拼图游戏:

http://tools.jb51.net/games/pintu

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数学运算用法总结》、《javaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

数据结构 互联网
0