Question

编辑：已解决

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

我几乎是编程和/或javascript的新手，我还有很长的路要走。

我让Player1（左桨）独立工作，所以我想我可以复制粘贴，搞乱一些东西，然后制作Player2。但是，现在当按下w / s时Player2会移动，但是Player1不再移动。

我尝试创建2个单独的keyboarder（）函数，使用player2中的this.keyboarder在player2（Player2.keyboarder = Player1.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")
    };
})();

很抱歉，如果这是使用stackoverflow的错误协议，我也是新问题。

Answer 1

问题是你有两个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)];

并在您的播放器对象中将其指定给此第3个参数。即使你走这条路，我仍然会建议你使用addEventListener来简单地确保在必要时可以将事件绑定到多个地方。

另一方面，你也应该能够将你的玩家重构成一个单独的函数，并使用不同的参数创建它的两个实例，但在Code Review上更好地解决这个问题。

Answer 2

当你创建两个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的每个实例都有侦听器。

使用键盘输入2个对象

2 个答案: