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


Posted in Javascript onFebruary 23, 2020

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

实现方法

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

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

//1、让所有的li(在ul里)可以拖拽
//根据鼠标的位置,计算目标li的序号

//根据行号和列号计算下标
//行号*3+列号
//2、归位

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      html,body{
        margin:0;
        padding:0;
      }
      #box{
        list-style:none;
        position:relative;
        width:600px;
        height:600px;
        box-sizing:border-box;
        margin:10px auto;
      }
      li{
        position:absolute;
        width:200px;
        height:200px;
        border:1px solid white;
        background-image:url(img/b1.jpg);
        background-size:600px 600px;
      }
      #box li:nth-child(1){
        left:0px;
        top:0px;
        background-position:0px 0px;
      }
      #box li:nth-child(2){
        left:200px;
        top:0px;
        background-position:-200px 0px;
      }
      #box li:nth-child(3){
        left:400px;
        top:0px;
        background-position:-400px 0px;
      }
      
      #box li:nth-child(4){
        left:0px;
        top:200px;
        background-position:0px -200px;
      }
      #box li:nth-child(5){
        left:200px;
        top:200px;
        background-position:-200px -200px;
      }
      #box li:nth-child(6){
        left:400px;
        top:200px;
        background-position:-400px -200px;
      }
      
      #box li:nth-child(7){
        left:0px;
        top:400px;
        background-position:0px -400px;
      }
      #box li:nth-child(8){
        left:200px;
        top:400px;
        background-position:-200px -400px;
      }
      #box li:nth-child(9){
        left:400px;
        top:400px;
        background-position:-400px -400px;
      }
      
    </style>
  </head>
  <body>
    <ul id="box">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>
<script type="text/javascript" src="js/cssTools.js"></script>
<script type="text/javascript" src="js/eventTools.js"></script>

这个是这连个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部分

<script type="text/javascript">
function $(id){
  return document.getElementById(id);
}
window.onload = function(){  
  drag();
}
//1、让所有的li(在ul里)可以拖拽
function drag(){
  var lis = $("box").children;
  var currIndex = -1;//记录被按下的那个li
  var targetIndex = -1;
  for(var i=0;i<lis.length;i++){
    lis[i].setAttribute("index",i);
    lis[i].onmousedown = function(event){
      currIndex = this.getAttribute("index");
      var evt = event || window.event;
      var offsetX = evt.offsetX;
      var offsetY = evt.offsetY;
      this.style.zIndex = 1;
      var liDom = this;
      $("box").onmousemove = function(event){
        var evt = event || window.event;
        //1、数据距离大盒子左上角的距离
        var mouseX = evt.pageX-$("box").offsetLeft; 
        var mouseY = evt.pageY-$("box").offsetTop; 
        //鼠标距离页面左边的距离- 大盒子距离页面左边的距离-鼠标距离事件源的左边距离
        var left1 = mouseX-offsetX;
        var top1 = mouseY-offsetY;
        //li不能拖拽到界外(大盒子外面)
        if(left1<0 || left1>600-200 || top1<0 || top1>600-200 ){
          return;
        }
        
        liDom.style.left = left1+"px";
        liDom.style.top = top1+"px";
        targetIndex = getTargetIndex(mouseX,mouseY);
        console.log(targetIndex);
      }
    }
    document.body.onmouseup = function(){
      $("box").onmousemove = null;
      if(currIndex>-1){
        lis[currIndex].style.zIndex = 0;
        exchangeLi(currIndex,targetIndex);
      }
    }
  }
}
//根据鼠标的位置,计算目标li的序号
function getTargetIndex(x,y){
  //计算行号
  var rowIndex = parseInt(y/200);//
  //计算列号
  var colIndex = parseInt(x/200);//
  //根据行号和列号计算下标
  //行号*3+列号
  return rowIndex*3+colIndex;
}
function exchangeLi(sourceIndex,targetIndex){
  // var lis = $("box").children;
  // if(sourceIndex<-1 || sourceIndex>lis.length-1 || targetIndex<-1 || targetIndex>lis.length-1){
  //   return;
  // }
  if(sourceIndex!=targetIndex){
     var lis = $("box").children;
     //1、交换backgroundPosition
     var temp =getStyle(lis[sourceIndex],"backgroundPosition");
     lis[sourceIndex].style.backgroundPosition = getStyle(lis[targetIndex],"backgroundPosition");
     lis[targetIndex].style.backgroundPosition = temp;
  }
   //2、归位
   rowIndex = parseInt(sourceIndex/3);
   colIndex = sourceIndex%3;
   lis[sourceIndex].style.left = colIndex*200+"px";
   lis[sourceIndex].style.top = rowIndex*200+"px";
}
</script>
Javascript 相关文章推荐
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 #Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 #Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 #Javascript
原生javascript单例模式的应用实例分析
Feb 23 #Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 #Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 #Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 #Javascript
You might like
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
python中spy++的使用超详细教程
2021/01/29 Python
斯福泰克软件测试面试题
2015/02/16 面试题
初二学生评语大全
2014/12/26 职场文书
施工员岗位职责范本
2015/04/11 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
退休欢送会主持词
2015/07/01 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
HTML中的表格元素介绍
2022/02/28 HTML / CSS