javascript实现数字拼图

最新推荐文章于 2021-03-02 05:54:54 发布
zqb10210811
最新推荐文章于 2021-03-02 05:54:54 发布
阅读量761
点赞数
CC 4.0 BY-SA版权
文章标签： HTML 游戏 javascript 数字拼图
本文链接：https://blog.youkuaiyun.com/zqb10210811/article/details/9144399
本文介绍了一款拼图游戏的HTML实现方式，包括游戏规则、交互逻辑和使用的技术栈，旨在提供一种简单的游戏开发入门案例。
将下面的代码拷到txt文件里面，然后把后缀名改为(.htm)，再双击打开就可以了。
<!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;

        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);
            var numbers = new Array();
            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 = 1; i < selected.value * selected.value; i++) {
                for (var j = i+1; j <= selected.value * selected.value; j++) {
                    if (parseInt(array[i]) > parseInt(array[j])) {
                        count = count + 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(selected) {
            var s = "";
            for (var i = 1; i < selected * selected; i++) {
                s = s + "<input id=" + i + " value=" + i + " name=" + i + " readonly='readonly' onclick='move(" + i + ")' class='input1' style='position:absolute; top:" + ((parseInt((i - 1) / selected) + 1) * 5 + parseInt((i - 1) / selected) * 40) + "px; left:" + (((i - 1) % selected + 1) * 5 + (i - 1) % selected * 40) + "px;' />";
            }
            s = s + "<input id='" + selected * selected + "' value='' name='" + selected * selected + "' readonly='readonly' onclick='move(" + selected * selected + ")' class='input2' style='position:absolute; top:" + (selected * 5 + (selected - 1) * 40) + "px; left:" + (selected * 5 + (selected - 1) * 40) + "px;' />";
            div2.innerHTML = s;
            div2.style.width = selected * 5 + (selected - 1) * 40 + 45 + 'px';
            div2.style.height = selected * 5 + (selected - 1) * 40 + 45 + 'px';
            div1.style.width = selected * 5 + (selected - 1) * 40 + 85 + 'px';
            div1.style.height = selected * 5 + (selected - 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(selected.value)">
    <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(selected.value)" 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>