Как сделать движение по диагонали по нажатию клавиш?

Question

Делаю точку, которая будет двигаться по нажатию клавиш WASD. Не работает диагональное движение при нажатии S и D одновременно. Движется только вниз, то есть только для кнопки 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 = 50;
	var dt = 0.1;

	document.onkeydown = function (event) {
	console.log(event);
	if ((event.key == 's')&&(event.key == 'd')){ // это не работает, при нажатии S и D одновременно, движется только вниз
		y = y + v*dt;
		x = x + v*dt;
	}
	if ((event.key == 's')||(event.key == 'ы')||(event.key == 'S')||(event.key == 'Ы')){
		y = y + v*dt;
		console.log(y);
	}
	if ((event.key == 'd')||(event.key == 'в')||(event.key == 'D')||(event.key == 'В')){
		x = x + v*dt;
	}
	if ((event.key == 'w')||(event.key == 'ц')||(event.key == 'W')||(event.key == 'Ц')){
		y = y - v*dt;
	}
	if ((event.key == 'a')||(event.key == 'ф')||(event.key == 'A')||(event.key == 'Ф')){
		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>

Answer 1

Получается наполовину, только при однократном нажатии.

document.onkeydown = function (event) {

    var code = event.which;

    if (code == 83) y += v*dt;     
    if (code == 68) x += v*dt;
    if (code == 87) y -= v*dt;
    if (code == 65) x -= v*dt;
}

Answer 2

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 = 50;
var dt = 0.1;

var pressedKeys = {}
document.onkeydown = function(event) {
  pressedKeys[event.keyCode] = true

  Object.keys(pressedKeys).forEach(key => {
    if (!pressedKeys[key]) return
    if (key == 83) y = y + v * dt;
    if (key == 68) x = x + v * dt;
    if (key == 87) y = y - v * dt;
    if (key == 65) x = x - v * dt;
  });
}

document.onkeyup = function(event) {
  pressedKeys[event.keyCode] = false
}

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>

БЛОГ НА HUSL

Как сделать движение по диагонали по нажатию клавиш?

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