// Variables for Canvas

var canvas = document.getElementById('background');

var context = canvas.getContext('2d');

​

// Skateboard

​

​

//variable skate board

var skate = new Image();

skate.src = "file:///H:/Desktop/game9/img/hqdefault.jpg";

​

//Setting properties of skate

var x = 90;

var y = 90;

var speed = 10;

var angle = 90;

var mod = 0;

​

//Event listeners for keys

window.addEventListener("keydown", keypress_handler, false);

window.addEventListener("keyup", keyup_handler, false);

​

//Interval for animation

var moveInterval = setInterval(function () {

    draw();

}, 30);

​

//Drawing the skate turning and changing speed

function draw() {

    context.clearRect(0, 0, canvas.width, canvas.height);

​

    x += (speed * mod) * Math.cos(Math.PI / 180 * angle);

    y += (speed * mod) * Math.sin(Math.PI / 180 * angle);

​

    context.save();

    context.translate(x, y);

    context.rotate(Math.PI / 180 * angle);

    context.drawImage(skate, -(skate.width / 2), -(skate.height / 2));

    context.restore();

    drawSkate();

}

​

//Setting the keys

function keyup_handler(event) {

    if (event.keyCode == 38 || event.keyCode == 40) {

        mod = 0;

    }

}

​

//Setting all of the keys

function keypress_handler(event) {

    console.log(x, y);

    if (event.keyCode == 38) {

        mod = 0.21;

    }

    if (event.keyCode == 40) {

        mod = -1;

    }

    if (event.keyCode == 37) {

        x -= 20;

        angle -= 0.52;

    }

    if (event.keyCode == 39) {

        x += 20;

        angle += 0.52;

    }

}

//=====================

//ENTER: OBSTACLE CAR

//=====================

​

//Uploading skate

var skate1 = new Image();

skate1.src = "file:///H:/Desktop/game9/img/hqdefault.jpg";

​

//Setting properties of skate

var x1 = 450;

var y1 = 40;

var speed1 = 10;

var angle1 = -990;

var mod1 = 0.2;

​

//Interval for animation

 var moveInterval = setInterval(function () {

     drawCar();

 }, 30);

​

//Drawing the skate turning and changing speed

function drawCar() {

    x1 += (speed1 * mod1) * Math.cos(Math.PI / 180 * angle1);

    y1 += (speed1 * mod1) * Math.sin(Math.PI / 180 * angle1);

    context.save();

    context.translate(x1, y1);

    context.rotate(Math.PI / 180 * angle1);

    context.drawImage(skate1, -(skate1.width / 2), -(skate1.height / 2));

    context.restore();

​

}

​

//===========================

//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 = "file:///H:/Desktop/game9/img/Grimesgate2.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;

}

​

//Creating the background image and drawing it

function Background() {

        context.globalCompositeOperation='destination-over'; //Draw Background Behind existing Pixels

    this.speed = 3; // 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 = -50;

    };

}

​

// 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, 60 / 1000);

            };

})();

​

//Create the final object and run it

var game = new Game();

function init() {

    if(game.init())

        game.start();

​

​

}

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​