Почему точка не движется по нажатию клавиш?

Question

Хочу сделать точку, которая движется по нажатию клавиш W A S D. Что я делаю не так?

window.addEventListener('load', main, false);

function main() {
  var ctx = canvas_example.getContext("2d");
  var w = canvas_example.width;
  var h = canvas_example.height;

  var fps = 60;
  r = 5;
  ctx.fillStyle = 'black';
  var x = w / 2;
  var y = h / 2;
  var v = 100;
  var dt = 0.1;

  document.onkeypress = function(event) {
    console.log(event);
    if (event.key == 'KeyW') {
      y = y + v * dt;
      console.log(y);
    }
    if (event.key == 'KeyD') {
      x = x + v * dt;
    }
    if (event.key == 'KeyS') {
      y = y - v * dt;
    }
    if (event.key == 'KeyA') {
      x = x - v * dt;
    }
  }

  function draw() {
    ctx.clearRect(0, 0, w, h);
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.fill();
  }

  function control() {
    draw();
  }
  setInterval(control, 1000 / fps)
}

<canvas id="canvas_example" width=500 height=500 style='border: 1px solid #000000;'></canvas>

как так то

Answer 1

Результат event.key в данном случае возвращает имя клавиши, такие как a w s d W A S D. Если хотите обрабатывать и большие клавиши(например при нажатом капс лок или русские символы при раскладке Ц Ы и так далее) то можете добавить и их в выражение:

if (event.key == 's' || event.key == 'S'){

Или же приводить их к нижнему регистру.

window.addEventListener('load', main, false);

function main() {
  var ctx = canvas_example.getContext("2d");
  var w = canvas_example.width;
  var h = canvas_example.height;

  var fps = 60;
  r = 5;
  ctx.fillStyle = 'black';
  var x = w / 2;
  var y = h / 2;
  var v = 100;
  var dt = 0.1;

  document.onkeypress = function(event) {
    if (event.key == 's') {
      y = y + v * dt;
      console.log(y);
    };
    if (event.key == 'd') {
      x = x + v * dt;
    }
    if (event.key == 'w') {
      y = y - v * dt;
    }
    if (event.key == 'a') {
      x = x - v * dt;
    }
  }

  function draw() {
    ctx.clearRect(0, 0, w, h);
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.fill();
  }

  function control() {
    draw();
  }
  setInterval(control, 1000 / fps)
}

<canvas id="canvas_example" width=500 height=500 style='border: 1px solid #000000;'></canvas>

Или использовать event.code:

    window.addEventListener('load',main,false);
    function main()
    {
        var ctx = canvas_example.getContext("2d");
        var w = canvas_example.width;
        var h = canvas_example.height;

        var fps = 60;
        r = 5;
        ctx.fillStyle = 'black';
        var x = w/2;
        var y = h/2;
        var v = 100;
        var dt = 0.1;

        document.onkeypress = function (event) {
            if (event.code == 'KeyS') {
                y = y + v * dt;
                console.log(y);
            }
            if (event.code == 'KeyD') {
                x = x + v * dt;
            }
            if (event.code == 'KeyW') {
                y = y - v * dt;
            }
            if (event.code == 'KeyA') {
                x = x - v * dt;
            }
        }

        function draw() {
            ctx.clearRect(0,0,w,h);
            ctx.beginPath();
            ctx.arc(x,y,r,0,2*Math.PI);
            ctx.fill();
        }

        function control() {
            draw();
        }
        setInterval(control, 1000/fps)
    }

<!DOCTYPE html>

<html>
<head>
    <title>Hello world!</title>
    <script src='alpha.js'></script>
</head>
<body>
<canvas id="canvas_example" width=500 height=500 style='border: 1px solid #000000;'></canvas>
</body>
</html>

БЛОГ НА HUSL

Почему точка не движется по нажатию клавиш?

Ответы (1 шт):