Перемещение в указанном направлении
 

Помогите кто может.
Нужно чтобы стрелка двигалась в указанном направлении.
Если нажать на "Q" или "E" стрелка будет вращаться соответственно влево или вправо. Как сделать чтобы она двигалась в указанном направлении.

<div>
<img src="https://inkscape.paint-net.ru/img/img02/1020037.png" id="Image" style="height: 50px;
width: 50px;">
</div>
<script>
window.onload = function() {

let body = document.getElementById('Image');
let angle=0

function runOnKeys(func, ...codes) {
let pressed = new Set();
document.addEventListener('keydown', function(event) {
pressed.add(event.code);
for (let code of codes) { // все ли клавиши из набора нажаты?
if (!pressed.has(code)) {return;}
}
pressed.clear();
func();
});
document.addEventListener('keyup', function(event) {
pressed.delete(event.code);
});
}

function RotateRight()
{
angle++;
body.style.transform= "rotate(" + angle + "deg)";	
}

function RotateLeft()
{
angle--;
body.style.transform= "rotate(" + angle + "deg)";	
}

runOnKeys(RotateRight,"KeyE");
runOnKeys(RotateLeft,"KeyQ");

}</script>

Toban,
добавить переменные для translate() и изменять их

потом выводить

body.style.transform= "rotate(" + angle + "deg) translate(" +x+"px, "+y+"px)";

Если так сделать, то центр вращения измениться и уже не будет вращаться изображение, оно просто будет идти по кругу, с радиусом в твое перемещение.

Вот к как будет:

<div>
<img src="https://inkscape.paint-net.ru/img/img02/1020037.png" id="Image" style="height: 50px;
width: 50px;">
</div>
<script>
window.onload = function() {
let body = document.getElementById('Image');
let angle=0;
let move=0;

function runOnKeys(func, ...codes) {
let pressed = new Set();
document.addEventListener('keydown', function(event) {
pressed.add(event.code);
for (let code of codes) { // все ли клавиши из набора нажаты?
if (!pressed.has(code)) {return;}
}
pressed.clear();
func();
});
document.addEventListener('keyup', function(event) {
pressed.delete(event.code);
});
}

function RotateRight()
{
angle++;
body.style.transform= "rotate(" + angle + "deg) translateY(" + move + "px)";  
}
function RotateLeft()
{
angle--;
body.style.transform= "rotate(" + angle + "deg) translateY(" + move + "px)";  
}
function Move(){
move--;
body.style.transform= "rotate(" + angle + "deg) translateY(" + move + "px)"; }

runOnKeys(RotateRight,"KeyE");
runOnKeys(RotateLeft,"KeyQ");
runOnKeys(Move,"KeyW");

}</script>

Toban,
:victory:

А нельзя как-нибудь другим методом реализовать эту идею?

Toban,
нажатие нескольких клавиш, управление стрелками

Toban, у вас обрабатывается только первое движение вперёд и первый поворот, чтобы можно было двигаться дальше, нужно добавлять новые повороты и новые движения вперёд. Для этого есть матрицы, которые могут хранить в себе накопление поворотов и движении вперёд.

Я так понимаю, вы хотите, чтобы при нажатии на клавишу W происходило движение вперёд, и одновременно можно было бы поворачиваться при помощи Q или E.

Я не знаю, почему вы так сложно сделали определение нажатой клавиши — достаточно завести множество (у вас есть!) в которое при нажатии клавиш будет записываться, какая нажата клавиша, а при отпускании такая клавиша будет удаляться из числа нажатых.

Затем в игровом цикле вам нужно будет проверять, нажата ли клавиша и в соответствии с полученной информацией двигаться вперёд или поворачиваться.

Вот пример того, что вы хотели достичь...

<div id="image" style="width: 50px; height: 25px; background: linear-gradient(to right, red, black);"></div>

<script>
	const pressedKeys = new Set();

	addEventListener("keydown", event => {
		pressedKeys.add(event.code);
	});

	addEventListener("keyup", event => {
		pressedKeys.delete(event.code);
	});

	const m = new DOMMatrix();

	let dt, lastT = performance.now();
	const image = document.getElementById("image");

	(function loop(t) {
		requestAnimationFrame(loop);

		dt = t - lastT;
		lastT = t;

		if(pressedKeys.has("KeyW") || pressedKeys.has("ArrowUp")) m.translateSelf(0.1 * dt);
		if(pressedKeys.has("KeyS") || pressedKeys.has("ArrowDown")) m.translateSelf(-0.1 * dt);
		if(pressedKeys.has("KeyD") || pressedKeys.has("ArrowRight")) m.rotateSelf(0.2 * dt);
		if(pressedKeys.has("KeyA") || pressedKeys.has("ArrowLeft")) m.rotateSelf(-0.2 * dt);

		image.style.transform = m;
	})(lastT);
</script>

Огромное спасибо :) :) :D

Rise, почему оно работает с такими потугами? (Проверь — зажав W попеременно нажимай A или D, движение «зигзагом», у тебя оно выглядит так, как будто пропускаются нажатия, тупые гейдевки способны на такое)
Почему как только нажать клавишу, оно немного дёрнется в нужном направлении, а затем остановится, и только потом продолжит движение?
Почему скорость движения должна зависеть от скорости возникновения события? (Твои rotateSpeed и translateSpeed на самом деле прибавляются в голом виде к предыдущим значениям во время переменного возникновения события)

Если тебе сложно это понять, то посмотри мой пример выше — там таких проблем нет.