2015-04-24 3 views
0

Это моя игра в 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> 
+0

Вы вызываете свою функцию «startGame» до того, как вы даже присвоили значение «ball». – CBroe

+0

Да, но начать игру - это немного неправильный термин, начало игры - это функция, которая в основном начинает настройку битов, а затем вызывает initgame. игра действительно начинается внутри цикла, я считаю, это то, что я пытался сделать. –

+0

Извините, просто ваше сообщение только что переместило начальную игру под переменными и теперь im поражает игровой цикл повторяемо: D –

ответ

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

callMethod(); 

var test = 10; 

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

function callMethod() { 
    callOtherMethod(); 
} 

</script> 
</body> 

Когда я запускаю это, он записывает "неопределенный". Я думаю, это и ваша проблема.

Когда я перемещаю callMethod() ниже var test = 10, он работает.

+0

Мне удалось заставить игру работать, я удалил взаимодействие с мышью и просто левой клавишей левой и правой стрелками, и теперь она работает. На данный момент также заменено сообщение с предупреждением na. Может работать над этим позже. но спасибо за помощь: D –

Смежные вопросы