Движение по полосе холста

Question

Я пытаюсь собрать простую «игру» в HTML5. Однако я не могу заставить диагональное движение работать. «Диагональное движение» работает только тогда, когда две кнопки нажаты в одно и то же время. Даже тогда он движется один раз. Вот код:

// Getting canvas, and canvas context 
    var c = document.getElementById("canvas"); 
    var ctx = c.getContext("2d"); 
    //Keymap, later passed as method parameter 
    var map = [false,false,false,false]; 
    // Top, Right, Bottom, Left 


    // Function for resetting keymap 
    var resetMap = function() { 
     for(i=0;i<map.length;i++) { 
      map[i] = false; 
     }; 
    }; 


    //Function for clearing the screen before drawing 
    var clrScrn = function() { 
     ctx.clearRect(0,0,500,500); 
    }; 

    // The player character 
    var character = function() { 
     this.x = 50; 
     this.y = 50; 
     this.h = 50; 
     this.w = 50; 
    }; 

     // Draw method of the character class 
     character.prototype.draw = function() { 
      ctx.fillRect(this.x,this.y,this.h,this.w); 
     }; 

     // The move method of the character class 
     character.prototype.move = function(map) { 


      if(map[0] === true) { 
       if(map[1] == true) { 
        this.x+=5; 
        this.y-=5; 
        console.log("Pressed at the same time"); 
       } 
       else { 
        this.y-=5; 
       } 
      } 

      else if(map[1] === true) { 
       this.x+=5; 
      }    
      else if(map[2] === true) { 
       this.y+=5; 
      }    
      else if(map[3] === true) { 
       this.x-=5; 
      } 
     }; 


    //Making a new character 
    var player = new character(); 
     player.draw(); 


    // Drawing everything on screen 
    var render = function() { 

     clrScrn(); 
     player.move(map); 
     player.draw(); 
     resetMap(); 

     requestAnimFrame(render); 
    }; 

    //Calling the render function 
    render(); 

    //Binding event listener to window,checking key down, likely the source of the problem 
    window.addEventListener("keydown",function(e){ 


     if(e.keyCode == 38 && e.keyCode == 39) { 
      map[0] = true; 
      map[1] = true; 
     } 

     else if(e.keyCode == 38) { 
      map[0] = true; 
     } 
     if(e.keyCode == 39) { 
      map[1] = true; 
     } 
     if(e.keyCode == 40) { 
      map[2] = true; 
     } 
     if(e.keyCode == 37) { 
      map[3] = true; 
     } 

     console.log(e.keyCode); 

    },false); 


    //Binding event listener to key up 
    window.addEventListener("keyup",function(e){ 
     resetMap(); 
    },false); 

Answer 1

В вашей визуализации функции:

player.move(map); // you move the player 
    player.draw(); // you draw the player 
    resetMap();  // you forget all pressed keys 

resetMap() причина вам нужно снова нажать клавиши для перемещения только еще один шаг.

Обратите внимание, что горизонтальные и вертикальные движения могут случайно срабатывать из-за повторения клавиатуры, когда клавиша нажата в течение длительного времени. Но вы не должны зависеть от ключевых повторов для игры. Вы должны определять ключ вниз и вводить ключ отдельно для отдельных клавиш, чтобы выяснить, нажата ли клавиша или нет.

Answer 2

попробуйте найти на сайте: JavaScript multiple keys pressed at once

, а затем снова работать ваш, если/иначе логика немного.