Это моя игра в 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>
Вы вызываете свою функцию «startGame» до того, как вы даже присвоили значение «ball». – CBroe
Да, но начать игру - это немного неправильный термин, начало игры - это функция, которая в основном начинает настройку битов, а затем вызывает initgame. игра действительно начинается внутри цикла, я считаю, это то, что я пытался сделать. –
Извините, просто ваше сообщение только что переместило начальную игру под переменными и теперь im поражает игровой цикл повторяемо: D –