ProgrammingGenius ProgrammingGenius - 4 months ago 25
Javascript Question

Mouse Coordinates Not Working

I'm trying to display the mouse coordinates for a game that I'm working on, but when I run my code, the only coordinates that I get are: 0,0.

Any type of advice would help, and if you could rewrite my code that'll be great!

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

Your mouse coordinates variables are declared in the global scope:

var mouseX = 0;
var mouseY = 0;

But then, inside paddleControl function, you declare them again:

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

Doing that, you are creating different variables (with the same names), that exist only inside paddleControl function. Instead, just change their values:

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