JQuery 制作一个4x4的拼图游戏

VIP文章 csmzl

已于 2022-03-07 20:34:30 修改

阅读量4.3k

点赞数 1

分类专栏： JS和JQuery Web 文章标签： js jquery

于 2022-03-07 20:33:05 首次发布

本文链接：https://blog.csdn.net/csmzl/article/details/123338914

版权

JQuery 制作一个4x4的拼图游戏

效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
    .square {
        background-image: url(./images/qiaoba.jpg);
        width: 200px;
        height: 200px;       
    }

    /*利用background-position给每个div添加不同的图片；即16个div组成一幅完成的图片;*/
    #z-1 {
        background-position: 0px 0px;
    }

    #z-2 {
        background-position: -200px 0px;
    }

    #z-3 {
        background-position: -400px 0px;
    }

    #z-4 {
        background-position: -600px -0px;
    }

/*row 2*/
    #z-5 {
        background-position: 0 -200px;
    }

    #z-6 {
        background-position: -200px -200px;
    }

    #z-7 {
        background-position: -400px -200px;
    }

    #z-8 {
        background-position: -600px -200px;
    }

/*row 3*/
    #z-9 {
        background-position: 0px -400px;
    }

    #z-10 {
        background-position: -200px -400px;
    }

    #z-11 {
        background-position: -400px -400px;
    }

    #z-12 {
        background-position: -600px -400px;
    }

/*row 4*/
    #z-13 {
        background-position: 0px -600px;
    }

    #z-14 {
        background-position: -200px -600px;
    }

    #z-15 {
        background-position: -400px -600px;
    }

    #z-16 {
        background-position: -600px -600px;
    }

</style>
<script>
    var degreeOfDifficulty = 4;
    //完成两个图片拖拽后的互换;
    function over(e) {
        e.preventDefault();//阻止默认
    }
    //抓起
    function drag(e) {
        var id = e.target.id;
        // console.log(e.target.id);
        e.dataTransfer.setData("id", id);//设置传输的是被抓id；
    }
    //经过
    function drop(e) {
        var beizhuaId = e.dataTransfer.getData("id");//接受被抓id;
        // console.log(beizhuaId);//被抓ID
        var fangID = e.target.id;//所放位置的id;
        var beizhua = document.getElementById(beizhuaId);//获取被抓对象;
        var fang = document.getElementById(fangID);//获取放的对象；
        var f_beizhua = beizhua.parentNode;//分别找到对应的父节点
        var f_fang = fang.parentNode;
        //互换儿子
        f_beizhua.appendChild(fang);
        f_fang.append

最低0.47元/天解锁文章

csmzl

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
JQuery 制作一个4x4的拼图游戏

JQuery 制作一个4x4的拼图游戏效果图：代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-3.6.0.min.js"></script></head><style type=
复制链接

扫一扫