我正在尝试显示我正在开发的游戏的鼠标坐标，但是当我运行代码时，我得到的唯一坐标是: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);
});
最佳答案
您的鼠标坐标变量在全局范围内声明:
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
};
关于javascript - 鼠标坐标不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38548418/