Member 14048738 Ответов: 1

Как мне исправить ошибку в этой игре, которую я сделал?


Я сделал прорывную игру, и когда я добавил еще одно весло, игра перестала работать... Кто-нибудь может мне помочь? вот вам и код.

Что я уже пробовал:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width / 2;
var y = canvas.height - 30;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height - 2;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleHeightUp = 10;
var paddleWidth = 75;
var paddleWidthUp = 75;
var paddleX = (canvas.width - paddleWidth) / 2;
var paddleXUp = (canvas.widthUp - paddleWidthUp) / -2; //new
var rightPressed = false;
var leftPressed = false;
var arrowRightPressed = false;
var arrowLeftPressed = false;
var brickRowCount = 5;
var brickColumnCount = 3;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30; //original 30
var brickOffsetLeft = 30; //original 30
var score = 0;
var lives = 4; // original 3; 4 to temp. fix the bug


var bricks = [];
for (var c = 0; c < brickColumnCount; c++) {
    bricks[c] = [];
    for (var r = 0; r < brickRowCount; r++) {
        bricks[c][r] = { x: 0, y: 0, status: 1 }; //original x=0 y=0
    }
}

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
document.addEventListener("keyright", keyArrowRightHandler, false);
document.addEventListener("keyleft", keyArrowLeftHandler, false);

function keyDownHandler(e) {
    if (e.keyCode == 68) {
        rightPressed = true;
    }
    else if (e.keyCode == 65) {
        leftPressed = true;
    }

    else if (e.keyCode == 37) {
        arrowLeftPressed = true;
    }
    else if (e.keyCode == 39) {
        arrowRightPressed = true;
    }
}

function keyUpHandler(e) {
    if (e.keyCode == 68) {
        rightPressed = false;
    }
    else if (e.keyCode == 65) {
        leftPressed = false;
    }

    else if (e.keyCode == 39) {
        arrowRightPressed = false;
    }
    else if (e.keyCode == 37) {
        arrowLeftPressed = false;
    }
    
}
function keyArrowRightHandler(e) {
    if (e.keyCode == 39) {
        arrowRightPressed = false;
    }
    else if (e.keyCode == 65) {
        leftPressed = false;
    }

    else if (e.keyCode == 37) {
        arrowLeftPressed = false;
    }
    else if (e.keyCode == 68) {
        rightPressed = false;
    }
}

function keyArrowLeftHandler(e) {
    if (e.keyCode == 37) {
        arrowLeftPressed = false;
    }
    else if (e.keyCode == 68) {
        rightPressed = false;
    }
    else if (e.keyCode == 65) {
        leftPressed = false;
    }
    else if (e.keyCode == 39) {
        arrowRightPressed = false;
    }

}

function collisionDetection() {
    for (var c = 0; c < brickColumnCount; c++) {
        for (var r = 0; r < brickRowCount; r++) {
            var b = bricks[c][r];
            if (b.status == 1) {
                if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
                    dy = -dy;
                    b.status = 0;
                    score++;
                    if (score == brickRowCount * brickColumnCount) {
                        alert("YOU WIN, CONGRATS!");
                        document.location.reload();
                    }
                }
            }
        }
    }
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
//
function drawPaddleUp() {
    ctx.beginPath();
    ctx.rect(paddleXUp, canvas.heightUp + paddleHeightUp, paddleWidthUp, paddleHeightUp);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
//
function drawBricks() {
    for (var c = 0; c < brickColumnCount; c++) {
        for (var r = 0; r < brickRowCount; r++) {
            if (bricks[c][r].status == 1) {
                var brickX = (r * (brickWidth + brickPadding)) + brickOffsetLeft;
                var brickY = (c * (brickHeight + brickPadding)) + brickOffsetTop;
                bricks[c][r].x = brickX;
                bricks[c][r].y = brickY;
                ctx.beginPath();
                ctx.rect(brickX, brickY, brickWidth, brickHeight);
                ctx.fillStyle = "#0095DD";
                ctx.fill();
                ctx.closePath();
            }
        }
    }
}
function drawScore() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "black";
    ctx.fillText("Score: " + score, 8, 20);
}
function drawLives() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "black";
    ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
}

function MyTimer(callback, val) {
    val = val || 15;
    var timer = setInterval(function () {
        callback(val);
        if (val-- <= 0) {
            clearInterval(timer);
        }
    }, 1000);
}
new MyTimer(function (val) {
    var timerMsg = "00:" + (val >= 10 ? val : "0" + val);
    document.getElementById("timer").textContent = timerMsg;

});
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBricks();
    drawBall();
    drawPaddle();
    drawPaddleUp();
    drawScore();
    drawLives();

    collisionDetection();







    if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if (y + dy < ballRadius) {
        dy = -dy;
    }
    else if (y + dy > canvas.height - ballRadius) {
        if (x > paddleX && x < paddleX + paddleWidth) {
            dy = -dy;
        }
        else if (y + dy > canvas.height - ballRadius) {
            if (x > paddleXUp && x < paddleXUp + paddleWidthUp) {
                dy = -dy;
            }
            else {
                lives--;
                if (!lives) {
                    alert("GAME OVER");
                    document.location.reload();
                }
                else {
                    x = canvas.width / 2;
                    y = canvas.height - 30;
                    dx = 3;
                    dy = -3;
                    paddleX = (canvas.width - paddleWidth) / 2;
                }
            }
        }

        if (rightPressed && paddleX < canvas.width - paddleWidth) {
            paddleX += 7;
        }
        else if (leftPressed && paddleX > 0) {
            paddleX -= 7;
        }

        else if (arrowRightPressed && paddleXUp < canvas.width - paddleWidthUp) {
            paddleX += 7;
        }
        else if (arrowLeftPressed && paddleXUp > 0) {
            paddleXUp -= 7;
        }

        x += dx;
        y += dy;
        requestAnimationFrame(draw);
    }
}

draw();

1 Ответов

Рейтинг:
1

OriginalGriff

Компиляция не означает, что ваш код верен! :смеяться:
Подумайте о процессе разработки как о написании электронного письма: успешная компиляция означает, что вы написали письмо на правильном языке - например, на английском, а не на немецком, - а не то, что письмо содержало сообщение, которое вы хотели отправить.

Итак, теперь вы входите во вторую стадию разработки (на самом деле это четвертая или пятая, но вы перейдете к более ранним стадиям позже): тестирование и отладка.

Начните с рассмотрения того, что он делает, и как это отличается от того, что вы хотели. Это важно, потому что это дает вам информацию о том, почему он это делает. Например, если программа предназначена для того, чтобы позволить пользователю ввести число, а затем удвоить его и напечатать ответ, то если бы ввод / вывод был таким:

Input   Expected output    Actual output
  1            2                 1
  2            4                 4
  3            6                 9
  4            8                16
Тогда совершенно очевидно, что проблема заключается в бите, который удваивает его - он не прибавляет себя к себе или умножает его на 2, он умножает его на себя и возвращает квадрат входного сигнала.
Таким образом, вы можете посмотреть на код, и очевидно, что он находится где-то здесь:
int Double(int value)
   {
   return value * value;
   }

Как только у вас появится идея, что может пойти не так, начните использовать отладчик, чтобы выяснить, почему. Поместите точку останова в первую строку метода и запустите приложение. Когда он достигнет точки останова, отладчик остановится и передаст управление вам. Теперь вы можете запускать свой код построчно (так называемый "одноступенчатый") и просматривать (или даже изменять) содержимое переменных по мере необходимости (черт возьми, вы даже можете изменить код и повторить попытку, если вам это нужно).
Подумайте о том, что должна делать каждая строка кода перед ее выполнением, и сравните это с тем, что она действительно делала, когда вы использовали кнопку "Step over" для выполнения каждой строки по очереди. Он сделал то, что вы ожидали? Если да, то переходите к следующей строке.
Если нет, то почему? Чем это отличается?
Надеюсь, это поможет вам определить, в какой части этого кода есть проблема и в чем она заключается.
Это навык, и его стоит развивать, поскольку он помогает вам как в реальном мире, так и в развитии. И, как и все навыки, он только улучшается при использовании!
Это может помочь в качестве начала: Отладка JavaScript[^]