Criando o Breakout – Tutorial em JavaScript
O Breakout é um jogo clássico de arcade lançado pela Atari em 1976, criado por Nolan Bushnell e Steve Bristow, com a ajuda de Steve Jobs e Steve Wozniak na parte técnica. O objetivo do jogo é simples: usar uma barra horizontal (conhecida como raquete ou paddle) que se move pela parte inferior da tela para rebater uma bola, que vai quebrando blocos dispostos na parte superior. É um dos marcos da história dos games e, hoje, vamos recriá-lo com JavaScript!
Acesse o code.org, ao entrar na sua conta, selecione a opção criar novo projeto e escolha “game lab”.
Passo 1: Configurando as Variáveis
O primeiro passo é configurar o jogo, criando a bola, o paddle, os blocos e as condições iniciais. Vamos definir a pontuação, as vidas do jogador e o estado do jogo.
var ball;
var score = 0;
var lives = 3;
var gamestate = "serve";
ball = createSprite(200,200,10,10);
ball.setAnimation("golfball_1");
ball.scale = 0.05;
var paddle = createSprite(200, 350, 120, 10);
paddle.shapeColor = "blue";
createEdgeSprites();
var bricks = createGroup();
Dica Pro: Lembre-se de criar as animações para deixar seu jogo mais atrativo!
Passo 2: Criando as Linhas de Blocos
Criamos 4 fileiras coloridas de blocos, cada uma com uma cor diferente para dar aquele visual clássico do Breakout!
function createBrickRow(y, color) {
for(c=0; c<6; c++) {
var brick = createSprite(65+54*c, y, 50, 25);
brick.shapeColor = color;
bricks.add(brick);
}
}
createBrickRow(65, "red");
createBrickRow(65+29, "orange");
createBrickRow(65+29+29, "green");
createBrickRow(65+29+29+29, "yellow");
Passo 3: Lançando a Bola
Agora, vamos desenhar os elementos na tela e gerenciar os estados do jogo: serve, onde o jogador prepara para lançar a bola, e end, para quando o jogo acaba.
function mousePressed() {
ball.velocityX = 10;
ball.velocityY = 6;
if(gamestate == "serve") {
gamestate = "play";
ball.velocityY = -7;
ball.velocityX = -7;
}
}
Passo 4: Desenhando o Jogo e Gerenciando Estados
Agora, vamos desenhar os elementos na tela e gerenciar os estados do jogo: serve, onde o jogador prepara para lançar a bola, e end, para quando o jogo acaba.
function draw() {
background("black");
textSize(20);
text("Pontuação: " + score, 40, 25);
text("Vidas: " + lives, 40, 45);
if(gamestate == "serve") {
text("Clique para lançar a bola.", 120, 250);
ball.velocityX = 0;
ball.velocityY = 0;
ball.x = 200;
ball.y = 200;
}
else if(gamestate == "end") {
text("Fim de Jogo", 150, 250);
ball.remove;
}
else {
gameplay();
}
drawSprites();
}
Passo 5: Colisões com os Blocos
O impacto da bola nos blocos é crucial para a mecânica do jogo. Vamos criar uma função que, ao detectar colisão, remove o bloco e aumenta a pontuação.
function brickHit(ball, brick) {
playSound("sound://category_hits/puzzle_game_button_04.mp3");
brick.remove();
score += 5;
}
Passo 6: Gerenciamento de Vidas
Se a bola cair no fundo da tela, o jogador perde uma vida. Essa parte do código é super importante para garantir a dificuldade do jogo.
function lifeover() {
lives -= 1;
if(lives >= 1) {
gamestate = "serve";
} else {
gamestate = "end";
}
}
Passo 7: Jogabilidade - Controle do Paddle e Colisões
Finalmente, a função gameplay reúne toda a lógica de controle do paddle, colisões da bola com os limites da tela, e interações com os blocos e o paddle.
function gameplay() {
paddle.x = World.mouseX;
if(paddle.x < 60) {
paddle.x = 60;
}
if(paddle.x > 340) {
paddle.x = 340;
}
ball.bounceOff(topEdge);
ball.bounceOff(leftEdge);
ball.bounceOff(rightEdge);
ball.bounceOff(bricks, brickHit);
if(ball.bounceOff(paddle)) {
playSound("sound://category_tap/puzzle_game_organic_wood_block_tone_tap_1.mp3");
}
if(score == 36) {
ball.velocityX = 0;
ball.velocityY = 0;
text("Muito bem!!", 150, 200);
}
if(ball.isTouching(bottomEdge)) {
lifeover();
}
}
RESULTADO
var ball;
var score = 0;
var lives = 3;
var gamestate = "serve";
ball = createSprite(200,200,10,10);
ball.setAnimation("golfball_1");
ball.scale = 0.05;
var paddle = createSprite(200, 350, 120, 10);
paddle.shapeColor = "blue";
createEdgeSprites();
var bricks = createGroup();
function createBrickRow(y, color) {
for(c=0; c<6; c++)
{
var brick = createSprite(65+54*c,y,50, 25);
brick.shapeColor = color;
bricks.add(brick);
}
}
createBrickRow(65, "red");
createBrickRow(65+29, "orange");
createBrickRow(65+29+29, "green");
createBrickRow(65+29+29+29, "yellow");
function draw() {
background("black");
textSize(20);
text("Pontuação: "+score,40,25);
text("Vidas: "+lives, 40, 45);
if(gamestate == "serve"){
text("Clique para lançar a bola.", 120,250);
ball.velocityX =0;
ball.velocityY =0;
ball.x = 200;
ball.y = 200;
}
else if(gamestate =="end") {
text("Fim de Jogo", 150, 250);
ball.remove;
}
else {
gameplay();
}
drawSprites();
}
function mousePressed()
{
ball.velocityX = 10;
ball.velocityY = 6;
if(gamestate == "serve"){
gamestate = "play";
ball.velocityY = -7;
ball.velocityX = -7;
}
}
function brickHit(ball, brick) {
playSound("sound://category_hits/puzzle_game_button_04.mp3");
brick.remove();
score = score+5;
}
function lifeover(){
lives = lives - 1;
if(lives>=1) {
gamestate = "serve";
}
else {
gamestate = "end";
}
}
function gameplay(){
paddle.x = World.mouseX;
if(paddle.x < 60)
{
paddle.x = 60;
}
if(paddle.x > 340)
{
paddle.x = 340;
}
//rotation = rotation + 5;
ball.bounceOff(topEdge);
ball.bounceOff(leftEdge);
ball.bounceOff(rightEdge);
//ball.bounceOff(paddle);
ball.bounceOff(bricks, brickHit);
if(ball.bounceOff(paddle))
{
playSound("sound://category_tap/puzzle_game_organic_wood_block_tone_tap_1.mp3");
}
if(score==36)
{
//console.log("Won");
ball.velocityX = 0;
ball.velocityY = 0;
text("Muio bem!!",150,200);
}
if(ball.isTouching(bottomEdge)) {
lifeover();
}
}
