Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style>
            #mario{
            background-image:url("mario.png");
            width: 46px;
            height: 64px;
            position: absolute;
            top: 100px;
            left: 100px;
            background-position: 0px 64px;
        }
#cle{
                background-image:url("key.png");
                width: 60px;
                height: 43px;
                position: absolute;
                top: 420px;
                left: 1200px;
            }

            body{
                background-image: url("herbe.jpg");
            }

    </style>
    </head>
    <body>
        <div id="cle"></div>
        <div id="carre0"></div>
        <div id="carre1"></div>
        <div id="carre2"></div>
        <div id="carre3"></div>
        <div id="carre4"></div>
        <div id="mario"></div>
    <script>
            var score = 0;
            var star = 0;
            var x=100;
            var y=100;
            var anim=0;
            var toucheHaut = false, toucheDroite = false, toucheBas = false, toucheGauche = false;

            var coorX = [0,0,100,2000,2000,200,200,400,200,600,700,300,400,1100,1300,800,800,1200,1100,1300,1600,1800,1800,1300,1700,1500];
            var coorY = [0,100,900,100,700,100,600,700,800,400,700,400,200,100,100,400,600,500,700,700,400,700,200,200,200,300];
            var tailleX = [2080,100,1980,100,100,100,300,100,100,100,300,200,600,200,100,400,200,300,100,400,100,200,100,200,100,100];
            var tailleY = [100,900,100,500,200,400,100,100,100,400,100,100,100,300,100,100,100,100,200,100,300,100,500,200,100,100];


            window.onkeydown = function(event){
                if (event.keyCode==38){
                    toucheHaut = true;
                    document.getElementById("mario").style.backgroundPosition = anim * 46 + "px 256px";
                }
                else if (event.keyCode==40){
                    toucheBas = true;
                    document.getElementById("mario").style.backgroundPosition = anim * 46 + "px 128px";
                }
                else if (event.keyCode==39){
                    toucheDroite = true;
                    document.getElementById("mario").style.backgroundPosition = anim * 46 + "px 192px";
                }
                else if (event.keyCode==37){
                    toucheGauche = true;
                    document.getElementById("mario").style.backgroundPosition = anim * 46 + "px 64px";
                }
                moveMario();
            }

            window.onkeyup = function(event){
                if (event.keyCode==38){
                    toucheHaut = false;
                }
                else if (event.keyCode==40){
                    toucheBas = false;
                }
                else if (event.keyCode==39){
                    toucheDroite = false;
                }
                else if (event.keyCode==37){
                    toucheGauche = false;
                }
            }

            function moveMario(){
                animation();
                var deplacementX = x + (toucheDroite - toucheGauche) * 10
                var deplacementY = y + (toucheBas - toucheHaut) * 10;

                var collision = false;


                if (deplacementX > 0 && deplacementX + 46 < window.innerWidth && deplacementY > 0 && deplacementY + 64 < window.innerHeight){
                    for (var i = 0; i < coorX.length; i++){
                        if (deplacementX + 46 > coorX[i] && deplacementX < coorX[i] + tailleX[i] && deplacementY +64 >= coorY[i] && deplacementY < coorY[i] + tailleY[i]){
                        collision = true;
                        break;
                        }

                    }
                    if (collision == false){
                    x = deplacementX;
                    y = deplacementY;
                    }
                    if (deplacementX > 1200 && deplacementX + 46 < 1240 && deplacementY > 420 && deplacementY + 64 < 463){
                    suppCle();
                }
                }

                document.getElementById("mario").style.left = x + "px";
                document.getElementById("mario").style.top = y + "px";

            }

            function suppCle(){
                document.removeChild("cle");
            }

            function animation(){
                anim++;
                if (anim == 6){
                    anim = 0;
                }
            }


            for (var i = 0; i < coorX.length; i++){
                var bloc = document.createElement("div");
                bloc.style.position = "absolute";
                bloc.style.top = coorY[i] + "px";
                bloc.style.left = coorX[i] + "px";
                bloc.style.width = tailleX[i] + "px";
                bloc.style.height = tailleY[i] + "px";
                bloc.style.backgroundImage = "url(file:///C:/Users/Camille/Documents/HTML5/TP1/arbre.png)";

                document.body.appendChild(bloc);
                }
        </script>
    </body>
</html>