1

Реализовал логику поворотов персонажа при нажатии клавиш: , , , . Но есть проблема, т.к. привязался к градусам, то при нахождении в позиции Up и необходимости сделать поворот Left, получается угол 270 градусов, что есть не естественным для пользователя. Подскажите, как решить этот вопрос? Код ниже.

document.onkeydown = function (event){
if (event.key == 'ArrowRight'){
    Player.direction.transform = 0;
};
if (event.key == 'ArrowLeft') {
    Player.direction.transform = 180;
};
if (event.key == 'ArrowDown'){
    Player.direction.transform = 90;
};
if (event.key == 'ArrowUp'){
    Player.direction.transform = -90;
};
    Player.renderPosition(htmlPlayer,Player);
};

Весь код:

<div id="dot" style="
    position: fixed; 
    border-radius: 50%; 
    -webkit-background-size: cover; 
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform .3s;
    -webkit-transition: transform .3s;
    -moz-transition: transform .3s;
    -o-transition: transform .3s;">
</div>

var htmlPlayer = $('#dot');
var GameMap = {
    width: $(window).width(),
    height: $(window).height()
};
var Player = {
    sizes: {
        width: 36,
        height: 36
    },
    position: {
        top: 0,
        left: 0
    },
    direction: {
        transform: 0
    },
    speed: 1.5,
    backgroundImage: 'img/player.png',
    setPosition: function(pos){
        switch(pos){
            case 'top':
                this.position.top = 0;
                this.position.left = GameMap.width / 2 - (this.sizes.width/2);
            break

            case 'left':
                this.position.left = 0;
                this.position.top = GameMap.height / 2 - (this.sizes.height/2);
            break

            case 'center':
                this.position.top = GameMap.height / 2 - (this.sizes.height/2);
                this.position.left = GameMap.width / 2 - (this.sizes.width/2);
            break

            case 'bottom':
                this.position.top = GameMap.height - (this.sizes.height);
                this.position.left = GameMap.width / 2 - (this.sizes.width/2);
            break

            case 'right':
                this.position.top = GameMap.height / 2 - (this.sizes.height/2);
                this.position.left = GameMap.width - (this.sizes.width);
            break
        }
    },
    renderPosition: function(elm,Player){
        elm.css({
            left: Player.position.left + 'px',
            top: Player.position.top + 'px',
            width: Player.sizes.width + 'px',
            height: Player.sizes.height + 'px',
            transform: 'rotate' + '('+ Player.direction.transform + 'deg)',
            'background-image': 'url('+ Player.backgroundImage +')',
        });
    }
};
Player.setPosition('center');
Player.renderPosition(htmlPlayer,Player);
document.onkeydown = function (event){

    if (event.keyCode) {
        Player.backgroundImage = 'img/player.gif';
    }


    if (event.keyCode == 37){
        if(Player.position.left <= 0){
            Player.position.left = 0;
        }else{
            Player.position.left-=Player.speed;
        }
    }
    if (event.keyCode == 38){
        if(Player.position.top <= 0){
            Player.position.top = 0;
        }else{
            Player.position.top-=Player.speed;
        }
    }
    if (event.keyCode == 39){
        if(Player.position.left >= GameMap.width-Player.sizes.width){
            Player.position.left = GameMap.width-Player.sizes.width;
        }else{
            Player.position.left+=Player.speed;
        }
    }
    if (event.keyCode == 40){
        if (Player.position.top >= GameMap.height-Player.sizes.height) {
            Player.position.top = GameMap.height-Player.sizes.height;
        }else{
            Player.position.top+=Player.speed;
        }
    }

    if (event.keyCode == 37) {
        Player.direction.transform = 180;
    }
    if (event.keyCode == 38){
        Player.direction.transform = -90;
    }
    if (event.keyCode == 39){
        Player.direction.transform = 0;
    }
    if (event.keyCode == 40){
        Player.direction.transform = 90;
    }

    Player.renderPosition(htmlPlayer,Player);
    console.log(Player.direction.transform);
};
document.onkeyup = function(evt){
  if (event.keyCode) {
    Player.backgroundImage = 'img/player.png';      
  }

 Player.renderPosition(htmlPlayer,Player);
 };
});

Интересует момент с поворотами. При той логике, что задал, с положения (event.keyCode == 37) в положение (event.keyCode == 38) будет поворот в 270 градусов. Подскажите варианты решения?


