title: Move Background With Arrow Key Press
body: <p>I want to speed up my whole background if press the up &amp; arrow keys. </p>
  
  <p>I have tried to do it but do not work.</p>
  
  <p><code>this.speed</code> is to control the speed for the background.</p>
  
  <p>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)</p>
  
  <p>This is my Code:</p>
  
  <pre><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 &gt; 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;
  
  });
  </code></pre>
  
  <p>}</p>
  
  <p>This is the Code that i have included for the up arrow keys, but doesn't work:</p>
  
  <pre><code>    $(document).keydown(function(e){
          if(e.keyCode == 38) {
  
        this.speed = 10;
  
      });
  } 
  </code></pre>
  
  <p>Thanks</p>