В чем ошибка скрипта?

228
06 мая 2018, 19:35

Доброго времени суток.

Пишу небольшую игру на стеке html, css, js (JQuery).
Пытаюсь запилить передвижение по карте.
Помогите скорректировать код для движение вверх и вниз героя.

$( document ).keypress(function(event) {
    var positionCamera = $(".game-camera__map").css("transform");
    // Объединить через регулярку
    positionCamera = positionCamera.substr(19, );
    positionCamera = positionCamera.replace(")", "");
    // Позиция камеры относительно карты по X
    var positionCameraX = positionCamera.replace(/[, ]\d*/ig, ""),
        positionCameraX = Number(positionCameraX),            
        // Позиция камеры относительно карты по Y
        positionCameraY = positionCamera.replace(/\d*[, ]/ig, ""),
        positionCameraY = Number(positionCameraY);
    if (event.charCode == 100) { // Right
      positionCameraX = Number(positionCameraX - speedHero);
      camera.css("transform", "translate("+ positionCameraX +"px, "+ positionCameraY +"px)");
    } else if (event.charCode == 97) { // Left
      positionCameraX = positionCameraX + speedHero;
      camera.css("transform", "translate("+ positionCameraX +"px, "+ positionCameraY +"px)");
    } else if (event.charCode == 115) { // Down
      positionCameraY = positionCameraY - speedHero;
      camera.css("transform", "translate("+ positionCameraX +"px, "+ positionCameraY +"px)");
    } else if (event.charCode == 119) { // Up
      positionCameraY = positionCameraY + speedHero;
      camera.css("transform", "translate("+ positionCameraX +"px, "+ positionCameraY +"px)");
    }
});

Ошибка где то в этих строчках.
Полный пример, тут:
https://codepen.io/AndreyMyP/pen/GdMEyP?editors=1010

Answer 1

transform: translate

Ошибка была в неправильном парсинге значения transform: translate.
При попытке узнать значение js,
выдавалось матричное значение, а именно:

Ввод:
$(".game-camera__map").css("transform");
Вывод:
"matrix(1, 0, 0, 1, 0, 0)"
typeof is str

Правильное решение:
Необходимо было матричную строку преобразовать в массив по символу "," после чего обратиться по элементу массива. 

var positionCamera = $(".game-camera__map").css("transform");
var positionCamera = positionCamera.split('(')[1],
    positionCamera = positionCamera.split(')')[0],
    positionCamera = positionCamera.split(',');
// Позиция камеры относительно карты по X
var positionCameraX = positionCamera[4],
    positionCameraX = Number(positionCameraX);  
// Позиция камеры относительно карты по Y
var positionCameraY = positionCamera[5],
    positionCameraY = Number(positionCameraY);

Решение взял из статьи:
https://css-tricks.com/get-value-of-css-rotation-through-javascript/

Решение на codepen!
https://codepen.io/AndreyMyP/pen/GdMEyP

READ ALSO
Создание /generate_204
javascript

Создание /generate_204

Необходимо сделать так, чтобы андроид устройство пыталось проверить доступ в интернет по ссылку http://wwwgstatic

 262
Не работает скрипт клик по кнопке
javascript

Не работает скрипт клик по кнопке

при нажатии на кнопку "Собрать" и потом в модальном окне "Купить" не срабатывает такой скрипт

 223
Mongoose игнорирует ошибку
javascript

Mongoose игнорирует ошибку

При включенной БД все работало правильноНо я решил подготовиться, если БД упадет или что либо крашнется

 237
Найти первое слово строки
javascript

Найти первое слово строки

Получается задача в чёмНужно найти первое слово строки, но при этом игнорируя запятые

 184