2个物体

编辑使用键盘输入：解决2个物体

我在日本高中的学生努力学习如何编程。我最近查看https://vimeo.com/105955605这个视频，并决定我可以使用开始部分开始在JavaScript中建立pong。

我几乎是一个完整的新手编程和/或JavaScript，我还有很长的路要走。

我得到了Player1（左桨）自己的工作，所以我想我可以复制粘贴，与一些事情混乱，并使Player2。然而，现在当我按下w/s时，Player2会移动，但Player1不再移动。我试过在player2（Player2.keyboarder = Player1.keyboarder（））中使用Player1中的Player1中的this.keyboarder创建2个单独的keyboarder（）函数，并在做其他任何事情之前声明/调用keyboarder（）。

HTML：

<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Pong</title> 
     <link type="text/css" rel="stylesheet" href="css/stylesheet.css"> 
    </head> 
    <body> 
     <canvas id="screen" width="310" height="210"></canvas> 
     <script src="js/pong.js"></script> 
    </body> 
</html>

的JavaScript：

;(function(){ 

//Main game function 
    //tells objects in bodies array to update. 
    //stores gameSize pulled from canvasId 
    var Game = function(canvasId){ 
     var canvas = document.getElementById(canvasId); 
     var screen = canvas.getContext('2d'); 
     var gameSize = {x: canvas.width, y: canvas.height}; 
     var self = this; 
//bodies array 
     this.bodies = [new Player1(this, gameSize), new Player2(this, gameSize)]; 
//update function 
     var tick = function(){ 
     self.update(); 
     self.draw(screen,gameSize); 
     requestAnimationFrame(tick); 
     }; 
     tick(); 
    }; 
//constructer for game() function. tells bodies to update, and draw 
    Game.prototype = { 
     update: function(){ 
      for(var i =0 ; i < this.bodies.length; i++){ 
       this.bodies[i].update(); 
      } 
     }, 
     draw:function(screen,gameSize){ 
      screen.clearRect(0,0,gameSize.x,gameSize.y); 
      for(var i =0 ; i < this.bodies.length; i++){ 
       drawRect(screen, this.bodies[i]); 
      } 
     } 
    }; 
//P1 object, declares size and start position of P1 
    var Player1= function(game, gameSize){ 
     this.size = {x:30,y:gameSize.y/3}; 
     this.game = game; 
     this.gameSize = gameSize; 
     this.center = {x: 0, y:gameSize.y/2}; 
     this.keyboarder = new Keyboarder(); 
     requestAnimationFrame(this.update); 
    }; 
//constructor for P1, updates position based on keyboard input 
    Player1.prototype = { 
     update:function(){ 
      if (this.keyboarder.isDown(this.keyboarder.KEYS.DOWN) && this.center.y < (5*this.gameSize.y/6)){ 
       this.center.y += 4; 
      }else if(this.keyboarder.isDown(this.keyboarder.KEYS.UP) && this.center.y > this.size.y /2){ 
       this.center.y -= 4; 
      } 
     } 
    }; 
//P2, same as P1 aside from position 
    var Player2= function(game, gameSize){ 
     this.size = {x:30,y:gameSize.y/3}; 
     this.game = game; 
     this.gameSize = gameSize; 
     this.center = {x: gameSize.x, y:gameSize.y/2}; 
     this.keyboarder = new Keyboarder(); 
     requestAnimationFrame(this.update); 
    }; 
//constructor for P2, same as P1 
    Player2.prototype = { 
     update:function(){ 
      if (this.keyboarder.isDown(this.keyboarder.KEYS.S) && this.center.y < (5*this.gameSize.y/6)){ 
       this.center.y += 4; 
      }else if(this.keyboarder.isDown(this.keyboarder.KEYS.W) && this.center.y > this.size.y /2){ 
       this.center.y -= 4; 
      } 
     } 
    }; 
//Draw function, draws object 
    var drawRect = function(screen, body){ 
     screen.fillRect(body.center.x - body.size.x /2, 
       body.center.y - body.size.y /2, body.size.x,body.size.y); 
    }; 
//Keyboard input function 
    //reads if keys are being pressed and takes the event code 
    //isDown() returns boolean of key down = true, key up = false 
    var Keyboarder = function(
     ){ 
     var keyState = {}; 

     window.onkeydown = function(e){ 
      keyState[e.keyCode] = true; 
     }; 
     window.onkeyup = function(e){ 
      keyState[e.keyCode] = false; 
     }; 
     this.KEYS = {DOWN: 37, UP:39,W:87 , S: 83}; 

     this.isDown = function(keyCode){ 
      return keyState[keyCode] === true; 
     }; 

    }; 
//calls game() function when the page has loaded. 
    window.onload = function(){ 
     new Game("screen") 
    }; 
})();

很抱歉，如果这是不好的协议，用于使用计算器，我也新提出问题在这里。

来源

2014-10-10 Spaghet

无需编辑它即可解决问题 - 如果其中一个答案帮助您解决了问题，则可以使用勾号接受它。如果有一个以上是有用的，可以随意投它们两个，然后选择一个作为“最有帮助的”。 – 2014-10-10 11:27:34

当你创建两个Keyboarder情况下，一个与其他碰撞，因为这样：

window.onkeydown = function(e){ 
    keyState[e.keyCode] = true; 
}; 
window.onkeyup = function(e){ 
    keyState[e.keyCode] = false; 
};

当你创建一个Keyboarder，事件侦听器连接上一个被覆盖。尝试这样的：

window.addEventListener('keydown', function(e){ 
    keyState[e.keyCode] = true; 
}); 
window.addEventListener('keyup', function(e){ 
    keyState[e.keyCode] = false; 
});

这确保有每个Keyboarder实例的侦听器。

来源

2014-10-10 11:05:29 STT

谢谢！它工作完美！ – Spaghet 2014-10-10 11:24:41

问题是你有两个Keyboarder实例，它们都通过直接给它们分配一个处理程序来绑定到键事件 - 这将覆盖任何其他处理程序。有两种方法来解决这个问题：

1：不要直接分配，而是使用addEventListener，如：

window.addEventListener('keydown', function(e){ 
    keyState[e.keyCode] = true; 
});

2：使用相同keyboarder实例为双方球员：

var kb = new Keyboarder(); 
this.bodies = [new Player1(this, gameSize, kb), new Player2(this, gameSize, kb)];

并在你的播放器对象中分配给第三个参数。即使你走这条路，我仍然建议使用addEventListener，以确保事件可以在多个地方绑定，如果需要的话。

另一方面，您还应该能够将玩家重构为单个函数，并使用不同的参数创建它的两个实例，但这种事情最好在Code Review上处理。

来源

2014-10-10 11:07:54

谢谢！它使用window.addEventListener方式工作。 – Spaghet 2014-10-10 11:25:07

回答

相关问题