Question

我有一个类Jugador创建一个新的SVG矩形并将其放在画布上（乒乓游戏）我想为第一个玩家分配ArrowUp和ArrowDown，以及键＃34; W＆＃34 ;和＆＃34; A＆＃34;对于第二个移动'＃34;坚持＆＃34;。

的玩家

class Jugador {
    constructor(num, coorx, coory, color) {
        this.parent = document.getElementById("svg");
        this.rectan = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        this.parent.appendChild(this.rectan);
        this.jugador = document.getElementsByTagName("rect")[num];
        this.jugador.setAttribute("x", coorx);
        this.jugador.setAttribute("y", coory);
        this.jugador.setAttribute("rx", "14");
        this.jugador.setAttribute("ry", "14");
        this.jugador.setAttribute("width", "35");
        this.jugador.setAttribute("height", "250");
        this.jugador.setAttribute("onkeydown", "movimiento(event)");
        this.jugador.style.fill = color;
        this.jugador.style.stroke = "black";
        this.jugador.style.strokeWidth = "2";
    }

    movimiento(event) {
        let code = event.keyCode || event.which;

        if (document.getElementsByTagName("rect")[0]) {
            if (code == 38) { // flecha arriba
                pala1.setAttribute("y", (pala1.getAttribute("y") + 5));
            } else if (code == 40) { //flecha abajo
                pala1.setAttribute("y", (pala1.getAttribute("y") - 5));
            }
        }
        if (document.getElementsByTagName("rect")[1]) {
            if (code == 113) { // letra Q
                pala2.setAttribute("y", (pala2.getAttribute("y") + 5));
            } else if (code == 97) { //letra A
                pala2.setAttribute("y", (pala2.getAttribute("y") - 5));
            }
        }
    }
}

var pala1 = new Jugador(0, 50, 300, "orange");
var pala2 = new Jugador(1, 1715, 300, "blue");

Answer 1

而不是

this.jugador.setAttribute("onkeydown", "movimiento(event)");

你可以做到

this.jugador.addEventListener("onkeydown", movimiento);

但是，只有当你关注那个元素时才会触发事件。

而是可以绑定整个文档中的事件：

document.body.addEventListener("onkeydown", movimiento);

如何让我的keydown事件发挥作用？

1 个答案: