鼠标坐标不起作用

Question

我正在尝试显示我正在开发的游戏的鼠标坐标，但是当我运行我的代码时，我得到的唯一坐标是：0,0.

任何类型的建议都会有所帮助，如果你能重写我的代码那就太好了！

HTML

<head>
    <title>Section 1</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>

<body>

    <center>
        <canvas id="canvas" width="800" height="600" style="background-color: black"></canvas>
    </center>

    <script src="main.js"></script>
</body>

Javascript

/* VARIABLES */

    //Balls variables
    var ballX = 100; //balls x pos
    var ballY = 100; //balls y pos
    var ballSpeedX = 5; //balls speed in x pos
    var ballSpeedY = 5; //balls speed in y pos

    //Paddle variables
    const PADDLE_WIDTH = 100; //paddles width
    const PADDLE_HEIGHT = 10; //paddles thickness
    var paddleX = 400; //paddles x pos
    var paddleY = 40; //paddles y pos

    //Canvas variables
    var canvas, ctx;

    //Mouse variables
    var mouseX = 0;
    var mouseY = 0;

    /* FUNCTIONS */

    //Reset ball
    function ballReset() { //If ball misses paddle call this function

        ballX = canvas.width / 2;
        ballY = canvas.height / 2;

        ballSpeedY *= -1;

    }

    //Control the paddle
    function paddleControl(e) {
        var rect = canvas.getBoundingClientRect(); //Get outline of canvas
        var root = document.documentElement; //Get html page

        var mouseX = e.clientX - rect.left - root.scrollLeft; //Get mouse x pos
        var mouseY = e.clientY - rect.top - root.scrollTop; //Get mouse y pos

        paddleX = mouseX - PADDLE_WIDTH / 2; //Setting x pos to paddles x pos
    }

    //Animate objects
    function animate() {

        //Animate ball
        ballX += ballSpeedX; //Balls x pos
        ballY += ballSpeedY; //balls y pos

    }

    //Draw objects
    function draw() {

        ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas

        drawBall(ballX, ballY, 8, 'white'); // draw ball

        drawPaddle(paddleX, canvas.height - paddleY, PADDLE_WIDTH, PADDLE_HEIGHT, 'white'); //draw paddle

        //Draw pos x and y text
        posText(mouseX + "," + mouseY, 100, 100, 'yellow');
    }

    //Detect collisions
    function collision() {

        //Ball to wall collision
        //X pos
        if (ballX < 0) { //Left
            ballSpeedX *= -1;
        }
        if (ballX > canvas.width) { //Right
            ballSpeedX *= -1;
        }
        //Y pos
        if (ballY < 0) { //Top
            ballSpeedY *= -1;
        }
        if (ballY > canvas.height) { //Bottom
            ballSpeedY *= -1;
            ballReset(); //If ball touches edge reset ball
        }

        //If ball hits paddle

        //Declear variables
        //Ball hits paddle variables
        var topEdgeY = canvas.height - paddleY; //Top line of paddle
        var leftEdgeX = paddleX; //Left line of paddle
        var rightEdgeX = paddleX + PADDLE_WIDTH; //Right line of paddle
        var bottomEdgeY = topEdgeY + PADDLE_HEIGHT; //Bottom line of paddle

        //Ball control variables
        var centerPaddleX = PADDLE_WIDTH - paddleX / 2; //Center of paddle
        var ballCenterX = ballX - centerPaddleX; //How far the ball is from the center of the paddle

        if (ballY > topEdgeY && //Ball is below paddle
            ballY < bottomEdgeY && //Ball is on top of paddle
            ballX > leftEdgeX && //Ball is to the right of paddle
            ballX < rightEdgeX) { //Ball is to the right of paddle

            ballSpeedY *= -1; //Rotate ball
            ballSpeedX = centerPaddleX * 0.03; //Controls balls direction by using the edge

        }

    }

    /* DRAW OBJECTS */

    //Draw paddle
    function drawPaddle(x, y, w, h, color) {
        ctx.fillStyle = color;
        ctx.fillRect(x, y, w, h);
    }

    //Draw ball
    function drawBall(x, y, r, color) {
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI * 2, true);
        ctx.fill();
    }

    //Make text at mouse cursor to indicate x and y pos of mouse
    function posText(text, x, y, color) {

        ctx.fillStyle = color;
        ctx.fillText(text, x, y);

    }

    //When document is ready
    $(document).ready(function () {

        canvas = $("#canvas")[0]; //Get canvas
        ctx = canvas.getContext('2d'); //Get the context

        //Set fps
        var fps = 60;

        //Run main functions
        setInterval(function () {

            animate();
            collision();
            draw();

            $(canvas).bind("mousemove", paddleControl);

        }, 1000 / fps);

    });

Answer 1

您的鼠标坐标变量声明在全局范围内：

var mouseX = 0;
var mouseY = 0;

但是，在 paddleControl 函数中，您再次声明它们：

function paddleControl(e) {
    var mouseX = e.clientX - rect.left - root.scrollLeft; //Get mouse x pos
    var mouseY = e.clientY - rect.top - root.scrollTop; //Get mouse y pos
};

这样做，您将创建不同的变量（具有相同的名称），这些变量仅存在于 paddleControl 函数中。相反，只需更改它们的值：

function paddleControl(e) {
    mouseX = e.clientX - rect.left - root.scrollLeft; //Get mouse x pos
    mouseY = e.clientY - rect.top - root.scrollTop; //Get mouse y pos
};

鼠标坐标不起作用

Mouse Coordinates Not Working

html

javascript

mouse

jquery

coordinates