原生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)
Oct 01 Javascript
css配合jquery美化 select
Nov 29 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
初识ThinkPHP控制器
2016/04/07 PHP
php表单处理操作
2017/11/16 PHP
js下写一个事件队列操作函数
2010/07/19 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
vue-loader教程介绍
2017/06/14 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
Python列表append和+的区别浅析
2015/02/02 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
python DataFrame 取差集实例
2019/01/30 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
Django如何使用redis作为缓存
2020/05/21 Python
简单的Python人脸识别系统
2020/07/14 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
几个判断型的面试题
2012/07/03 面试题
百日安全活动总结
2014/05/04 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
用CSS3画一个爱心
2021/04/27 HTML / CSS
Python 发送SMTP邮件的简单教程
2021/06/24 Python
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js
从原生JavaScript到React深入理解
2022/07/23 Javascript