Untitled

<!DOCTYPE html>
<html>
<body>
<center><h1>CoderDojo Pasen</h1></center>
<canvas id="canvas" width="800" height="400"
style="background-image:url('http://rentiweb.com/wp/wp-content/uploads/2014/12/blue-sky-green-grass_wallpaperpicture_net-800x400.jpeg')">
</canvas>

<script>
window.onload = function() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    haasPos = 0;
    verander = 1;

    eiX = Math.random() * 800;
    eiY = -50;
    tijd = setInterval(teken, 5);
}

function teken() {
    ctx.clearRect (0, 0, canvas.width, canvas.height);
    tekenPaashaas();
    tekenPaasei();
    detecteerVangst();
}

function tekenPaashaas() {
    var paas = document.getElementById("paas");
    ctx.drawImage(paas, haasPos, 270);
    if (haasPos > 800 - 128) {
        verander = -1;
    }
    if (haasPos < 0) {
        verander = 1;
    }

    haasPos = haasPos + verander;
}

function tekenPaasei() {
    var ei = document.getElementById("ei");
    ctx.drawImage(ei, eiX, eiY, 50,50);

    eiY = eiY + 3;
    if (eiY > 400) {
        eiY = -50;
        eiX = Math.random() * 800;
    }
}

function detecteerVangst() {
    if (eiY > 250 ) {
         if(haasPos+45 < eiX && haasPos + 83 > eiX) {
             win();
         }
         if(haasPos+45 < eiX + 50 && haasPos + 83 > eiX + 50) {
             win();
         }
    }
}

function win() {
    clearInterval(tijd);
    zakker = setInterval(traagEiZakken, 20);
}

function traagEiZakken() {
    if(eiY == 340) {
        clearInterval(zakker);
    }
    eiY = eiY + 1;
    var ei = document.getElementById("ei");
    var paas = document.getElementById("paas");


    ctx.clearRect (0, 0, canvas.width, canvas.height);
    ctx.drawImage(paas, haasPos, 270);
    ctx.drawImage(ei, eiX, eiY, 50,50);

}

</script>
<center>
<h1>Gebruikte afbeeldingen</h1>
<img id="paas" src="http://b.dryicons.com/images/icon_sets/easter_icons_set/png/128x128/bunny_egg_yellow.png" alt="De Paashaas!"/>
<img id="ei" src="http://a.dryicons.com/images/icon_sets/easter_icons_set/png/128x128/egg_blue.png" alt="Een Paasei!" height="50px" width="50"/>
</center>
</body>
</html>