Move background with arrow
I want to speed up the entire background if we press the up and down arrow keys.
I tried to do this but doesn't work.
this.speed
- control the speed for the background.
So I put an if statement and said that if the up arrow key is pressed set 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 I included for the up arrow keys, but doesn't work:
$(document).keydown(function(e){
if(e.keyCode == 38) {
this.speed = 10;
});
}
thank
+3
source to share
1 answer
If you want to set the "speed" property of your "Background" object to 10, you should not set the "this.speed" value to 10, because in the keydown function "this" does not refer to your background object.
This is probably what you wanted to do:
$(document).keydown(function(e){
if(e.keyCode == 38) {
game.background.speed = 10;
}
});
+2
source to share