JaveScript 之開關燈游戲

標簽：

JavaScript

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
</body>
<script type="text/javascript">
    var lightRow = 10; //行
    var lightCol = 10; //列
    var lightWidth = 50;
    var lightHeight = 50;
    var itemMargin = 3;
    var lightBorder = 1;
    var beforeBG = "black";
    var afterBG = "yellow";
    var shaDow1 = "5px 5px 5px rgb(50,50,50)";
    var shaDow2 = "5px 5px greenyellow";

    var body_ = document.getElementsByTagName("body");

    var annui = document.createElement("button");
    annui.innerHTML = "开始游戏";
    annui.onclick = jj;
    body_[0].appendChild(annui);

    var mainDiv = document.createElement("div");
    mainDiv.style.width = lightCol * lightWidth + lightBorder * lightCol * 2 + itemMargin * lightCol * 2 + "px";
    mainDiv.style.margin = "0 auto";
    body_[0].appendChild(mainDiv);

    var lights = [];
    for(var i = 0; i < lightRow * lightCol; i++) {
        var lightItem = document.createElement("div");
        lightItem.style.width = lightWidth + "px";
        lightItem.style.height = lightHeight + "px";
        lightItem.style.background = beforeBG;
        lightItem.style.margin = itemMargin + "px";
        lightItem.style.border = lightBorder + "px solid black";
        lightItem.style.borderRadius = "0 20%";
        lightItem.style.boxShadow = shaDow1;
        lightItem.style.display = "inline-block";
        lightItem.innerHTML = i;
        lightItem.onclick = ff;
        lightItem.onOroff = false;
        lightItem.index = i;
        lights.push(lightItem);
        mainDiv.appendChild(lightItem);
    }
    var ny = 5;
    var flag = 0;

    function clickItem(a) {
        onOroff(a);
        if(a.index >= 10) {
            onOroff(lights[a.index - 10]);
        }
        if(a.index <= 90) {
            onOroff(lights[a.index + 10]);
        }
        if(a.index % 10 != 0) {
            onOroff(lights[a.index - 1]);
        }
        if(a.index % 10 != 9) {
            onOroff(lights[a.index + 1]);
        }
    }

    function onOroff(item) {
        if(item.onOroff == false) {
            item.style.background = afterBG;
            item.style.boxShadow = shaDow2;
            item.onOroff = true;
            flag++;
        } else {
            item.style.background = beforeBG;
            item.style.boxShadow = shaDow1;
            item.onOroff = false;
            flag--;
        }
    }

    function jj() {
        for(var i = 0; i < ny; i++) {
            var b = parseInt(Math.random() * 99);
            clickItem(lights[b]);
            console.log(b);
        }
    }

    function ff() {
        clickItem(this);
        if(flag == 0) {
            alert("恭喜过关");
            ny += 5;
            jj();
        } else {

        }
    }
</script>

</html>

點擊查看更多內(nèi)容