Mudkip Canvas Drawer Code

window.addEventListener("load", onLoad);

var canvas;
var context;
var myImage;
var mudkips = [];
var frameCount = 0;

function Mudkip(){
    this.x = Math.random() * (canvas.width - 64);
    this.y = Math.random() * (canvas.height - 64);
    this.spd = (Math.random() * 2) + 1;

    this.setRandomSpeed = function(){
        this.spd = (Math.random() * 2) + 1;
    }

    this.setRandomX = function(){
        this.x = Math.random() * (canvas.width - 64);
    }

    this.update = function(){
        this.y += this.spd;
        if(this.y > canvas.height){
            this.y = -64;
            this.setRandomX();
            this.setRandomSpeed();
        }
    }

    this.display = function(){
        context.drawImage(myImage, this.x, this.y, 64, 64);
    }
}

function onLoad(event){
    var song = document.getElementById("song");
    song.play();
    canvas = document.getElementById("mudkipCanvas");
    context = canvas.getContext("2d");
    myImage = document.createElement("img");
    myImage.src = "MudkipImage/Mudkip.png";

    for(i = 0; i < 100; i++){
        mudkips.push(new Mudkip());
    }

    animate();
}

//This is called 60 times per second, or once every frame.
function animate(){
    frameCount++;
    document.getElementById("frameCount").innerHTML = "This has been running for " + frameCount + " frames.";
    context.fillStyle = "white";
    context.fillRect(0, 0, canvas.width, canvas.height);

    for(i = 0; i < mudkips.length; i++){
        mudkips[i].update();
        mudkips[i].display();
    }

    //This tells us to run the animate() function again on the next frame.
    requestAnimationFrame(animate);
}