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

代码笔中指向我的代码的链接-

下面是Javascript，在增加函数中有一个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);
});

$（文档）.ready（函数（）{
var canvas=document.getElementById（“画布”）
var ctx=canvas.getContext（“2d”）
var height=window.innerHeight
var width=window.innerWidth
var鼠标={}；
var悬停；
var-redDots=2；
var得分=0；
canvas.width=宽度
canvas.height=高度
var循环计数=10；
var循环=[]；
var generate=function（）{
对于（变量i=0；ic.location.x-c.radius&&mouse.xc.location.y-c.radius&&mouse.y1&&mouse.y>1&&hover）{
分数++；
红点+=25；
$（“#分数”）.html（“分数-”+score）；
console.log（redDots）；
}
if（mouse.x>canvas.width | | mouse.y>canvas.height | | mouse.x<0 | | mouse.y<0）{
悬停=真；
}
}
设置间隔（增加，1000）；
});

---

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

我的建议是跟踪鼠标是否在文档中，并在if语句中使用鼠标。此代码将跟踪鼠标是否位于文档中（如果不是文档的全高和全宽，则使用游戏屏幕元素选择器）：

---

然后只需检查

mouseIn

的计算结果是否为

true

，查看用户的光标是否在游戏屏幕上。这里有一把小提琴演示了鼠标输入的变化：

添加事件监听器，而不是跟踪鼠标移动

canvas.addEventListener('mouseout', mouseOutFunction, false);

当鼠标离开屏幕时，它将运行为第二个参数提供的任何函数

如果要在页面加载时开始跟踪分数，请在画布上使用ready（）函数

canvas.ready(pageLoadFunction);

---

当画布完成加载时，这将运行一个函数pageLoadFunction

您只需要一个

mouseout

事件监听器，简单

但是首先，你需要在mousemove上跟踪鼠标，以防止通过先点击来启动游戏。下面我举一个例子

canvas.addEventListener（'mousemove'，mousePos，false）

使用它而不是
mousedown
事件侦听器

第二，解决在鼠标退出时停止游戏的问题。
这里有一个例子

canvas.addEventListener('mouseout', function() {
        $("canvas").hide();
        $("#message").html("Sorry you lost. You finished with a score of " + score + "!");
    }, false);

这与鼠标触摸红点时的操作相同，但它会在鼠标离开画布时显示消息。好了

下面是一个工作版本的代码笔示例：
我会通过
mouseleave
和
mouseenter
事件跟踪该操作。我不知道如何做到这一点，这正是我的问题。我尝试将其实现到我的代码中，我要么做得不对，要么不起作用。这是更新的版本-当我使用mouseout函数时，它只是在某个时间随机结束游戏。而且canvas.ready函数也不起作用。
canvas.addEventListener('mouseout', function() {
        $("canvas").hide();
        $("#message").html("Sorry you lost. You finished with a score of " + score + "!");
    }, false);