2021-03-14

最新推荐文章于 2024-03-10 23:32:57 发布

星辰jm

最新推荐文章于 2024-03-10 23:32:57 发布

阅读量166

点赞数

分类专栏：前端文章标签： js css html

本文链接：https://blog.csdn.net/jm5454986/article/details/114800792

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

js实现拼图小游戏

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        div {
            margin: 0;
            padding: 0;
        }
        #box {
            width: 800px;
            height: 800px;
            background-color: salmon;
            position: relative;
        }

        #box div {
            width: 200px;
            height: 200px;
            background: url(./bg\ .jpg) no-repeat;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>
    <script>
        // 获取box盒子的id
        var box = document.getElementById("box");
        // 声明一个存放定位信息的数组
        var picImg = [];
        // 循环16个对象并且添加到数组里
        for (var i = 0; i < 4; i++) {
            for (var j = 0; j < 4; j++) {
                // 创建box盒子里的16个小div
                var divNode = document.createElement('div');
                // 添加小div内容
                divNode.style.left = 200 * i + 'px';
                divNode.style.top = 200 * j + 'px';
                // 创建对象
                var obj = {
                    left: 200 * i,
                    top: 200 * j
                }
                // console.log(obj);
                // 将创建好的对象放到数组里
                if (i != 3 || j != 3) {
                    picImg.push(obj);
                } else {
                    divNode.style.background = 'none';
                    divNode.className = 'space';
                }
                // 显示子节点
                box.appendChild(divNode);
            }

        }
        console.log(picImg);
        // 随机抽取对象，将left、top添加到小div的background-position中
        // 循环15个小div
        for (var i = 0; i < 15; i++) {
            // 获取随机下标数
            var ranNum = parseInt(Math.random() * (15 - i));
            // console.log(ranNum);
            var x = picImg[ranNum].left;
            var y = picImg[ranNum].top;
            box.children[i].style.backgroundPosition = -x + 'px ' + -y + 'px';
            // 将抽取过的那个数据从数组中删除
            picImg.splice(ranNum, 1);
        }
        // 键盘事件
        document.onkeyup = function (evet) {
            // 获取键的值
            var key = event.keyCode;
            // console.log(key);
            if (key == 37) {//左
                // 如果按键左被按下
                // 获取空白的left、top
                var x = box.querySelector('.space').style.left;
                var y = box.querySelector('.space').style.top;
                // 遍历全部小div，找到空白右边的那张 赋值为top = y;
                for (var i = 0; i < 16; i++) {
                    if (parseInt(box.children[i].style.left) == parseInt(x) + 200 && parseInt(box.children[i].style.top) == parseInt(y)) {
                        // 精准找到交换位置的div元素
                        box.children[i].style.left = x;
                        // 空白上移动
                        box.querySelector('.space').style.left = parseInt(x) + 200 + 'px';
                    }
                }

            } else if (key == 38) {//上
                // 如果按键上被按下
                // 获取空白的left、top
                var x = box.querySelector('.space').style.left;
                var y = box.querySelector('.space').style.top;
                // 遍历全部小div，找到空白下边的那张 赋值为top = y;
                for (var i = 0; i < 16; i++) {
                    if (parseInt(box.children[i].style.top) == parseInt(y) + 200 && parseInt(box.children[i].style.left) == parseInt(x)) {
                        // 精准找到交换位置的div元素
                        box.children[i].style.top = y;
                        // 空白上移动
                        box.querySelector('.space').style.top = parseInt(y) + 200 + 'px';
                    }
                }

            } else if (key == 39) {//右
                // 如果按键右被按下
                // 获取空白的left、top
                var x = box.querySelector('.space').style.left;
                var y = box.querySelector('.space').style.top;
                // 遍历全部小div，找到空白左边的那张 赋值为top = y;
                for (var i = 0; i < 16; i++) {
                    if (parseInt(box.children[i].style.left) == parseInt(x) - 200 && parseInt(box.children[i].style.top) == parseInt(y)) {
                        // 精准找到交换位置的div元素
                        box.children[i].style.left = x;
                        // 空白上移动
                        box.querySelector('.space').style.left = parseInt(x) - 200 + 'px';
                    }
                }
            } else if (key == 40) {
                // 如果按键下被按下
                // 获取空白的left、top
                var x = box.querySelector('.space').style.left;
                var y = box.querySelector('.space').style.top;
                // 遍历全部小div，找到空白上边的那张 赋值为top = y;
                for (var i = 0; i < 16; i++) {
                    if (parseInt(box.children[i].style.top) == parseInt(y) - 200 && parseInt(box.children[i].style.left) == parseInt(x)) {
                        // 精准找到交换位置的div元素
                        box.children[i].style.top = y;
                        // 空白上移动
                        box.querySelector('.space').style.top = parseInt(y) - 200 + 'px';
                    }
                }
            }

        }
    </script>
</body>

</html>