-2

var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39,
};

document.addEventListener("keyup", dibujarTeclado);
var cuadrito = document.getElementById("area_de_dibujo");
var papel = cuadrito.getContext("2d");
var x = 150;
var y = 150;

dibujarlinea("red", 100, 100, 200, 200, papel);

function dibujarlinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.lineWidth = 3;
    lienzo.moveTo(xinicial, yinicial);
    lienzo.lineTo(xfinal, yfinal);
    lienzo.stroke();
    lienzo.closePath();
}

function dibujarTeclado(event); 
{
    var colorcito = "blue";
    var movimiento = 10;
    switch (evento.keyCode) 
    {
        case teclas.UP:
            dibujarlinea(colorcito, x, y, x, y - movimiento, papel);
            y = y - movimiento;
        break;
        case teclas.DOWN:
            dibujarlinea(colorcito, x, y, x, y + movimiento, papel);
            y = y + movimiento;
        break;
        case teclas.LEFT:
            dibujarlinea(colorcito, x, y, x - movimiento, y, papel);
            x = x - movimiento;
        break;
        case teclas.RIGHT:
            dibujarlinea(colorcito, x, y, x + movimiento, y, papel);
            x = x + movimiento;
        break;
    }
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Dibujando con Flechas</title>
</head>
<body>
    <canvas width="400" height="400" id="area_de_dibujo"></canvas>
    <p>Mueve las flechas para dibujar con el teclado</p>
    <script src="eventos.js"></script>
</body>
</html>

3
  • Se Supone que al oprimir las flechas del teclado, debo poder dibujar dentro del canvas, pero no me funciona nada! Commented el 3 dic. 2018 a las 22:54
  • 2
    quita el punto y coma de la función function dibujarTeclado(event); Commented el 3 dic. 2018 a las 22:54
  • Muchas Gracias! Commented el 3 dic. 2018 a las 22:58

1 respuesta 1

0

Parece que tu function dibujarTeclado tiene un ; demas, deberia de ser asi

function dibujarTeclado(event)
{
    var colorcito = "blue";
    var movimiento = 10;
    switch (evento.keyCode) 
    {
        case teclas.UP:
            dibujarlinea(colorcito, x, y, x, y - movimiento, papel);
            y = y - movimiento;
        break;
        case teclas.DOWN:
            dibujarlinea(colorcito, x, y, x, y + movimiento, papel);
            y = y + movimiento;
        break;
        case teclas.LEFT:
            dibujarlinea(colorcito, x, y, x - movimiento, y, papel);
            x = x - movimiento;
        break;
        case teclas.RIGHT:
            dibujarlinea(colorcito, x, y, x + movimiento, y, papel);
            x = x + movimiento;
        break;
    }
}
2
  • Muchas Gracias! Commented el 3 dic. 2018 a las 22:58
  • Hola Virus. Gracias por responder y ayudar pero las preguntas que son problemas tipograficos han de ser cerradas como tal y no ser respondidas. En vez de responder, deja un comentario. un saluod
    – lois6b
    Commented el 4 dic. 2018 a las 7:37

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.