Question

这是我的Javascript游戏，它基本上是砖块制动器，没有砖块。我目前在第188行（球）上收到了一个未定义的错误。它已被声明为全局变量，然后被赋予新值。我的JS技能是平均水平，并且已经在这一段时间内一直在摸不着头脑。如果任何人可以给我指点实际上让这个东西运行我会非常感激！提前谢谢。

    <!DOCTYPE html>
    <html>
    <head>
       <title>Pong Racker</title>



   </head>
   <body>

    <canvas id="backgroundCanvas" width="900" height="500" style="border:2px solid #404080;">


      Your browser doesn't support HTML5. Please install a newer browser version :
      <br />
      <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie9_bow_Bing&WT.srch=1&mtag=SearBing">
        http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie9_bow_Bing&WT.srch=1&mtag=SearBing</a>



    </canvas>

    <svg  id="svgRoot" width="900" height="500">
      <circle cx="100" cy="100" r=10 id="ball" stroke="black" stroke-width="2" fill="white" />
      <rect id="pad" height="15px" width="150px" x="400" y="350" rx="10" ry="20"/>
  </svg> 

  <style>canvas, svg {
      position: absolute;
      top: 0;
      left: 0;
  }
</style>



<script type="text/javascript">

    startGame();


    // Getting elements
    var pad = document.getElementById("pad");
    var ball = document.getElementById("ball");
    var svg = document.getElementById("svgRoot");
    var message = document.getElementById("message"); 



    // Ball
    //var ballRadius = ball.r.baseVal.value;
    var ballRadius = ball.r.baseVal.value;
    var ballX;
    var ballY;
    var previousBallPositionx = 0;
    var previousBallPositiony = 260;
    var ballDirectionX;
    var ballDirectionY;
    var ballSpeed = 10; 



    // Pad
    var padWidth = pad.width.baseVal.value;
    var padHeight = pad.height.baseVal.value;
    var padX;
    var padY;
    var padSpeed = 0;
    var inertia = 0.80; 



    // Misc.
    var minX = ballRadius;
    var minY = ballRadius;
    var maxX;
    var maxY;
    var startDate; 



    // Collisions
    function collideWithWindow() {
       alert("collideWithWindow");
       if (ballX < minX) {
        ballX = minX;
        ballDirectionX *= -1.0;
    }
    else if (ballX > maxX) {
        ballX = maxX;
        ballDirectionX *= -1.0;
    }

    if (ballY < minY) {
        ballY = minY;
        ballDirectionY *= -1.0;
    }
    else if (ballY > maxY) {
        ballY = maxY;
        ballDirectionY *= -1.0;
        lost();
    }
}

function collideWithPad() {
    if (ballX + ballRadius < padX || ballX - ballRadius > padX + padWidth)
        return;

    if (ballY + ballRadius < padY)
        return;

    ballX = previousBallPositionx;
    ballY = previousBallPositiony;
    ballDirectionY *= -1.0;

    var dist = ballX - (padX + padWidth / 2);

    ballDirectionX = 2.0 * dist / padWidth;

    var square = Math.sqrt(ballDirectionX * ballDirectionX + ballDirectionY * ballDirectionY);
    ballDirectionX /= square;
    ballDirectionY /= square;
}




    // Pad movement
    function movePad() {
        padX += padSpeed;

        padSpeed *= inertia;

        if (padX < minX)
            padX = minX;

        if (padX + padWidth > maxX)
            padX = maxX - padWidth;
    }


    registerMouseMove(document.getElementById("gameZone"), function (posx, posy, previousX, previousY) {
     padSpeed += (posx - previousX) * 0.2;
 });

    window.addEventListener('keydown', function (evt) {
       alert("keyboard");
       switch (evt.keyCode) {
            // Left arrow
            case 37:
            padSpeed -= 10;
            break;
            // Right arrow   
            case 39:
            padSpeed += 10;
            break;
        }
    }, true);




    function checkWindow() {
        maxX = window.innerWidth - minX;
        maxY = window.innerHeight - 130 - 40 - minY;
        padY = maxY - 30;
    } 




    function gameLoop() {
       alert("game loop");

       movePad();

        // Movements
        previousBallPositionx = ballX;
        previousBallPositiony = ballY;
        ballX += ballDirectionX * ballSpeed;
        ballY += ballDirectionY * ballSpeed;

        // Collisions
        collideWithWindow();
        collideWithPad();

        // Ball
        ball.setAttribute("cx", ballX);
        ball.setAttribute("cy", ballY);

        // Pad
        pad.setAttribute("x", padX);
        pad.setAttribute("y", padY);

    }


    function initGame() {
       alert("init game");
        //message.style.visibility = "hidden";
        checkWindow();

        padX = (window.innerWidth - padWidth) / 2.0;

        ballX = window.innerWidth / 2.0;
        ballY = maxY - 60;

        previousBallPositionx = ballX;
        previousBallPositiony = ballY;

        padSpeed = 0;

        ballDirectionX = Math.random();
        ballDirectionY = -1.0;

        gameLoop();
    }


    window.onresize = initGame; 



    var gameIntervalID = -1;

    function startGame() {
       alert("start");
       initGame();

       if (gameIntervalID > -1)
        clearInterval(gameIntervalID);
    startDate = (new Date()).getTime(); ;
    gameIntervalID = setInterval(gameLoop, 16);
}
document.getElementById("newGame").onclick = startGame; 

//Game lost
var gameIntervalID = -1;
function lost() {
    clearInterval(gameIntervalID);
    gameIntervalID = -1;

    message.innerHTML = "Game over !";
    message.style.visibility = "visible";
}



</script>


</body>
</html>

Answer 1

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>

callMethod();

var test = 10;

function callOtherMethod() {
    console.log(test);
}

function callMethod() {
    callOtherMethod();
}

</script>
</body>

当我运行它时，它会记录＆＃34; undefined＆＃34;。我认为这也是你的问题。

当我将callMethod()移到var test = 10下方时，它会正常工作。

在分配新值时从全局变量获取未定义的值

1 个答案: