HTML 实现9宫格拼图小游戏

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

追梦d程序猿

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

阅读量4.8k

点赞数 5

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44538319/article/details/86540959

版权


<style type="text/css">
#id {
	background;
	border:none;
}
</style>`

<body onkeydown="whichButton(event)">
    <div style="width: 480px;height: 300px;border: 2px solid #000;position: absolute;">

        <div class="lattice" id="lattice1" style="top: 0px;left: 0px;"><img src="${ctx}/jsp/9Ge/FengJing/1.jpg"></img></div>
        <div class="lattice" id="lattice2" style="top: 0px;left: 160px;"><img src="${ctx}/jsp/9Ge/FengJing/2.jpg"></img></div>
        <div class="lattice" id="lattice3" style="top: 0px;left: 320px;"><img src="${ctx}/jsp/9Ge/FengJing/3.jpg"></img></div>

        <div class="lattice" id="lattice4" style="top: 100px;left: 0px;"><img src="${ctx}/jsp/9Ge/FengJing/4.jpg"></img></div>
        <div class="lattice" id="lattice5" style="top: 100px;left: 160px;"><img src="${ctx}/jsp/9Ge/FengJing/5.jpg"></img></div>
        <div class="lattice" id="lattice6" style="top: 100px;left: 320px;"><img src="${ctx}/jsp/9Ge/FengJing/6.jpg"></img></div>

        <div class="lattice" id="lattice7" style="top: 200px;left: 0px;"><img src="${ctx}/jsp/9Ge/FengJing/7.jpg"></img></div>
        <div class="lattice" id="lattice8" style="top: 200px;left: 160px;"><img src="${ctx}/jsp/9Ge/FengJing/8.jpg"></img></div>
        <div class="lattice" id="lattice9" style="top: 200px;left: 320px;"></div>
    </div>
    <div style="width:200;height: 125px;border: 2px solid #000;position: absolute;left:500px;"><img src="${ctx}/jsp/9Ge/FengJing/FengJing1.jpg"></img></div>
    <script type="text/javascript">
        function whichButton(event) {
            var ShuZu = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            var i = 0;

            //W
            if (event.keyCode == 87) {
                //W  -- 9=1
                if (lattice9.style.top == "0px" && lattice9.style.left == "0px") {
                    for (i = 0; i < ShuZu.length; i++) {
                        var Value = document.getElementById("lattice" + ShuZu[i]);
                        if (Value.style.top == "100px" && Value.style.left == "0px") {
                            Value.style.top = "0px";
                            lattice9.style.top = "100px";
                            return;
                        }
                    }
                }
                //W  -- 9=2
                if (lattice9.style.top == "0px" && lattice9.style.left == "160px") {
                    for (i = 0; i < ShuZu.length; i++) {
                        var Value = document.getElementById("lattice" + ShuZu[i]);
                        if (Value.style.top == "100px" && Value.style.left == "160px") {
                            Value.style.top = "0px";
                            lattice9.style.top = "100px";
                            lattice9.style.left = "160px";
                            return;
                        }
                    }
                }
                //W  -- 9=3
                if (l