JQuery做的一个简单的点灯游戏分享(3)

for (var i = 1; i <= x; i++) {
                for (var j = 1; j <= y; j++) {
                    var button = createButton('bt' + i + j);

grid.appendChild(button);
                }

var ret = document.createElement('br');
                ret.className = "return";

grid.appendChild(ret);
            }

$(".darkButton").click(function () {
                changeButton(this.id);

var x = this.id.charAt(2);
                var y = this.id.charAt(3);

if (x - 1 > 0) {
                    changeButton('bt' + (x - 1) + y);
                }
                if (y - 1 > 0) {
                    changeButton('bt' + x + (y - 1));
                }

var newX = 1 + parseInt(x);
                if (x + 1 <= maxX) {
                    changeButton('bt' + newX + y);
                }
                var newY = 1 + parseInt(y);
                if (y + 1 <= maxY) {
                    changeButton('bt' + x + newY);
                }

step++;

document.getElementById("step").innerHTML = step;
            });
        }

function changeButton(id) {
            var button = document.getElementById(id);

if (button.className === "darkButton") {
                button.className = "lightButton";
            }
            else {
                button.className = "darkButton";
            }
        }

function createButton(id) {
            var button = document.createElement('button');
            button.id = id;
            button.className = "darkButton";
            return button;
        }
    </script>
</head>

<body>
    <h1>Turn all the light bulbs if you can!</h1>
    Hello
    <div>
        <label for="X">横向:</label>
        <input type="number" value="5" />
        <label for="Y">纵向:</label>
        <input type="number" value="4"/>
        <button>开始游戏</button>
    </div>
    <div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgpwxf.html