Move Background With Arrow Key Press

Question

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.speed is to control the speed for the background.

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)

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

score 2 · Answer 1 · edited May 23 '17 at 10:32

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.

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?

Move Background With Arrow Key Press

1 Answers1