2017-06-05 4 views
-2

Ich versuche, zwei Spieler zu steuern und sie mit einer bestimmten Geschwindigkeit zu bewegen, ich bekomme keine Fehler in der Konsole und es schreibt, was es tun soll ... Aber Ich sehe keine Aktion.Javascript verschieben Spieler mit Tasten

//control system 

    window.addEventListener('keydown', function (event) { 
    //left key 
     if (event.keyCode === 37) { 
      playerOne.x -= 1; 
      console.log("player 1 left"); 
     } 
    //right key 
     else if (event.keyCode === 39) { 
      playerOne.x += 1; 
      console.log("player 1 right"); 
     } 
    //up key 
     else if (event.keyCode === 38) { 
      playerOne.y -= 1; 
      console.log("player 1 up"); 
     } 
    //down 
     else if (event.keyCode === 40) { 
      playerOne.y += 1; 
      console.log("player 1 down"); 
     } 
    // bomb 
     else if (event.keyCode === 13) { 
      console.log("place bomb"); 
     } 
    }); 
    window.addEventListener('keydown', function (event) { 
    //left key 
     if (event.keyCode === 65) { 
      playerTwo.x -= 1; 
      console.log("player 2 left"); 
     } 
    //right key 
     else if (event.keyCode === 68) { 
      playerTwo.x += 1; 
      console.log("player 2 right"); 
     } 
    //up key 
     else if (event.keyCode === 87) { 
      playerTwo.y -= 1; 
      console.log("player 2 up"); 
     } 
    //down 
     else if (event.keyCode === 83) { 
      playerTwo.y += 1; 
      console.log("player 2 down"); 
    } 
    // bomb 
    else if (event.keyCode === 32) { 
     console.log("place bomb"); 
    } 
}); 

function movePlayers() { 
    "use strict"; 
    if (keys.moveLeft) { 
     playerOne.x -= powerUps.speed; 
     if (playerOne.currentDirection != "left") { 
      playerOne.gotoAndPlay('left') 
      playerOne.currentDirection = "left"; 
     } 
    } 
    if (keys.moveRight) { 
     playerOne.x += powerUps.speed; 
     if (playerOne.currentDirection != "right") { 
      playerOne.gotoAndPlay('right') 
      playerOne.currentDirection = "right"; 
     } 
    } 
    if (keys.moveUp) { 
     playerOne.y -= powerUps.speed; 
     if (playerOne.currentDirection != "up") { 
      playerOne.gotoAndPlay('up') 
      playerOne.currentDirection = "up"; 
     } 
    } 
    if (keys.moveDown) { 
     playerOne.y += powerUps.speed; 
     if (playerOne.currentDirection != "down") { 
      playerOne.gotoAndPlay('down') 
      playerOne.currentDirection = "down"; 
     } 
    } 
    if (keys.moveLeft) { 
     playerTwo.x -= powerUps.speed; 
     if (playerTwo.currentDirection != "left") { 
      playerTwo.gotoAndPlay('left') 
      playerTwo.currentDirection = "left"; 
     } 
    } 
    if (keys.moveRight) { 
     playerTwo.x += powerUps.speed; 
     if (playerTwo.currentDirection != "right") { 
      playerTwo.gotoAndPlay('right') 
      playerTwo.currentDirection = "right"; 
     } 
    } 
    if (keys.moveUp) { 
     playerTwo.y -= powerUps.speed; 
     if (playerTwo.currentDirection != "up") { 
      playerTwo.gotoAndPlay('up') 
      playerTwo.currentDirection = "up"; 
     } 
    } 
    if (keys.moveDown) { 
     playerTwo.y += powerUps.speed; 
     if (playerTwo.currentDirection != "down") { 
      playerTwo.gotoAndPlay('down') 
      playerTwo.currentDirection = "down"; 
     } 
    } 
} 
+0

einige html bitte –

+0

Sind Sie 'X' mit und 'y' Werte irgendwo um Positionen zu aktualisieren? – Arg0n

+0

Die Keydown-Event-Handler sollten funktionieren. Das Problem muss woanders liegen. Z.B. in der Art, wie die 'Schlüssel'-Variable eingerichtet wird. Du weist dieser Variablen niemals etwas zu oder veränderst sie. –

Antwort

0

Das ist nur ein Tipp keine Antwort - aber der Platz in Kommentaren reicht nicht aus.

ich das ist nicht ein guter Weg, mit Ihrem „wenn“ -Konstruktion denkt, eine Probe für einen einfacheren Weg:

<!doctype html> 
 
    <html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>Table key´s</title> 
 
    <style> 
 
     td{width:10px;height:10px;background:#ddd;} 
 
     tr:nth-child(5) td:nth-child(5){background:#f00;} 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="tableContainer"> 
 
    </div> 
 
    <script>  
 
     var row=col=5,max=10; 
 
     tableContainer.innerHTML = '<table>'+('<tr>'+'<td>'.repeat(max)).repeat(max)+'</table>'; 
 
     window.addEventListener("keyup", function(e){ 
 
     var colDiff, rowDiff; 
 
     var keyMap = new Map([[37,[-1,0]],[38,[0,-1]],[39,[1,0]],[40,[0,1]]]); 
 
     if (keyMap.has(e.keyCode)){ 
 
      document.querySelector(`tr:nth-child(${row}) td:nth-child(${col})`).style.background='#ddd'; 
 
      [colDiff,rowDiff]=keyMap.get(e.keyCode); 
 
      row+=rowDiff; 
 
      col+=colDiff; 
 
      row = (row>max) ? max : (row < 1) ? 1 : row; 
 
      col = (col>max) ? max : (col < 1) ? 1 : col; 
 
      document.querySelector(`tr:nth-child(${row}) td:nth-child(${col})`).style.background='#f00'; 
 
     } 
 
     }) 
 
    </script> 
 
    </body> 
 
    </html>

+0

Beachten Sie, dass 'repeat()' und 'Map()' eingeschränkte Browserunterstützung haben – charlietfl

Verwandte Themen