как я могу держать своего игрового персонажа на холсте? - PullRequest
Новая
       13

как я могу держать своего игрового персонажа на холсте?

0 голосов
/ 30 августа 2018

Я работаю над игрой, похожей на лягушку, и у меня есть следующий код для перемещения моего персонажа вокруг элемента canvas. Код работает, однако персонаж может «выйти / покинуть» холст. Я попытался поместить handleInput() в update(dt) (проверки обновлений), вложенном в оператор if (if player.x is > don't do this....), но я получил синтаксическую ошибку. Тройное утверждение в switch работает - однако, именно так они и сделали в учебнике, которому я следовал, и я очень стараюсь не просто «скопировать» учебник. Любой совет высоко ценится! 

window.allowedKeys = {
    37: 'left',
    38: 'up',
    39: 'right',
    40: 'down'
};

const allowedKeys = window.allowedKeys;

 update(dt){

    }

    handleInput(input){

        switch(input) {
            case 'left':
             allowedKeys['left'] = this.x -= 1;
                break;
            case 'up':
            allowedKeys['up'] = this.y -= 1;
                break;
            case 'right':
            allowedKeys['right'] = this.x += 1;
                break;
            case 'down':
            allowedKeys['down'] = this.y += 1;
                break;
            default:
                break;
        }
    }
document.addEventListener('keyup', function(e) {

    player.handleInput(allowedKeys[e.keyCode]);

});

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Я думаю, что вы хотите проверить, что является ключом, который пользователь нажимает, вот пример, я использую прототип, но я полагаю, что вы используете класс es6. Вам не нужно объявлять глобальную переменную selectedKeys и не обновлять ее. Я надеюсь, что вам поможет 

// movements with javascript
const allowedKeys = {
    37: 'left',
    38: 'up',
    39: 'right',
    40: 'down'
};

function Player(target)  {
  this.x = 0
  this.y = 0
  this.target = target
}

Player.prototype.handleInput = function(input){
        switch(input) {
            case 'left':
               this.x -= 1;
                break;
            case 'up':
              this.y -= 1;
                break;
            case 'right':
              this.x += 1;
                break;
            case 'down':
              this.y += 1;
                break;
            default:
                break;
        }
    }


Player.prototype.update = function (dt){

}

const player = new Player("player1")

document.addEventListener('keyup', function(e) {
    player.handleInput(allowedKeys[e.keyCode]);
    const element = document.getElementById(player.target)
    element.innerHTML = "x:" + player.x + "  y:" + player.y
});
<div id="player1"> Press an Arrow </div>
0 голосов
/ 30 августа 2018

добавление этого в update () решило проблему :) с забавным дополнительным преимуществом прокрутки экрана влево / вправо! 

update(dt){
       if(player.x > 5){
           player.x = 0;
       }
       if(player.x < 0){
        player.x = 5;
    }
        if(player.y > 4.5){
            player.y -= 1;
        }
    }
...