Question

所以我正在研究这个项目是通过5x5棋盘遍历董事会中不同的方框（位置）发生的不同事件（例如，如果这个人在[2,0]是减少网格的事件只发生2x2尺寸或者[4,0]处的框改变颜色）

非常感谢帮助。

＆＃13;

(function() {
    // refined add event cross browser
    function addEvent(elem, event, fn) {
        if (typeof elem === "string") {
            elem = document.getElementById(elem);
        }

        // avoid memory overhead of new anonymous functions for every event handler that's installed
        // by using local functions
        function listenHandler(e) {
            var ret = fn.apply(this, arguments);
            if (ret === false) {
                e.stopPropagation();
                e.preventDefault();
            }
            return(ret);
        }

        function attachHandler() {
            // set the this pointer same as addEventListener when fn is called
            // and make sure the event is passed to the fn also so that works the same too
            var ret = fn.call(elem, window.event);
            if (ret === false) {
                window.event.returnValue = false;
                window.event.cancelBubble = true;
            }
            return(ret);
        }

        if (elem.addEventListener) {
            elem.addEventListener(event, listenHandler, false);
        } else {
            elem.attachEvent("on" + event, attachHandler);
        }
    }



    function addClass(elem, cls) {
        var oldCls = elem.className;
        if (oldCls) {
            oldCls += " ";
        }
        elem.className = oldCls + cls;
    }

    function removeClass(elem, cls) {
        var str = " " + elem.className + " ";
        elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
    }


    function findItem(items, target) {
        for (var i = 0; i < items.length; i++) {
            if (items[i] === target) {
                return(i);
            }
        }
        return(-1);
    }

    var keys = {up: 38, down: 40, left: 37, right: 39};
    var cards = document.getElementById("game-board").getElementsByClassName("card");
    addEvent(document, "keydown", function(e) {
        // get key press in cross browser way
        var code = e.which || e.keyCode;
        // number of items across
        var width = 4;
        var increment, index, newIndex, active;

        switch(code) {
            case keys.up:
                increment = -width;
                break;
            case keys.down:
                increment = width;
                break;
            case keys.left:
                increment = -1;
                break;
            case keys.right:
                increment = 1;
                break;
            default:
                increment = 0;
                break;
        }
        if (increment !== 0) {
            active = document.getElementById("game-board").getElementsByClassName("active")[0];
            index = findItem(cards, active);
            newIndex = index + increment;
            if (newIndex >= 0 && newIndex < cards.length) {
                removeClass(active, "active");
                addClass(cards[newIndex], "active");
            }
            // prevent default handling of up, down, left, right keys
            return false;
        }

    });
})();

＆＃13;

.active {
    background: #00ebe4;
    border:2px solid #93ff85;


    }

*{margin: 0; padding:0;}
body{
    font-family:arial;
    background: #5f5f5f;
}
#plan{
    margin:90px auto;
    width:400px;
    height:400px;
    background: rgba(95, 95, 95, 0.84);
    border-radius: 10px;
}
#game-board{
    width:380px;
    height:380px;
}




.card{
    box-shadow: 0 2px 2px 1px #000;
    border-radius: 5px;
    height:70px;
    width:70px;
    display:inline-block;
    margin-left:20px;
    margin-top:20px;
    background: #3a89be 14px 7px no-repeat;
}

＆＃13;

<body>

<div align="center";
     style="color: #d8d8d8;
     margin-top: 50px" >

    <H1></H1>
    <h2>use Arrows to Navigate.</h2></div>
<div id="plan">
    <div id="game-board">

        <div class="card active" id="0"></div>
        <div class="card" id="1"></div>
        <div class="card" id="2"></div>
        <div class="card" id="3"></div>
        <div class="card" id="4"></div>
        <div class="card" id="5"></div>
        <div class="card" id="6"></div>
        <div class="card" id="7"></div>
        <div class="card" id="8"></div>
        <div class="card" id="9"></div>
        <div class="card" id="10"></div>
        <div class="card" id="11"></div>
        <div class="card" id="12"></div>
        <div class="card" id="13"></div>
        <div class="card" id="14"></div>
        <div class="card" id="15"></div>
    </div>

</div>
       <!-- <div id="restart"><button id="reset-button"></button>reset</div> -->

</body>

＆＃13;

Answer 1

这是对你的陈述/澄清的回应：

＆＃34;但我不知道的是如何跟踪这些行动具体方块，谢谢＆＃34;

在javascript中查看event listeners。我知道你正在使用上面的一些内容，但看起来你可能已经从某个地方复制了 - 这很好 - 但它的方式使得它们对于这个目的不那么有用。通常使用getElementById在页面上的特定元素上设置事件侦听器。示例：

HTML

<button id='button1'>Click Me!</button>

JS

document.getElementById('button1').addEventListener("click", myFunction, true);

myFunction = function(){

     //here's where you change the color, or size, or make a popup window, etc.

};

单击该特定按钮（也可以是任何其他HTML元素）将执行该功能。

5x5棋盘格由键盘控制，盒子上有不同的事件

1 个答案: