javascript实现数字拼图

最新推荐文章于 2021-07-03 19:44:32 发布

weixin_33755649

最新推荐文章于 2021-07-03 19:44:32 发布

阅读量256

点赞数

文章标签： javascript 前端 xhtml ViewUI

原文链接：http://www.cnblogs.com/zhangqibao/p/3148448.html

版权

运行结果

将下面代码全部拷到txt文件中，然后保存关闭，再把文件的后缀名改为（.htm），就ok了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>拼图</title>
    <style type="text/css">
        .input1
        {
            width:40px; height:40px; background-color:Blue; border:0 outset; font-size:large; color:White; text-align:center;
        }
        .input2
        {
            width:40px; height:40px; background-color:Gray; border:0 outset; font-size:large; color:White; text-align:center;
        }
    </style>
    <script type="text/javascript">
        var times = 0;
        var movesteps = 0;
        var interval = "";
        var start = false;
        var numbers = new Array();

        function move(num) {
            if (start == false) {
                alert('您还没有开始！');
                return;
            }
            if (stoped.value == "继续") {
                alert('请点击继续！');
                return;
            }
            var element = document.getElementsByName(num);
            if (element[0].value != "") {
                var clickinput_top = parseInt(element[0].style.top);
                var clickinput_left = parseInt(element[0].style.left);
                var fixed_top = parseInt(document.getElementById(selected.value*selected.value).style.top);
                var fixed_left = parseInt(document.getElementById(selected.value*selected.value).style.left);
                if (-45 <= clickinput_left - fixed_left && clickinput_left - fixed_left <= 45 && -45 <= clickinput_top - fixed_top && clickinput_top - fixed_top<=45) {
                    if (Math.abs( clickinput_left - fixed_left) != Math.abs( clickinput_top - fixed_top)) {
                        document.getElementById(selected.value*selected.value).style.backgroundColor = "Blue";
                        document.getElementById(selected.value*selected.value).value = element[0].value;
                        document.getElementById(selected.value*selected.value).id = element[0].id;
                        document.getElementsByName(num)[0].style.backgroundColor = "Gray";
                        document.getElementsByName(num)[0].value = "";
                        document.getElementsByName(num)[0].id = selected.value*selected.value;
                        movesteps = movesteps + 1;
                        movestep.innerText = movesteps;
                        if (iswin()) {
                            clearInterval(interval);
                            alert("YOU WIN!!");
                            start = false;
                            ischanged(selected.value);
                        }
                    }
                }
            }
        }

        function begin() {
            stoped.value = "暂停";
            start = true;
            times = 0;
            time.innerText = 0;
            movesteps = 0;
            movestep.innerText = 0;
            clearInterval(interval);
            
            for (var i = 0; i < selected.value * selected.value; i++) {
                numbers[i] = parseInt(i) + 1;
            }
            do {
                for (var i = 0; i < selected.value * selected.value; i++) {
                    var num = parseInt(Math.random() * (selected.value * selected.value - i));
                    var emp = numbers[selected.value * selected.value -1 - i];
                    numbers[selected.value * selected.value -1 - i] = numbers[num];
                    numbers[num] = emp;
                }
            } while (judge(numbers));
            for (var i =0 ; i < selected.value * selected.value; i++) {
                if (numbers[i] == selected.value * selected.value) {
                    document.getElementsByName(parseInt(i)+1)[0].value = "";
                    document.getElementsByName(parseInt(i) + 1)[0].id = selected.value * selected.value;
                    document.getElementsByName(parseInt(i) + 1)[0].style.backgroundColor = "Gray";
                }
                else {
                    document.getElementsByName(parseInt(i) + 1)[0].value = numbers[i];
                    document.getElementsByName(parseInt(i) + 1)[0].id = numbers[i];
                    document.getElementsByName(parseInt(i) + 1)[0].style.backgroundColor = "Blue";
                }
            }
            interval=( setInterval("settime()", 1000));
        }

        function judge(array) {
            var count = 0;
            for (var i = 0; i < selected.value * selected.value-1; i++) {
                for (var j = i+1; j < selected.value * selected.value; j++) {
                    if (parseInt(array[i]) > parseInt(array[j])) {
                        count = count + 1;
                    }
                }
            }
            for (var i = 0; i < selected.value * selected.value; i++) {
                if (array[i] == selected.value * selected.value) {
                    count = count + parseInt(i / 3) + 1 + i % 3 + 1;
                }
            }
            if (count % 2 == 0) {
                return false;
            }
            else {
                return true;
            }
        }

        function iswin() {
            for (var i = 1; i <= selected.value * selected.value; i++) { 
                var node=document.getElementById(i);
                if (node.id != node.name) {
                    return false;
                }
            }
            return true;
        }

        function ischanged() {
            var s = "";
            for (var i = 1; i < selected.value * selected.value; i++) {
                s = s + "<input id=" + i + " value=" + i + " name=" + i + " readonly='readonly' οnclick='move(" + i + ")' class='input1' style='position:absolute; top:" + ((parseInt((i - 1) / selected.value) + 1) * 5 + parseInt((i - 1) / selected.value) * 40) + "px; left:" + (((i - 1) % selected.value + 1) * 5 + (i - 1) % selected.value * 40) + "px;' />";
            }
            s = s + "<input id='" + selected.value * selected.value + "' value='' name='" + selected.value * selected.value + "' readonly='readonly' οnclick='move(" + selected.value * selected.value + ")' class='input2' style='position:absolute; top:" + (selected.value * 5 + (selected.value - 1) * 40) + "px; left:" + (selected.value * 5 + (selected.value - 1) * 40) + "px;' />";
            div2.innerHTML = s;
            div2.style.width = selected.value * 5 + (selected.value - 1) * 40 + 45 + 'px';
            div2.style.height = selected.value * 5 + (selected.value - 1) * 40 + 45 + 'px';
            div1.style.width = selected.value * 5 + (selected.value - 1) * 40 + 85 + 'px';
            div1.style.height = selected.value * 5 + (selected.value - 1) * 40 + 170 + 'px';
            times = 0;
            time.innerText = 0;
            movesteps = 0;
            movestep.innerText = 0;
            clearInterval(interval);
        }

        function settime() {
            times=times+1;
            time.innerText = times;
        }

        function stop() {
            if (start == false) {
                return;
            }
            if (stoped.value == "暂停") {
                stoped.value = "继续";
                clearInterval(interval);
            }
            else {
                stoped.value = "暂停";
                interval= setInterval("settime()", 1000);
            }

        }
    </script>
