var WIDTH = 700;
var HEIGHT = 500;
var RATE = 50;

var imgsrcs = ["relva.jpeg", "bugs.png", "blood.png"];
var images = [];
var BG = 0;
var BUG= 1;
var SPLAT = 2;
var BUGSIZE = 70;

function loadImgs(srcs,imgs,onload) {
    if (srcs.length == 0) onload();
    else {
        var img = document.createElement("img");
        imgs.push(img);
        img.onload=function () { loadImgs(srcs,imgs,onload); };
        img.src = srcs.shift();
    }
}

loadImgs(imgsrcs,images, start);

var timer;
var bugs = [];
var area;
var time = 0;

function start() {
    var canvas = document.getElementById("game");
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    area = canvas.getContext("2d");
    timer = setInterval(loop,RATE);
    canvas.onclick = clickHandler;

}
var x = 0;
var y = Math.random()*(HEIGHT-200)+100;

function loop () {
    area.drawImage(images[BG], 0, 0, WIDTH, HEIGHT);
    area.drawImage(images[BUG], x, y, BUGSIZE, BUGSIZE);
}

function clickHandler (event) {

}