Показать сообщение отдельно
  #10 (permalink)  
Старый 30.04.2020, 02:20
Интересующийся
Отправить личное сообщение для Toban Посмотреть профиль Найти все сообщения от Toban
 
Регистрация: 25.03.2020
Сообщений: 11

Ребят, подскажите. Можно ли сделать перемещение объекта (картинки например) в заданном направлении. То есть возможность двигаться вперед или назад, и есть возможность вращать объект тем самым указывая направление.

Есть пробный код. Но проблема заключается в том что после перемещения объект уже не вращается а крутится вокруг начальной точки.

<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>
Ответить с цитированием