var htmlPlayer = $('#dot');
var GameMap = {
  width: $(window).width(),
  height: $(window).height()
};
var Player = {
  sizes: {
    width: 36,
    height: 36
  },
  position: {
    top: 0,
    left: 0
  },
  direction: {
    transform: 0
  },
  speed: 1.5,
  backgroundImage: 'img/player.png',
  setPosition: function(pos) {
    switch (pos) {
      case 'top':
        this.position.top = 0;
        this.position.left = GameMap.width / 2 - (this.sizes.width / 2);
        break

      case 'left':
        this.position.left = 0;
        this.position.top = GameMap.height / 2 - (this.sizes.height / 2);
        break

      case 'center':
        this.position.top = GameMap.height / 2 - (this.sizes.height / 2);
        this.position.left = GameMap.width / 2 - (this.sizes.width / 2);
        break

      case 'bottom':
        this.position.top = GameMap.height - (this.sizes.height);
        this.position.left = GameMap.width / 2 - (this.sizes.width / 2);
        break

      case 'right':
        this.position.top = GameMap.height / 2 - (this.sizes.height / 2);
        this.position.left = GameMap.width - (this.sizes.width);
        break
    }
  },
  renderPosition: function(elm, Player) {
    elm.css({
      left: Player.position.left + 'px',
      top: Player.position.top + 'px',
      width: Player.sizes.width + 'px',
      height: Player.sizes.height + 'px',
      transform: 'rotate' + '(' + Player.direction.transform + 'deg)',
      'background-image': 'url(' + Player.backgroundImage + ')',
    });
  }
};
Player.setPosition('center');
Player.renderPosition(htmlPlayer, Player);
document.onkeydown = function(event) {

  if (event.keyCode) {
    Player.backgroundImage = 'img/player.gif';
  }


  if (event.keyCode == 37) {
    if (Player.position.left <= 0) {
      Player.position.left = 0;
    } else {
      Player.position.left -= Player.speed;
    }
  }
  if (event.keyCode == 38) {
    if (Player.position.top <= 0) {
      Player.position.top = 0;
    } else {
      Player.position.top -= Player.speed;
    }
  }
  if (event.keyCode == 39) {
    if (Player.position.left >= GameMap.width - Player.sizes.width) {
      Player.position.left = GameMap.width - Player.sizes.width;
    } else {
      Player.position.left += Player.speed;
    }
  }
  if (event.keyCode == 40) {
    if (Player.position.top >= GameMap.height - Player.sizes.height) {
      Player.position.top = GameMap.height - Player.sizes.height;
    } else {
      Player.position.top += Player.speed;
    }
  }

  if (event.keyCode == 37) {
    Player.direction.transform = 180;
  }
  if (event.keyCode == 38) {
    Player.direction.transform = -90;
  }
  if (event.keyCode == 39) {
    Player.direction.transform = 0;
  }
  if (event.keyCode == 40) {
    Player.direction.transform = 90;
  }

  Player.renderPosition(htmlPlayer, Player);
  console.log(Player.direction.transform);
};
document.onkeyup = function(evt) {
if (event.keyCode) {
  Player.backgroundImage = 'img/player.png';
}

Player.renderPosition(htmlPlayer, Player);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dot" style="
    	position: fixed; 
    	border-radius: 50%; 
    	-webkit-background-size: cover; 
    	background-size: cover;
    	background-repeat: no-repeat;
    	transition: transform .3s;
    	-webkit-transition: transform .3s;
    	-moz-transition: transform .3s;
    	-o-transition: transform .3s;">
</div>

(Полная картина)

Интересует момент с поворотами. При той логике, что задал, с положения (event.keyCode == 37) в положение (event.keyCode == 38) будет поворот в 270градусов. Подскажите варианты решения?

4
  • Можете уточнить в вопросе, чем вам конкретно мешает угол в 270 градусов?
    – Kromster
    17 июн 2018 в 11:48
  • Это не естественно, что в игре что в жизни всегда будешь делать/ожидать 90 или 180 градусов. Если я нахожусь в позиции Up, то я хочу повернуть на 90 градусов влево, а не на 270. 17 июн 2018 в 11:50
  • Естественность понятие относительное и индивидуальное. Мне, например, -90 непривычно )) В любом случае, опишите пожалуйста это уточнение в вопросе и добавьте, простая замена if a == 270 then a = -90 вам подойдет, и если нет, то почему, какие доп.условия?
    – Kromster
    17 июн 2018 в 11:55
  • Положение Up (-90) нажимаю Right = 0 Положение Right (0) нажимаю Down = 90 Положение Down (90) нажимаю Left = 180 Положение Left (180) нажимаю Up = -90 (Идет разворот с углом в 270) 17 июн 2018 в 12:23

1 ответ 1

0

Судя по всему движок за кадром производит интерполяцию угла. При переходе между 0° и 90° всё работает нормально потому что интерполяция будет по кратчайшему пути. А вот при переходе через 360° так не работает потому что из 350 к 10 кратчайший путь будет через повернуть на +20°, а не на -340°. Как одно из решений можно находить ближайший угол из соседних витков (-90°, -90° + 360° и -90° - 360°). В этом случае нужно учитывать изначальное направление.

var directions = {
    ArrowRight: 0,
    ArrowDown: 90,
    ArrowLeft: 180,
    ArrowUp: -90
};

document.onkeydown = function (event) {
    if (event.key in angles) {
        var targetAngle = directions[event.key];
        var delta = targetAngle - Player.direction;
        Player.direction.transform = Player.direction + delta;
    }
}

Но здесь появляется нюанс - теперь положение игрока может принимать значения больше 180° и меньше -90°. Чтобы это учесть, нужно при вычислении delta вычесть количество полных оборотов:

document.onkeydown = function (event) {
    if (event.key in angles) {
        // Вычитаем количество целых оборотов
        var normPlayerDirection = (Player.direction + 90) % 360 - 90;
        var targetAngle = directions[event.key];
        // Считаем угол, на который нужно повернуть объект
        var delta = targetAngle - normPlayerDirection;
        Player.direction.transform = Player.direction + delta;
        Player.renderPosition(htmlPlayer, Player);
    }
}

Но это решение далеко от наилучшего. Если вращать достаточно долго, то можно прийти к значениям, где абсолютный угол будет иметь очень высокие значения и погрешность вычислений чисел с плавающей точкой будет заметно. Чтобы этого избежать нужно посмотреть на то, как реализовано вращение в движке и выбрать более подходящие функции для изменения угла.

1
  • Спасибо:) Посмотрите, пожалуйста, ниже весь движок. 19 июн 2018 в 17:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.