Как с помощью стрелок на клавиатуре управлять расположением изображения на фоновом изображении? ⇐ CSS

[Гость]

Дано (код VS):

index.html

изображение.css

тело{ семейство шрифтов: «Courier New», Courier, моноширинный; выравнивание текста: по центру; /* Единицы px используются для абсолютных значений, а em — относительных. к размеру шрифта конкретного элемента */ #canvasContainer { дисплей: гибкий; оправдание-содержание: центр; маржа: 1.250em; } } изображение.js

let Canvas, Context; document.addEventListener('DOMContentLoaded', (ev) => { // элемент «canvas» имеет два атрибута: ширину и высоту. Canvas = document.getElementById('canvas'); // используем getContext('2d') для получения контекста 2D-рендеринга холста Контекст = Canvas.getContext('2d'); Холст.ширина = 600; // высота будет сброшена в зависимости от соотношения сторон Холст.высота = 300; //--- пусть BackgroundImage = новое изображение(); BackgroundImage.onload = функция () { пусть BackgroundWidth = Canvas.width; // naturalWidth равен ширине изображения в CSS-пикселях с поправкой на плотность. // naturalHeight равен высоте изображения в CSS-пикселях с поправкой на плотность. // вычисляем соотношение сторон изображения пусть AspectRatio = BackgroundImage.naturalWidth/BackgroundImage.naturalHeight; // устанавливаем высоту холста в соответствии с соотношением сторон пусть BackgroundHeight = Canvas.height = BackgroundWidth/AspectRatio; //--- // рисуем фон с настроенной шириной и высотой Context.drawImage(BackgroundImage, 0, 0, BackgroundWidth, BackgroundHeight); //--- // рисуем переднее изображение поверх фона пусть FrontImage = новое изображение(); FrontImage.onload = функция () { пусть FrontWidth = 40; пусть FrontHeight = 100; // координаты x и y верхнего левого угла переднего изображения пусть PositionX = BackgroundWidth/2 - FrontWidth/2; пусть PositionY = BackgroundHeight - FrontHeight; Context.drawImage(FrontImage, PositionX, PositionY, FrontWidth, FrontHeight); } // заменяем часть фона на переднее изображение FrontImage.src = "Car.jpg"; } // изображение на заднем плане BackgroundImage.src = "Streets.jpg"; } ) Streets.jpg => https://snipboard.io/4YgDaf.jpg

Car.jpg => https://snipboard.io/ptkWjJ.jpg

Этот код помещает изображение автомобиля на изображение улицы. Он отображается корректно. Я хочу добавить код, чтобы машину можно было передвигать по улице и поворачивать налево на перекрестке.

Как с помощью стрелок на клавиатуре управлять расположением изображения автомобиля на фоновом изображении улицы?