</head>
<body onload="ischanged()">
    <div id="div1" style="margin-left: auto;margin-right: auto;background-color:Aqua; border-style:solid; border-width:5px; border-color:Black;">
        <center>
        <div style=" border-bottom-style:solid; border-width:5px; border-bottom-color:Black;">
        <table>
            <tr>
                <td>难度：</td>
                <td>
                    <select id="selected" onchange="ischanged()" style="width:60px">
                        <option value="3" selected="selected">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                   <input type="button" onclick="begin()" value="开始游戏" />
                </td>
                <td>
                   <input type="button" id="stoped" onclick="stop()" value="暂停" style="width:60px"/>
                </td>
            </tr>
            <tr>
                <td>用时：</td>
                <td><label id="time">0</label></td>
            </tr>
            <tr>
                <td>移动次数：</td>
                <td><label id="movestep">0</label></td>
            </tr>
        </table>
        </div>
        
        <div id="div2" style=" position:relative;background-color:Gray; border-top-width:10px; border-top-style:solid; border-top-color:Aqua">
        </div>
        </center>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/zhangqibao/p/3148448.html

weixin_33755649

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript实现数字拼图

运行结果将下面代码全部拷到txt文件中，然后保存关闭，再把文件的后缀名改为（.htm），就ok了。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xml...
复制链接

扫一扫