JavaScript



  • I've done a function that moves characters on different sides, an example:

    function handleInput() {
    window.addEventListener("keydown", function(event) {
    if (event.keyCode == 65)
        ractive.set({'playerX': ractive.get( 'playerX' ) - 1});
    if (event.keyCode == 68)
        ractive.set({'playerX': ractive.get( 'playerX' ) + 1});
    if (event.keyCode == 87)
        ractive.set({'playerY': ractive.get( 'playerY' ) - 1});
    if (event.keyCode == 83)
        ractive.set({'playerY': ractive.get( 'playerY' ) + 1});
    });
    

    I will not go into detail, as exemplified by the fact that the movement is taking place at the event of the keyDown - so, when the keyboard is pressurized and held, the player first shifts to one picsel, and only then, within a quarter of a second, continues to move on, I don't know if the problem can be solved, but I don't think it's true. How do you manage the travel of a cross? Maybe someone has references to useful articles on this?



  • Sign on keydown and keyup♪ In the first place, display a flag of traffic in this direction, in the second, remove it. It's the timer itself to check if the button is pressed.

    https://jsfiddle.net/fwg53xc8/6/ in chromium or FF (from ES6):

    ~function() {
      var LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40;
      var dirs = {[LEFT]: 0, [UP]: 0, [RIGHT]: 0, [DOWN]: 0};
      var SPEED = 10;
      var x = 0, y = 0;
    

    $(document).keydown(function(e) {
    dirs[e.keyCode] = 1;
    }).keyup(function(e) {
    dirs[e.keyCode] = 0;
    });

    setInterval(function() {
    var $div = $("div");

    x -= dirs[LEFT] * SPEED;
    x += dirs[RIGHT] * SPEED;
    y -= dirs[UP] * SPEED;
    y += dirs[DOWN] * SPEED;
    
    $div.css('transform', `translate(${x}px, ${y}px)`);
    

    }, 100);
    }();

    div {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -.5em -.5em 0 0;
    background: red;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    transform: translate(0, 0);
    transition: transform 100ms linear;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div></div>

    requestAnimationFrame

    https://ru.stackoverflow.com/q/529457/178988

    On the contrary, the vector motion shall be carried out on a plane, acceleration or deceleration as desired, and also in space. You're at the most primitive level now.

    Again. I have a very specific case. There's a cage field with all the objects in the cells. For one move, the player either stays in the current cell or moves into one of the eight neighbors. In this way, I'm not interested in the constant speed of the diagonal movement, I'm interested in moving from cell to cell.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2