Javascript 按箭头键移动背景
如果按向上和箭头键,我想加速整个背景 我试过了,但没有成功Javascript 按箭头键移动背景,javascript,jquery,background,Javascript,Jquery,Background,如果按向上和箭头键,我想加速整个背景 我试过了,但没有成功 此.speed用于控制背景的速度 所以我放了一个if语句,说如果按了向上箭头键,那么把速度设为10。(你可以看到下面的代码) 这是我的代码: //Setting the canvas and context var canvas = document.getElementById('background'); var context = canvas.getContext('2d'); //====================
此.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;
});
}
谢谢如果要将“背景”对象的“速度”属性设置为10,则不应将“this.speed”设置为10,因为在按键功能中,“this”并不指背景对象
这可能就是你想要做的:
$(文档).keydown(函数(e){
如果(e.keyCode==38){
game.background.speed=10;
}
});
见: