Question

我正在使用简单的vanilla javascript构建pong模拟器，您可以在Codepen或GitHub上看到代码。

我想使用计算机的按键控制和移动设备的屏幕按键按下。我在按下屏幕按钮时出现问题。从脚本的第149行开始，我试图用事件监听器更新leftButtonPressed变量的值：

//Storing control button presses

var leftButton = document.getElementById('left-button'); //Get left button
var leftButtonPressed = false; //variable to store whether or not the left button is pressed

var leftMouseDown = function(){ //function to update leftButtonPressed
    leftButtonPressed = true;
};

var leftMouseUp = function(){ //funciton to update leftButtonPressed
    leftButtonPressed = false;
};

//Event listeners to see if left button is pressed

leftButton.addEventListener('mousedown',leftMouseDown,false);
leftButton.addEventListener('mouseup',leftMouseUp, false);

//Printing left button press to screen

var buttonPressedText = document.createTextNode(leftButtonPressed);
var buttonPressedTextElement = document.getElementById('button-pressed');
buttonPressedTextElement.innerHTML = '';
buttonPressedTextElement.appendChild(buttonPressedText);

为什么我的leftButtonPressed变量没有更新？

以下是了解脚本上下文的额外信息：

我使用以下内容更新我的对象并以60 fps重新绘制画布：

//Call step 60 times per second

var animate = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function (callback) { 
        window.setTimeout(callback, 1000 / 60); 
    };
;

//Loop through update, render, animate

var step = function() {
    score();
    update();
    render();
    animate(step);
};

如您所见，每次更新播放器对象时都会运行要更新leftButtonPress的脚本部分。

感谢您的帮助：）

Answer 1

我还必须重写你的HTML，因为你的git版本没有显示按钮。我将<div id="controls" class="visible-xs-block">更改为<div id="controls">以查看按钮。我改变了你的JS，这样听众只会被应用一次。因此我引入了Player.prototype.build = function ()，它被称为一次。这是一个访问您打印状态区域的小黑客：

var self = this;
var leftMouseDown = function(){ //function to update leftButtonPressed
    leftButtonPressed = true;
    self.buttonPressedTextElement.innerHTML = 'pressed';
};

var leftMouseUp = function(){ //funciton to update leftButtonPressed
    leftButtonPressed = false;
    self.buttonPressedTextElement.innerHTML = 'not pressed';
};

更改了代码播放器：

function Player() {
   this.build()
   this.paddle = new Paddle(playerStartPositionX, playerStartPositionY);
   this.score = 0;
};

新的Code Player构建：

Player.prototype.build = function () {
    //Storing control button presses

    var buttonPressedText = document.createTextNode(leftButtonPressed);
    this.buttonPressedTextElement = document.getElementById('button-pressed');
    this.buttonPressedTextElement.innerHTML = '';
    this.buttonPressedTextElement.appendChild(buttonPressedText);

    var leftButton = document.getElementById('left-button'); //Get left button
    var leftButtonPressed = false; //variable to store whether or not the left button is pressed

    var self = this;
    var leftMouseDown = function(){ //function to update leftButtonPressed
        leftButtonPressed = true;
        self.buttonPressedTextElement.innerHTML = 'pressed';
    };

    var leftMouseUp = function(){ //funciton to update leftButtonPressed
        leftButtonPressed = false;
        self.buttonPressedTextElement.innerHTML = 'not pressed';
    };

    //Event listeners to see if left button is pressed

    leftButton.addEventListener('mousedown',leftMouseDown,false);
    leftButton.addEventListener('mouseup',leftMouseUp, false); 
}

新代码播放器更新：

 Player.prototype.update = function() {
    for(var key in keysDown) {
        var value = Number(key);
        if(value == 37) { // left arrow pressed
            this.paddle.move(-playerSpeed, 0);
        } else if (value == 39) { // right arrow pressed
            this.paddle.move(playerSpeed, 0);
        } else {
            this.paddle.move(0, 0);
        };
    };
};

这就是你想要的。正如我所说，应用于git版本

Mousedown事件监听器按钮按下不起作用

1 个答案: