Game over

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

This is the 5th step out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson5.html.

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

Implementing game over

Let's try to implement game over in our game . Here's the piece of code from the third lesson where we made the ball bounce off the walls:

if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
    dx = -dx;
}

if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
    dy = -dy;
}

Instead of allowing the ball to bounce off all four walls, let's only allow three now — left, top and right. Hitting the bottom wall will end the game. We'll edit the second if block so it's an if else block that will trigger our "game over" state upon the ball colliding with the bottom edge of the canvas. For now we'll keep it simple, showing an alert message and restarting the game by reloading the page. Replace the second if statement with the following:

if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    alert("GAME OVER");
    document.location.reload();
}

Letting the paddle hit the ball

The last thing to do in this lesson is to create some kind of collision detection between the ball and the paddle, so it can bounce off it and get back into the play area. The easiest thing to do is to check whether the center of the ball is between the left and right edges of the paddle. Update the last bit of code you modified again, to the following:

if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    if(x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
    }
    else {
        alert("GAME OVER");
        document.location.reload();
    }
}

If the ball hits the bottom edge of the Canvas we need to check whether it hits the paddle . if yes, then it bounces off just like you'd expect; if not then the game is over as before.

Compare your code

Here's the working code for you to compare yours against:

Exercise: make the ball move faster when it hits the paddle.

Next steps

We're doing quite well so far and our game is starting to feel a lot more worth playing now you can lose! But it is still missing something. Let's move on  to the sixth chapter — Build the brick field — and create some bricks for the ball to destroy.

Метки документа и участники

 Внесли вклад в эту страницу: ccartrec
 Обновлялась последний раз: ccartrec,