Javascript 使用箭头键移动背景

Move Background With Arrow Key Press

提问by The Good Guy

I want to speed up my whole background if press the up & arrow keys.

如果按向上和箭头键，我想加快我的整个背景。

I have tried to do it but do not work.

我试图这样做，但不起作用。

this.speedis to control the speed for the background.

this.speed是控制背景速度。

So I put an if statement and said if up arrow key pressed then put the speed to 10.(You can see the Code below)

所以我放了一个 if 语句并说如果按下向上箭头键然后将速度设置为 10。（你可以看到下面的代码）

This is my Code:

这是我的代码：

//Setting the canvas and context
var canvas = document.getElementById('background');
var context = canvas.getContext('2d');



//===========================
//ENTER: MOVING BACKGROUND
//===========================

//Creating one abstract object to hold all images
var imageRepository = new function() {
    //Upload background image
    this.background = new Image();
    this.background.src = "http://fc07.deviantart.net/fs70/f/2013/174/3/e/recycled_texture_background_by_sandeep_m-d6aeau9.jpg";
};

//Abstract function that will hold most all other properties
function Drawable() {
    this.init = function(x, y) {
        // Default variables
        this.x = x;
        this.y = y;
    };
    this.speed = 0;
    this.canvasWidth = 0;
    this.canvasHeight = 0;

    this.draw = function() {

    this.keys = keypress_handler();
    };
}

//Creating the background image and drawing it
function Background() {

    this.speed = 1; // Resetting speed of background for animation (positive so top to bottom motion)
    this.draw = function() {
        //Setting velocity to y-component, since track needs to go from top to bottom
        this.y += this.speed;
        this.context.drawImage(imageRepository.background, this.x, this.y);
        // Draw it again for animation, top edge of the first background
        this.context.drawImage(imageRepository.background, this.x, this.y - this.canvasHeight);
        // If one background ends, reset
        if (this.y > this.canvasHeight)
            this.y = 0;

                 };
    }


// Make background have properties from Drawable function
Background.prototype = new Drawable();

//Makes object to hold everything else the game will have
function Game() {
    this.init = function() {
        // Gets canvas element
        this.bgCanvas = document.getElementById('background');
        // Sees if canvas is supported by the browser
        if (this.bgCanvas.getContext) {
            this.bgContext = this.bgCanvas.getContext('2d');
            // Initialize objects to contain their context and canvas
            Background.prototype.context = this.bgContext;
            Background.prototype.canvasWidth = this.bgCanvas.width;
            Background.prototype.canvasHeight = this.bgCanvas.height;
            // Initialize the background image
            this.background = new Background();
            this.background.init(0,0); // Set draw point to 0,0
            return true;

        } else {
            return false;



    }
    };
    // Start the animation loop for the background
    this.start = function() {
        animate();
    };
}

//Requests animation frame
function animate() {
    requestAnimFrame( animate );
    game.background.draw();
}

//Setting all animation frames required
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame   ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            function(callback, element){
                window.setTimeout(callback, 1000 / 60);
            };
})();

//Create the final object and run it
var game = new Game();
function init() {
    if(game.init())
        game.start();


}

$(document).keydown(function(e){
    if(e.keyCode == 38) {

  this.speed = 10;

});

}

}

This is the Code that i have included for the up arrow keys, but doesn't work:

这是我为向上箭头键包含的代码，但不起作用：

    $(document).keydown(function(e){
        if(e.keyCode == 38) {

      this.speed = 10;

    });
} 

Thanks

谢谢

回答by rdans

If you want to set the "speed" property of your "Background" object to 10 then you should not be setting "this.speed" to 10, because in the keydown function, "this" does not refer to your background object.

如果要将“Background”对象的“speed”属性设置为 10，则不应将“this.speed”设置为 10，因为在 keydown 函数中，“this”并不指您的背景对象。

This is probably what you meant to do:

这可能是你想要做的：

$(document).keydown(function(e){
    if(e.keyCode == 38) {
      game.background.speed = 10;
    }
});

See: How does the "this" keyword work?

请参阅：“this”关键字如何工作？