用箭头键移动背景按

Question

如果按下方向键&，我想加快整个背景。

我试图做到这一点，但不工作。

this.speed是为了控制背景的速度。

所以我把一个if语句，并说，如果向上箭头键按下，然后把速度10（你可以看到下面的代码）

这是我的代码：

//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; 

}); 

}

这是我已经包括向上箭头键的代码，但不工作：

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

     this.speed = 10; 

    }); 
} 

谢谢

Answer 1

如果要将“背景”对象的“速度”属性设置为10，则不应将“this.speed”设置为10，因为在keydown函数中，“this”不引用到你的背景对象。

这可能是你的意思办：

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

参见：How does the "this" keyword work?