Javascript 鼠标坐标不工作_Javascript_Jquery_Html_Coordinates_Mouse

Javascript 鼠标坐标不工作

javascript jquery html

Javascript 鼠标坐标不工作,javascript,jquery,html,coordinates,mouse,Javascript,Jquery,Html,Coordinates,Mouse,我试图显示我正在开发的游戏的鼠标坐标，但是当我运行代码时，我得到的坐标只有：0,0 任何类型的建议都会有帮助，如果你能重写我的代码，那就太好了 HTML 第一节 Javascript /* VARIABLES */ //Balls variables var ballX = 100; //balls x pos var ballY = 100; //balls y pos var ballSpeedX = 5; //balls speed in x

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

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

HTML


第一节

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

    });

/*变量*/
//球变量
var ballX=100//球x位置
var-ballY=100//球的位置
var ballSpeedX=5//球在x位置的速度
var=5//球在y位置的速度
//桨变量
恒定桨叶宽度=100//桨叶宽度
恒桨高度=10//桨叶厚度
var=400//桨叶x位置
var-Battery=40//船桨
//画布变量
var画布，ctx；
//鼠标变量
var-mouseX=0；
var-mouseY=0；
/*功能*/
//复位球
函数ballReset（）{//如果球未击中挡板，则调用此函数
ballX=画布宽度/2；
ballY=画布高度/2；
ball*=-1；
}
//控制桨
功能控制（e）{
var rect=canvas.getBoundingClientRect（）；//获取画布的轮廓
var root=document.documentElement；//获取html页面
var mouseX=e.clientX-rect.left-root.scrollLeft；//获取鼠标x位置
var mouseY=e.clientY-rect.top-root.scrollTop；//获取鼠标y位置
pallex=mouseX-palle_WIDTH/2；//将x位置设置为palles x pos
}
//为对象设置动画
函数animate（）{
//使球动画化
ballX+=ballSpeedX；//球x位置
ballY+=ballspedient；//balls y pos
}
//绘制对象
函数绘图（）{
ctx.clearRect（0，0，canvas.width，canvas.height）；//清除画布
牵引球（ballX，ballY，8，'白色'）；//牵引球
抽桨（桨X，canvas.height-桨，桨宽，桨高，“白色”）；//抽桨
//绘制位置x和y文本
后置文字（mouseX+“，“+mouseY，100100，‘黄色’）；
}
//检测碰撞
函数冲突（）{
//球壁碰撞
//X位置
如果（ballX<0）{//左
ballSpeedX*=-1；
}
如果（ballX>canvas.width）{//Right
ballSpeedX*=-1；
}
//Y位置
如果（ballY<0）{//Top
ball*=-1；
}
如果（ballY>canvas.height）{//Bottom
ball*=-1；
ballReset（）；//如果球接触到边缘，则重置球
}
//如果球碰到球拍
//清除变量
//球打在桨上
var topEdgeY=canvas.height-palley；//桨的顶行
var leftEdgeX=pallex；//桨的左线
var rightEdgeX=桨叶x+桨叶_宽度；//桨叶右线
var bottomEdgeY=topEdgeY+桨叶高度；//桨叶底线
//球控制变量
var centerpallex=桨叶宽度-桨叶x/2；//桨叶中心
var ballCenterX=ballX-centerpallex；//球离桨叶中心有多远
如果（球>顶边球&&//球在桨叶下方
球leftEdgeX&&//球在桨的右侧
ballX

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

var mouseX = 0;
var mouseY = 0;

但是，在

控制

函数中，再次声明它们：

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

这样做，您将创建不同的变量（具有相同的名称），这些变量仅存在于

控制

函数中。相反，只需更改它们的值：

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