29.04.2020, 20:12
|
Интересующийся
|
|
Регистрация: 25.03.2020
Сообщений: 11
|
|
Перемещение в указанном направлении
Помогите кто может.
Нужно чтобы стрелка двигалась в указанном направлении.
Если нажать на "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, 29.04.2020 в 20:20.
|
|
29.04.2020, 20:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Toban,
добавить переменные для translate() и изменять их
потом выводить
body.style.transform= "rotate(" + angle + "deg) translate(" +x+"px, "+y+"px)";
|
|
29.04.2020, 21:08
|
Интересующийся
|
|
Регистрация: 25.03.2020
Сообщений: 11
|
|
Если так сделать, то центр вращения измениться и уже не будет вращаться изображение, оно просто будет идти по кругу, с радиусом в твое перемещение.
|
|
29.04.2020, 21:11
|
Интересующийся
|
|
Регистрация: 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>
Последний раз редактировалось Toban, 29.04.2020 в 21:17.
|
|
29.04.2020, 21:45
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Toban,
|
|
29.04.2020, 21:58
|
Интересующийся
|
|
Регистрация: 25.03.2020
Сообщений: 11
|
|
А нельзя как-нибудь другим методом реализовать эту идею?
|
|
29.04.2020, 22:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
|
30.04.2020, 02:42
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
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>
Последний раз редактировалось Malleys, 30.04.2020 в 14:56.
|
|
30.04.2020, 09:15
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 1,692
|
|
Toban,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS transform matrix</title>
</head>
<body>
<div id="image" style="width: 50px; height: 25px; background: linear-gradient(to right, red, black);"></div>
<script>
window.onload = function () {
const body = document.getElementById('image');
const degree = Math.PI / 180, rotateSpeed = 4 * degree, translateSpeed = 2;
let x = 0, y = 0, angle = 0;
function rotateLeft() {
angle -= rotateSpeed;
updateTransform();
}
function rotateRight() {
angle += rotateSpeed;
updateTransform();
}
function translateForward() {
x += translateSpeed * Math.cos(angle);
y += translateSpeed * Math.sin(angle);
updateTransform();
}
function translateBackward() {
x -= translateSpeed * Math.cos(angle);
y -= translateSpeed * Math.sin(angle);
updateTransform();
}
function updateTransform() {
body.style.transform = `translate(${x}px, ${y}px) rotate(${angle}rad)`;
}
function updateTransform1() {
let cos = Math.cos(angle), sin = Math.sin(angle);
body.style.transform = `matrix(${cos}, ${sin}, ${-sin}, ${cos}, ${x}, ${y})`;
}
runOnKeys(rotateLeft, 'KeyA', 'ArrowLeft');
runOnKeys(rotateRight, 'KeyD', 'ArrowRight');
runOnKeys(translateForward, 'KeyW', 'ArrowUp');
runOnKeys(translateBackward, 'KeyS', 'ArrowDown');
updateTransform();
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 func();
});
document.addEventListener('keyup', function (event) {
pressed.delete(event.code);
});
}
};
</script>
</body>
</html>
Последний раз редактировалось Rise, 30.04.2020 в 09:23.
|
|
30.04.2020, 14:02
|
Интересующийся
|
|
Регистрация: 25.03.2020
Сообщений: 11
|
|
|
|
|
|