警报消息和精灵问题

Question

我制作了这款迷你游戏，其中一个球一直在弹回。在页面上带有用户控制的可移动精灵（使用箭头键）。游戏的目的是不惜一切代价避开球，但是如果你触球，你会输掉比赛。将弹出一条警告消息：＆＃34;您输了，再试一次＆＃34;。

所以我的问题是：我如何做到这一点，当玩家接触球时，会弹出一个警告。是否有任何事件处理程序可以帮助解决这个问题？

这是我的代码：

// BALL

    var x = 0;
    var y = 0;
    var r = 10;
    var dx = 4;
    var dy = 8;
    var WIDTH = 240;
    var HEIGHT = 240; 
    var speed = 60;

    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");

    function init() {
        window.requestAnimationFrame(init, cxt)
        draw();  
    }   

    function drawCircle(x,y,r) {
        cxt.clearRect(0, 0, 240, 240);
        cxt.beginPath();
        cxt.arc(x, y, r, Math.PI * 2, false);
        cxt.closePath();
        cxt.fillStyle = "#006699";
        cxt.fill();
    }   

    function draw() {
        var ball = drawCircle(x, y, r);
        var link = document.getElementById("garen");

        if (x + dx > WIDTH || x + dx < 0)
            dx = -dx;
        if (y + dy > HEIGHT || y + dy < 0)
            dy = -dy;

        x += dx;
        y += dy;
    }

    init();

// SPRITE

    $(document).keydown(function(e) {
        switch (e.which) {
            case 37:
            $('#garen').stop().animate({
                left: '-=50px'
    }); //left arrow key
            break;
            case 38:
            $('#garen').stop().animate({
                top: '-=50px'
    }); //up arrow key
            break;
            case 39:
            $('#garen').stop().animate({
                left: '+=50px'
    }); //right arrow key
            break;
            case 40:
            $('#garen').stop().animate({
                top: '+=50px'
    }); //bottom arrow key
            break;
        }

    })