js实现拖拽拼图游戏

本文实例为大家分享了js实现拖拽拼图游戏的具体代码,供大家参考,具体内容如下

该游戏主要使用了一些拖拽事件,以及对数据传递的应用,直接上代码,感兴趣的可以参考

html:代码

<div class="box">
        <div id="d1" class="d1"></div>
        <div id="d2" class="d1"></div>
        <div id="d3" class="d1"></div>
        <div id="d4" class="d1"></div>
        <div id="d5" class="d1"></div>
        <div id="d6" class="d1"></div>
        <div id="d7" class="d1"></div>
        <div id="d8" class="d1"></div>
        <div id="d9" class="d1"></div>

    </div>
    <div id="but">
        <button id="but1">一键完成</button>
        <button id="but2">开始游戏</button>
        <button id="but3">看一眼原图</button>
        <div>
            <img id="yan" src="../../图片/2222.jpg" alt="">
        </div>
</div>

css代码:

* {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 312px;
            height: 312px;
            border: 3px solid #000;
            margin: 50px auto 5px;
            font-size: 0;
        }

        .box div {
            width: 100px;
            height: 100px;
            display: inline-block;
            border: 2px solid #000;
        }

        .d1 {
            background-image: url(../../图片/2222.jpg);
            background-size: 300px 300px;
            background-position: 0px 0px;
        }

        #but {
            border: 1px solid #000 transparent;
            width: 300px;
            height: 30px;
            margin: 0 auto;
        }

        #but img {
            width: 100px;
            height: 100px;
            float: right;
            display: none;
        }

        button {
            margin: 1px auto;
            border: 1px solid #000;
        }

js代码:

var data = [['0 0'], ['-100px 0'], ['-200px 0'], ['0 -100px'], ['-100px -100px'], ['-200px -100px'], ['0 -200px'], ['-100px -200px'], ['-200px -200px']]

        var but1 = document.getElementById("but1")
        var but2 = document.getElementById("but2")
        var but3 = document.getElementById("but3")
        var yan = document.getElementById("yan")
        var divs = document.querySelectorAll(".d1")

        // 刚打开保持完整
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.backgroundPosition = data[i][0]
        }
        // 一键完成
        but1.addEventListener("click", function () {
            for (var i = 0; i < divs.length; i++) {
                divs[i].style.backgroundPosition = data[i][0]
            }
        })
        // 开始游戏
        but2.addEventListener("click", function () {
var arr = [];
            var maxTimes = 9
            do {
                var num = Math.floor(Math.random() * 9);
                if (-1 == arr.indexOf(num)) {
                    arr.push(num);
                    maxTimes--;
                }
            } while (maxTimes);
            for (var i = 0; i < divs.length; i++) {
                const k = arr[i]
                divs[k].style.backgroundPosition = data[i][0]
            }
        })
        // 看一眼原图
        but3.addEventListener("mousedown", function () {
            yan.style.display = "block"
        })
        but3.addEventListener("mouseup", function () {
            yan.style.display = "none"
        })
        divs.forEach(function (v, i) {
            v.draggable = "true"
            //开始拖拽的时候触发事件
            v.addEventListener("dragstart", function (e) {
                // console.log('666');
                e.dataTransfer.setData("newdivID",e.target.getAttribute("id"))
                e.dataTransfer.setData("newdiv",e.target.style.backgroundPosition)
            })

             // 拖拽松开的时候触发事件
            v.addEventListener("drop",function (e) {
                e.stopPropagation()
                e.preventDefault()

                var oldDiv = document.querySelector("#"+e.dataTransfer.getData('newdivID'))//取出并保存开始拖拽的div的id属性的div
                var pos=e.dataTransfer.getData("newdiv") // 取出并保存开始拖拽的div的backgroundPosition属性
                oldDiv.style.backgroundPosition=e.target.style.backgroundPosition//把准备松开到的div的backgroundPosition属性值传递给取出的那个旧div
                e.target.style.backgroundPosition=pos// 把取出的那个旧div的backgroundPosition属性值传递给当前准备松开到的div
            })
            v.addEventListener("dragover",function(e){
                e.preventDefault()
            })
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JS实现简易的图片拖拽排序实例代码

    由HTML5的拖放API,实现的简易图片拖放效果. 一.HTML5拖放API的知识点 首先我们得知道元素怎么才可以被拖放,需要设置它们的draggable属性,其中img和a标签的dragable属性默认是true,不需要我们手动设置. 拖放API的监听事件如下: dragstart: 源对象拖拽开始: drag: 源对象拖拽的过程中: dragend: 源对象拖拽结束: dragenter: 进入过程对象区域; dragover: 在过程对象区域内移动: dragleave: 离开过程对象区域

  • JavaScript实现图片的放大缩小及拖拽功能示例

    本文实例讲述了JavaScript实现图片的放大缩小及拖拽功能.分享给大家供大家参考,具体如下: 实现效果如下: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{width:400px;height:400px;overflow:

  • JS HTML5拖拽上传图片预览

    1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取

  • js实现拖拽上传图片功能

    直接把本地图片拉到你设定的图片上传成功后的位置,就ok了,具体代码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>标题</title> <meta name="keywords" content=""> <meta name="description" cont

  • js实现使用鼠标拖拽切换图片的方法

    本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan

  • js实现图片放大和拖拽特效代码分享

    本文实例讲述了js实现图片放大和拖拽特效代码.分享给大家供大家参考.具体如下: js实现图片放大和拖拽特效是一款非常实用的js特效,实现了图片的放大和拖拽功能,没用用到jquery插件,是用原生javascript实现的,除了点击放大和缩小按钮来控制图片的放大缩小,还可以使用鼠标的滚轮控制图片的缩放. 运行效果图:                               ----------------------查看效果 源码下载----------------------- 小提示:浏览

  • 原生JS实现拖拽图片效果

    本文实例为大家讲解了JS实现拖拽图片效果的详细代码,分享给大家供大家参考,具体内容如下 javascript event 对象的clientX,offsetX,screenX,pageX的区别: 用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用, css样式如下: #div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: a

  • js实现本地图片文件拖拽效果

    如何拖拽文件到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上代码 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #dropBox{ width: 300px; height:

  • 原生JS使用Canvas实现拖拽式绘图功能

    一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方js库和插件 3.多图形绘制(支持画笔.线条.箭头.三角形.矩形.平行四边形.梯形以及多边形和圆形绘制) 4.拖拽式绘制(鼠标移动过程中不断进行canvas重绘) 5.图片绘制(作为背景图片时重绘会发生闪烁现象,暂时有点问题,后面继续完善) 5.清空绘制功能 6.新版本优化绘制性能(使用共享坐标变量数

  • js css3实现图片拖拽效果

    本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ text-align: center; } .container{ display: flex; just

随机推荐