Not sure why my variables aren't working
Question
I had the variables "ballX" and "ballY" working previously. However, I must've messed up somewhere as they now show up as "unedfined" when I try to view their values using console.log. I've spent the last 2-3 hours looking through my code and online for fixes to no avail, any help would be appreciated.(This is my first time using javascript so apologies in advance if it is something simple :) ).
<html> <canvas id="gameCanvas" width = "600" height = "250"></canvas> <script> //Calling technical stuff var canvas; var canvasContext; canvas = document.getElementById('gameCanvas'); canvasContext = canvas.getContext('2d'); // Initial values var ballX = (canvas.width-20)/2; var ballY = (canvas.height-20)/2; var yDirection = 2; var xDirection = 2; var PositionY; var drawEverythingCount = 0; // Constants var ballSize = 20; var panelHeight = 100; var panelWidth = 10; window.onload = function(){ // Calls the main draw function and has the interval for repeating set to 10 ms setInterval(function() {drawEverything(PositionY)}, 10); } //Adds the event for mousemove to record the Y position of the mouse document.addEventListener("mousemove",function(event){ PositionY = (event.clientY-(panelHeight/2)); }); function drawEverything(PositionY) { drawEverythingCount = drawEverythingCount + 1; // Draws the canvas, ball and panel canvasContext.fillStyle = 'black'; canvasContext.fillRect(0,0,canvas.width,canvas.height); canvasContext.fillStyle = 'red'; canvasContext.fillRect(ballX,ballY,ballSize,ballSize); canvasContext.fillStyle = 'green'; canvasContext.fillRect(canvas.width-panelWidth,PositionY,panelWidth,panelHeight); // Resets the game if the ball goes out of the Right side of the canvas if (ballX > canvas.width) { alert('You scored:' + (xDirection - 2) + '!') var ballX = (canvas.width - 20)/2; var ballY = (canvas.height-20)/2; var yDirection = 2; var xDirection = 2; } // Checks to see if the ball is about to hit the left-hand wall if (ballX - xDirection < 0) {(xDirection = (xDirection*-1) + 1); ballX = 0;}; // Checks to see whether or not the ball is about to go off of the canvas' y-axis and changes its // direction if ((ballY+20) > canvas.height || ballY < 0){ if ((ballY+20) > canvas.height){yDirection = -1;} else {yDirection = 1;} } // Checks to see if the ball is hitting the panel if ((ballX + xDirection) > (canvas.width - 10)){ var y for (y = PositionY; y < (PositionY + 101);y++){ if(y == ballY) {xDirection = xDirection * -1;break;} }}; // Movement of the ball ballY = ballY + yDirection; ballX = ballX + xDirection; } </script> </html>
1 answers
solution1
5 ACCPTED 2018-05-16 00:10:23
In your if (ballX > canvas.width) statement you redeclare your variables, this is what messes it up. This will hoist the variables to top of the function drawEverything and shadow the variables you declared in the top scope. In your case it'll be declared as undefined .
If you remove the var keyword in front of your variables it'll work as expected since you'll be relying on the global state of your variables.
if (ballX > canvas.width) {
alert('You scored:' + (xDirection - 2) + '!')
ballX = (canvas.width - 20)/2;
ballY = (canvas.height-20)/2;
yDirection = 2;
xDirection = 2;
}
This is an inherent problem with the ease of global state that JavaScript provides. There are however tips you can employ to mitigate these problems in the future. The use of let and const keywords would've helped you tremendously here.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.