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

如果你想设置＆＃34;速度＆＃34;您的财产＆＃34;背景＆＃34;反对10然后你不应该设置＆＃34; this.speed＆＃34;到10，因为在keydown函数中，＆＃34;这个＆＃34;没有引用你的背景对象。

这可能是你的意思：

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

请参阅：How does the "this" keyword work?

用箭头按键移动背景

1 个答案: