当光标离开屏幕时，游戏不会't以Javascript结尾

CodePen中指向我的代码的链接-http://codepen.io/PartTimeCoder/pen/RaMZop?editors=0010

Javascript如下，在increase函数中有一个if命令，它应该阻止用户的鼠标离开屏幕，但它不起作用。此外，当页面加载时，它应该开始添加分数，但它只在单击后开始。我看不出发生这种情况的任何原因：

$(document).ready(function() {
    var canvas = document.getElementById("canvas")
    var ctx = canvas.getContext("2d")
    var height = window.innerHeight
    var width = window.innerWidth
    var mouse = {};
    var hover;
    var redDots = 2;
    var score = 0;
    canvas.width = width
    canvas.height = height
    var circle_count = 10;
    var circles = [];
    var generate = function() {
        for (var i = 0; i < circle_count; i++) {
            circles.push(new circle());
        }
    }
    setInterval(generate, 100);
    canvas.addEventListener('mousedown', mousePos, false);
    canvas.addEventListener('touch', mousePos, false);
    function mousePos(e) {
        mouse.x = e.pageX;
        mouse.y = e.pageY;
    }
    function circle() {
        this.speed = {
            x: 2.5 + Math.random() * 5,
            y: 2.5 + Math.random() * 5
        }
        this.location = {
            x: 0 - Math.random() * width,
            y: 0 - Math.random() * height
        }
        this.accel = {
            x: -1.5 + Math.random() * 3,
            y: -1.5 + Math.random() * 3
        }
        this.radius = 5 + Math.random() * 10
    }
    var draw = function() {
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, width, height);
        ctx.globalCompositeOperation = "lighter";
        for (var i = 0; i < circles.length; i++) {
            var c = circles[i];
            ctx.beginPath();
            ctx.fillStyle = "red";
            ctx.arc(c.location.x, c.location.y, c.radius, Math.PI * 2, false);
            ctx.fill();
            c.speed.x += c.accel.x;
            c.speed.y += c.accel.y;
            c.location.x += c.speed.x;
            c.location.y += c.speed.y;
            if (mouse.x > c.location.x - c.radius && mouse.x < c.location.x + c.radius && mouse.y > c.location.y - c.radius && mouse.y < c.location.y + c.radius) {
                hover = true;
            }
            if (hover) {
                $("canvas").hide();
                $("#message").html("Sorry you lost. You finished with a score of " + score + "!");
            }
        }
    }
    setInterval(draw, 33);
    var increase = function() {
        if (mouse.x > 1 && mouse.y > 1 && !hover) {
            score++;
            redDots += 25;
            $("#score").html("Score - " + score);
            console.log(redDots);
        }
        if (mouse.x > canvas.width || mouse.y > canvas.height || mouse.x < 0 || mouse.y < 0) {
            hover = true;
        }
    }
    setInterval(increase, 1000);
});

感谢所有的帮助。提前感谢！