原生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 相关文章推荐
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
vue实现前端列表多条件筛选
Oct 26 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中文汉字验证码
2007/04/08 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
PHP 读取和编写 XML
2014/11/19 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
jquery动态添加删除div 具体实现
2013/07/20 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
python去掉字符串中重复字符的方法
2014/02/27 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
python如何删除列为空的行
2020/07/17 Python
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
运动会跳远广播稿
2014/02/04 职场文书
卫生安全检查制度
2014/02/04 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
作弊检讨书范文
2015/05/06 职场文书
新闻稿件写作范文
2015/07/18 职场文书
中学图书馆工作总结
2015/08/11 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js