Javascript用键移动玩家

时间:2017-06-05 11:10:21

标签: javascript

我试图能够控制两个玩家并让它们以一定的速度移动,我在控制台中没有出现任何错误并且写出了应该做的事情......但我看不到行动正在发生。

//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";
        }
    }
}

1 个答案:

答案 0 :(得分:0)

这只是一个Tipp而不是答案 - 但评论中的位置还不够。

我认为这对你的“if”构造来说不是一个好方法,一个更容易的方法的样本:

  <!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>