Question

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

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);
});

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

Answer 1

您只需要一个mouseout事件监听器，简单！

但首先，您需要在鼠标移动时跟踪鼠标，以防止首先单击以启动游戏。我在下面有一个例子。

canvas.addEventListener('mousemove', mousePos, false);

使用它而不是mousedown事件监听器。

第二，解决mouseout停止游戏的问题。这是一个例子

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

这与鼠标触摸红点时的作用相同，但鼠标离开画布时会显示消息。你去吧！

以下是工作版本的示例代码集：Avoid The Red Dots

Answer 2

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

var mouseIn = false;
$(document).on('mouseenter mouseover', function(){
    if(!mouseIn)mouseIn = true;
});
$(document).on('mouseleave', function(){
    if(mouseIn)mouseIn = false;
});

然后检查mouseIn是否评估为true以查看用户的光标是否在游戏屏幕上。这是演示mouseIn更改的小提琴：https://jsfiddle.net/sk23cssc/

Answer 3

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

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

当鼠标离开屏幕时，这将运行您为第二个参数提供的任何功能。

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

canvas.ready(pageLoadFunction);

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

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

3 个答案: