html之按下鼠标移动div块（拼图游戏）（原生html+css+js）

时间之城

已于 2023-03-31 01:26:40 修改

阅读量2k

点赞数 1

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

于 2022-05-06 11:07:44 首次发布

本文链接：https://blog.csdn.net/qq_37978057/article/details/124603940

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html记录之按下鼠标移动div块（拼图游戏）（原生html+css+js）

为了防止本地代码丢失，仅以此文作为记录，也分享出来给大家。（毕竟一点一点代码辛辛苦苦打出来的，不忍心放在文件夹发霉，虽然已经发霉很久了。。。）

作为一个不纯粹的前端，什么var、const、let之类的，我就不区分了，代码没那么规范，毕竟自己玩玩，如果有兄弟觉得有什么意见建议，也可以留言我修改，大家一起学习进步。

话不多说，上代码，如下：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="hwq">
        <title>按下鼠标移动div块（拼图游戏）</title>
        <style>
            body{
                background: #eee;
            }
            *{
                box-sizing: border-box;
            }
            #menu{
                display: block;
                height: 18px;
            }
            #content{
                width: 722px;
                height: 542px;
                border: 1px solid rebeccapurple;
                margin: 0px auto;
                position: relative;
            }
            .ball{
                position:absolute;
            }
            .rectangle{
                position: absolute;
            }
            #setting{
                position: absolute;
                left: 300px;
                top: 0;
            }
            #difficulty{
                position: absolute;
                left: 200px;
                top: 0px;
            }
            #reStart{
                position: absolute;
                left: 380px;
                top: 0px;
            }
			#congratulation{
                position: absolute;
                left: 500px;
                top: 0px;
				color: red;
			}
        </style>
    </head>
    <body>
        <div id="menu">
            <select id="difficulty">
                <option value="1" selected="selected">简单</option>
                <option value="2">普通</option>
                <option value="3">困难</option>
                <option value="4">极度困难</option>
                <option value="5">噩梦</option>
            </select>
            <button id="setting">设置</button>
            <button id="reStart">重新开始</button>
			<div id="congratulation">恭喜过关！</div>
        </div>
        <div id="content">
            
        </div>
        <script>
            var content;
            var setting;
			var reStart;
            var difficulty;
			var congratulation;
            var isMouseDown = false;
            var moveTarget;//鼠标位移变量
            var array = new Array();
            var array2 = new Array();
            //var offsetLeft;
            //var offsetTop;
            var columns;//有几列，即每行分割数（即x方向数量）
            var rows;//有几行，即每列分割数（即y方向数量）
            var width;//方块宽度
            var height;//方块高度
            var successFlag;

            init();
            function init(){
                content = document.getElementById("content");
                setting = document.getElementById("setting");
                reStart = document.getElementById("reStart");
                difficulty = document.getElementById("difficulty");
                congratulation = document.getElementById("congratulation");
                setDifficulty(difficulty.options[difficulty.selectedIndex].value);//设置初始难度
                width = 720/columns;
                height = 540/rows;
                successFlag = false;
                initArray();//初始化数组（数组内容为数量的位置，比如第一行第一块就是11，第一行第二块就是12，第二行第一块就是21）
                for(var i=0;i<columns;i++){
                    for(var j=0;j<rows;j++){
                        var x = randomNumber(array.length,1);//随机取得数组下标
                        var y = array[x];//获取该下标数组内容（如随机到数组下标x是0，则y是1-1）
                        if(x != array[array.length-1]){//数组内容不为最后一个与最后一个交换（为移除元素做准备）
                            array[x] = array[array.length-1];
                            array[array.length-1] = y;
                        }
                        array.pop();//移除最后一个数组元素，并减少长度1
                        //修改了p和q的取值方式和id，id采用'-'拼接行数和列数，否则当行数量和列数量任意一个大于等于10的时候，取值错误
                        // var p = y.substring(0,1);//如y是12，则p是1
                        // var q = y.substring(1,2);//如y是12，则q是2
                        var arr = y.split("-");
                        var p = arr[0];
                        var q = arr[1];
						//初始化拼图方块
                        //var color = "rgb(" + randomNumber(256,1) + "," + randomNumber(256,1) + "," + randomNumber(256,1) + ")";
                        var div = createRectangle(width*p, height*q, width, height, "rectangle"+i+j);
                        div.style.backgroundPositionX = -1 * width * i + "px";//图片精灵
                        div.style.backgroundPositionY = -1 * height * j + "px";
                        if(p == i && q == j){//说明此位置是正确的，正确位置计数+1
                            pushArray(y);
                        }
                        div.addEventListener("mousedown", move, false);
                    }
                }
				//如果简单模式初始化位置全是对的，则重新初始化，其他模式没判断，因为基本不可能，如果要判断就直接columns*rows
                //console.log(array2);
                if(array2.length == 12){
                    removeAttributes();
                    init();
                }
				congratulation.style.display = "none";//隐藏过关成功div
            }
			
			//重新开始和设置按钮绑定事件
            setting.addEventListener("click", reSet, false);
            function reSet(){
                successFlag = false;
                array2 = [];
                init();
            }
            reStart.addEventListener("click", reSet, false);

            //创建长方形，默认id和class设置为rectangle，返回该div，方便后续修改需要的属性
            function createRectangle(x,y,width,height,id){//参数为：左上角x，左上角y，长度，宽度（高度），id
                var div = document.createElement("div");//创建div容器（创建dom）
                div.id = id;//赋值，id命名
                div.setAttribute("class","rectangle");//通用身体样式
                div.style.left = x + "px";//设置坐标
                div.style.top = y + "px";
                div.style.width = width + "px";//设置大小
                div.style.height = height + "px";
                //div.style.backgroundImage = "url('../图片/shu2.jpg')";
                div.style.backgroundImage = "url('shu2.jpg')";
                div.style.backgroundSize = 100 * columns + "% " + 100 * rows + "%";
                div.style.backgroundRepeat = "no-repeat";
                document.getElementById("content").appendChild(div);//把创建的div加入容器
                return div;
            }
            //创建圆形，默认id和class设置为ball，返回该div，方便后续修改需要的属性
            // function createBall(x,y,size,id){//参数为：左上角x，左上角y，大小，id
            //     var div = document.createElement("div");//创建div容器（创建dom）
            //     div.id = id;//赋值，id命名
            //     div.setAttribute("class","ball");//通用身体样式
            //     div.style.left = x + "px";//设置坐标
            //     div.style.top = y + "px";
            //     div.style.width = size + "px";//设置大小
            //     div.style.height = size + "px";
            //     div.style.borderRadius = 50 + "%";//设置为圆
            //     document.getElementById("content").appendChild(div);//把创建的div加入容器
            //     return div;
            // }
            //随机数函数，参数为随机大小范围以及放大倍数
            function randomNumber(i,size){
                return Math.floor(Math.random()*i)*size;
            }
			//此处绑定在拼图div上，鼠标按下点住拼图div方块的时候会有位移变量（拿到位移的xy距离）
            function move(e){
                if(successFlag){
                    return;
                }
                e = e || window.event;
                isMouseDown = true;
                var target = e.currentTarget;
                if(isMouseDown){
                    moveTarget = target;
                }
                console.log(isMouseDown);
            }
			//鼠标弹起控制
            window.onmouseup = function(e){
                if(successFlag){
                    return;
                }
                e = e || window.event;
                var target = e.target;
                if(target.id.substring(0, 9) != "rectangle"){//不是方块则不做位移判断，防止误点其他元素
                    return;
                }
                isMouseDown = false;
                if(!isMouseDown){
                    moveTarget = null;
                }
				//调用坐标自适应方法，方便对齐
                coordinateAdaptive(target);
                if(array2.length == rows*columns){
                    console.log("恭喜过关！");
                    successFlag = true;
                    array2 = [];
                    //alert("恭喜过关！");
					congratulation.style.display = "block";
                }
                console.log(isMouseDown);
            }
			//鼠标移动控制（将拼图div同步移动）
            window.onmousemove = function(e){
                if(successFlag){
                    return;
                }
                e = e || window.event;
                var target = moveTarget;
                if(isMouseDown && target != null){
                    target.style.zIndex = 10;
                    var moveX = e.movementX;
                    var moveY = e.movementY;
                    target.style.left = target.offsetLeft + moveX;
                    target.style.top = target.offsetTop + moveY;
                    target.zIndex = 0;
                }else{
                    return;
                }
            }
            //坐标自适应（要将坐标完全对齐难度比较大）
            function coordinateAdaptive(target){
                var x = target.offsetLeft;
                var y = target.offsetTop;
                var id = target.id;
                var isThere = false;
                if(x < -1*width || y< -1*height){
                    return;
                }
                isThere = findInArray(array2,id.substring(9,11));//是否包含在已对齐的数组里面
                for(var i=0;i<columns;i++){
                    for(var j=0;j<rows;j++){
                        if(Math.abs(x-width*i) < width/4 && Math.abs(y-height*j) < height/4){//当坐标小于点1/4距离的时候自动对齐
                            target.style.left = width*i;
                            target.style.top = height*j;
                            if("rectangle" + i + j == id){//如果位置正确
                                pushArray("" + i + "-" + j);//记录正确位置
                                //console.log(array2);
                            }else{
                                removeArray("" + i + "-" + j);
                                //console.log(array2);
                            }
                            return;//避免不必要的循环
                        }else{//没有自动对齐移除内容（可能出现对齐的元素又移开变成不对齐）
                            if(isThere){
                                removeArray(id.substring(9,id.length));
                                isThere = false;
                            }
                        }
                    }
                }
            }
            //传入元素检验，通过则加入数组
            function pushArray(y){
                for(var i=0;i<array2.length;i++){
                    if(array2[i] == y){
                        return;
                    }
                }
                array2.push(y);
            }
            //删除数组元素
            function removeArray(x){
                for(var i=0;i<array2.length;i++){
                    if(array2[i] == x){
                        array2.splice(i,1);
                    }
                }
            }
			//在一个数组里面查找是否包含该元素
            function findInArray(arrayX, obj){
                for(var i=0;i<arrayX.length;i++){
                    if(arrayX[i] == obj){
                        return true;
                    }
                }
                return false;
            }
            //数组初始化
            function initArray(){//用于随机位置
                for(var i=0;i<columns;i++){
                    for(var j=0;j<rows;j++){
                        array.push(""+ i + "-" + j);
                    }
                }
            }
            //设置难度
            function setDifficulty(value){
                content.innerHTML = "";
                if(value == 1){//简单
                    columns = 4,
                    rows = 3;
                }else if(value == 2){//普通
                    columns = 5,
                    rows = 4;
                }else if(value == 3){//困难
                    columns = 6,
                    rows = 5;
                }else if(value == 4){//极度困难
                    columns = 8,
                    rows = 6;
                }else{//噩梦
                    columns = 10,
                    rows = 8;
                }
            }
        </script>
    </body>
</html>

代码备注不少，可能是开发的习惯，不习惯的可以删了。

上面用到的图片，我本地是这样的（兄弟们自己找图，我也是百度找的，感觉挺好看的，修改的时候大家搜索shu2.jpg直接修改自己的就行）：
在这里插入图片描述
我自己玩的时候好像出现过一次计数不正常的情况，也不知道是图片问题导致空白块没对好，还是说计数有问题，因为就一次，我又没在意，结果后面没出现过了。大家有发现了可以跟我说一下，先感谢！