Untitled

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <title>ProgOE: TP3 - Canvas</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="300" style="border:1px solid black;">
    Votre navigateur ne supporte pas canvas.
</canvas>


<script type="text/javascript">
    var posX;
    var posY;
    var vitesseX;
    var vitesseY;
    window.addEventListener('keydown',this.keyDown,false);
    window.addEventListener('keyup',this.keyUp,false);
    var canvas = document.getElementById("myCanvas");

    var context = canvas.getContext("2d");

    var diametreBalle = 20;

    posX = 1+diametreBalle/2;
    posY = 1+diametreBalle/2;
    vitesseX = 3;
    vitesseY = 3;


    function init(){
        context.clearRect(0, 0, canvas.width, canvas.height);

        //Tracé de la balle
        context.beginPath();
        context.arc(posX, posY, diametreBalle/2, 0, Math.PI*2);
        context.fill();
    }
    init();

    var left;
    var right;
    var up;
    var down;

    function animate(){
        context.clearRect(0, 0, canvas.width, canvas.height);
        //Tracé de la balle
        context.beginPath();
        context.arc(posX, posY, diametreBalle/2, 0, Math.PI*2);
        context.fill();


        if(posX+diametreBalle/2 >= canvas.width){
            if(left){
                posX -= vitesseX;
            }
        } else if(posX <= 0+diametreBalle/2){
            if(right){
                posX += vitesseX;
            }
        } else {
            if(left){
                posX -= vitesseX;
            }
            if(right){
                posX += vitesseX;
            }
        }

        if(posY+diametreBalle/2 >= canvas.height){
            if(up){
                posY -= vitesseY;
            }
        } else if(posY <= 0+diametreBalle/2){
            if(down){
                posY += vitesseY;
            }
        } else {
            if(up){
                posY -= vitesseY;
            }
            if(down){
                posY += vitesseY;
            }
        }
    }

    var myInterval = setInterval(animate, 1000/100);

    function keyDown(e) {
        var code = e.keyCode;
        if(code == 37){
            left = true;
        }
        if(code == 38){
            up = true;
        }
        if(code == 39){
            right = true;
        }
        if(code == 40){
            down = true;
        }
    }

    function keyUp(e) {
        var code = e.keyCode;
        if(code == 37){
            left = false;
        }
        if(code == 38){
            up = false;
        }
        if(code == 39){
            right = false;
        }
        if(code == 40){
            down = false;
        }
    }
</script>
</body>
</html>