window.onload = init;

var map;
var ctxMap;

var pl;
var ctxPlayer;

var cact;
var ctxCactus;

var gameWidth = 800;
var gameHeight = 500;

var backgraund = new Image();
backgraund.src = "img/baсkgraund.png";

var player = new Image();
player.src = "img/player.png";

var cactus = new Image();
cactus.src = "img/cactus.png";

var player1 = new Player();
var cactus1 = new Cactus();

var isPlaying;

var requestAnimFrame = window.requestAnimationFrameFrame 
                    || window.webkitRequestAnimationFrame
                    || window.oRequestAnimationFrameFrame 
                    || window.msRequestAnimationFrameFrame;

function init()
{
    map = document.getElementById("map");
    ctxMap = map.getContext("2d");

    pl = document.getElementById("player");
    ctxPlayer = pl.getContext("2d");

    cact = document.getElementById("cactus");
    ctxCactus = cact.getContext("2d");


    map.width = gameWidth;
    map.height = gameHeight;
    pl.width = gameWidth;
    pl.height = gameHeight;
    cact.width = gameWidth;
    cact.height = gameHeight;

    drawBackgraund();
    
    startLoop();
}

function loop()
{
    if(isPlaying)
    {
        draw();
        update();
        requestAnimFrame(loop);
    }
}

function startLoop()
{
    isPlaying = true;
    loop();
}

function stopLoop()
{
    isPlaying = false;
}

function draw()
{
    player1.draw();
    cactus1.draw();
}

function Player()
{
    this.srcX = 0;
    this.srcY = 0;
    this.drawX = 15;
    this.drawY = 270;
    this.width = 100;
    this.height = 167;

    this.spead = 5;
}

function Cactus()
{
    this.srcX = 0;
    this.srcY = 0;
    this.drawX = 350;
    this.drawY = 310;
    this.width = 160;
    this.height = 208;

    this.spead = 5;
}

function update()
{
    cactus1.update();
}

function clearCtxCactus()
{
    ctxCactus.clearRest(0, 0, gameWidth, gameHeight);
}

function clearCtxPlayer()
{
    ctxPlayer.clearRest(0, 0, gameWidth, gameHeight);
}

var i;

Player.prototype.draw = function()
{
    for(i = 0; i<10000000; i++)
    {
        if(this.srcX!=400)
        {
            //clearCtxPlayer();
            ctxPlayer.drawImage(player, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height);
            this.srcX+=100;
        }
        else
        {
            this.srcX=0;
        }
    }
}

Cactus.prototype.draw = function()
{
    //clearCtxCactus();
    ctxCactus.drawImage(cactus, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width/2, this.height/2);
}

Cactus.prototype.update = function()
{

    this.drawX += -5;
}

function drawBackgraund()
{
    ctxMap.drawImage(backgraund, 0, 0, 800, 500, 0, 0, gameWidth, gameHeight);
}