不确定为什么我的变量不起作用
[英]Not sure why my variables aren't working
问题描述
I had the variables "ballX" and "ballY" working previously. 
我之前有变量“ ballX”和“ ballY”。 However, I must've messed up somewhere as they now show up as "unedfined" when I try to view their values using console.log. 但是，当我尝试使用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 :) ). 我花了2-3个小时的时间遍历我的代码并在线查找无济于事的修复方法，我们将不胜感激。
<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 个解决方案
解决方案1
5 已采纳 2018-05-16 00:10:23
In your if (ballX > canvas.width) statement you redeclare your variables, this is what messes it up. 在if (ballX > canvas.width)语句中，您重新声明了变量，这就是if (ballX > canvas.width)了。 This will hoist the variables to top of the function drawEverything and shadow the variables you declared in the top scope. 这会将变量提升到函数drawEverything顶部，并drawEverything在顶部范围中声明的变量。 In your case it'll be declared as undefined . 在您的情况下，它将被声明为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. 如果删除变量前面的var关键字，则它将按预期工作，因为您将依赖于变量的全局状态。
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. 这是JavaScript提供的易于使用的全局状态所固有的问题。 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. 使用let和const关键字将在这里极大地帮助您。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.