Question

我的Javascript程序有问题。我做pacman。我需要在画布上移动图像（pacman）当用户按下某个键时，我创建了一个在事件发生时运行的函数。我认为问题的产生是因为没有采取事件。我需要你的帮助。谢谢！

function startGame()
{
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    pacman_derecha.src = 'pacman_derecha.jpg';
    pacman_derecha.onload = function()
    {
        context.drawImage(pacman_derecha, pos_pacman_x,pos_pacman_y);
    }

    /* Procedimiento principal */

    /* Dibujamos el escenario */
    for (var i = 0; i < escenario.length; i++)
    {
        var x = escenario[i].x;
        var y = escenario[i].y;
        var ancho = escenario[i].ancho;
        var alto = escenario[i].alto;
        context.strokeStyle = "#0000ff";
        context.lineWidth = 2;
        context.strokeRect(x, y, ancho, alto);
    }

    /* Dibujamos las bolitas */
    context.strokeStyle = "#f3f3f3";
    for(var j = 0; j < bolas.length; j++)
    {
        var x = bolas[j].x;
        var y = bolas[j].y;
        context.strokeRect(x,y,2,2);
    }

    /* Pintamos de nuevo el escenario y la nueva posicion del pacman */
    setInterval(drawloop, 10);

    /* Analizamos si el usuario presiona alguna tecla */
    canvas.addEventListener('keydown', movimiento, true);

}

function movimiento(evento)
{
    alert(evento.keyCode);
    switch (evento.keyCode)
    {
        /*derecha*/
        case 39:
            pos_pacman_x = pos_pacman_x + 200;
            break;

        /*izquierda*/
        case 37:
            pos_pacman_x = pos_pacman_x - 200;
            break;

        /*abajo*/
        case 40:
            pos_pacman_y = pos_pacman_y - 200;
            break;

        /*arriba*/
        case 38:
            pos_pacman_y = pos_pacman_y + 200;
            break;

        default:
            pos_pacman_x = pos_pacman_x + 50;
            pos_pacman_y = pos_pacman_y - 50;
            break;
    }
}

function drawloop()
{
    pacman_arriba.src = 'pacman_arriba.jpg';
    pacman_arriba.onload = function()
    {
        context.drawImage(pacman_arriba, pos_pacman_x,pos_pacman_y);
    }
    alert(pos_pacman_x+" - "+pos_pacman_y)
}

Answer 1

无法使canvas监听keydown - 事件，因为您无法将其与光标对齐。你必须让窗口听取这些事件：

window.onkeydown = movimiento;

按键时如何在画布上移动一个对象（PACMAN）

1 个答案: