Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 37
Tutorial para Criar o Jogo Breakout

Neste tutorial veremos como criar um jogo famoso chamado Breakout. Nesse jogo o jogador deve controlar uma raquete utilizando as setas do teclado para quicar uma bola até quebrar todos os tijolos. Se você perder um rebate o jogo será reiniciado. Essa versão é bem simples, mas você poderá incrementá-lo para ficar mais interessante.
Vejamos então o exemplo:
Exemplo: Nesse exemplo vamos utilizar três arquivos separados, um HTML, um CSS e um JavaScript. Você deve executar o arquivo html primeiro que ele chamará os outros quando necessário:
Arquivo breakout.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style.css" /> <title>Breakout!</title> <script src='/google_analytics_auto.js'></script></head> <body> <h1>Breakout!</h1> <canvas id="canvas" width="800" height="600"></canvas> <script src="script.js"></script> </body> </html>
Arquivo style.css:
* { box-sizing: border-box; } body { background-color: #aa00aa; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Arial, Helvetica, sans-serif; min-height: 100vh; margin: 0; } h1 { font-size: 45px; color: #00ffaa; } canvas { background: #f0f000; display: block; border-radius: 5px; } .btn { cursor: pointer; border: 0; padding: 10px 20px; background: #00fff0; color: #fff000; border-radius: 5px; } .btn:focus { outline: 0; } .btn:hover { background: #222; } .btn:active { transform: scale(0.98); } .rules-btn { position: absolute; top: 30px; left: 30px; } .rules { position: absolute; top: 0; left: 0; background: #000fff; color: #aaafff; min-height: 100vh; width: 400px; padding: 20px; line-height: 1.5; transform: translateX(-400px); transition: transform 1s ease-in-out; } .rules.show { transform: translateX(0); }
Arquivo script.js:
const rulesBtn = document.getElementById('rules-btn'); const closeBtn = document.getElementById('close-btn'); const rules = document.getElementById('rules'); const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let score = 0; const brickRowCount = 9; const brickColumnCount = 5; const delay = 500; // Tempo para reiniciar o jogo // Criar adereços da bbbola const ball = { x: canvas.width / 2, y: canvas.height / 2, size: 10, speed: 4, dx: 4, dy: -4, visible: true }; // Criar adereços da raquete const paddle = { x: canvas.width / 2 - 40, y: canvas.height - 20, w: 80, h: 10, speed: 8, dx: 0, visible: true }; // Criar adereços de tijolo const brickInfo = { w: 70, h: 20, padding: 10, offsetX: 45, offsetY: 60, visible: true }; // Cria os tijolos const bricks = []; for (let i = 0; i < brickRowCount; i++) { bricks[i] = []; for (let j = 0; j < brickColumnCount; j++) { const x = i * (brickInfo.w + brickInfo.padding) + brickInfo.offsetX; const y = j * (brickInfo.h + brickInfo.padding) + brickInfo.offsetY; bricks[i][j] = { x, y, ...brickInfo }; } } // Desenhha a bola na tela function drawBall() { ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.size, 0, Math.PI * 2); ctx.fillStyle = ball.visible ? '#0095dd' : 'transparent'; ctx.fill(); ctx.closePath(); } // Desenhha a raquete na tela function drawPaddle() { ctx.beginPath(); ctx.rect(paddle.x, paddle.y, paddle.w, paddle.h); ctx.fillStyle = paddle.visible ? '#0095dd' : 'transparent'; ctx.fill(); ctx.closePath(); } // Desenhha o placar na tela function drawScore() { ctx.font = '20px Arial'; ctx.fillText(`Score: ${score}`, canvas.width - 100, 30); } // Desenhha os tijolos na tela function drawBricks() { bricks.forEach(column => { column.forEach(brick => { ctx.beginPath(); ctx.rect(brick.x, brick.y, brick.w, brick.h); ctx.fillStyle = brick.visible ? '#0095dd' : 'transparent'; ctx.fill(); ctx.closePath(); }); }); } // Move a raquete na tela function movePaddle() { paddle.x += paddle.dx; // Detecção da parede if (paddle.x + paddle.w > canvas.width) { paddle.x = canvas.width - paddle.w; } if (paddle.x < 0) { paddle.x = 0; } } // Move a bola na tela function moveBall() { ball.x += ball.dx; ball.y += ball.dy; // Colisão com a parede (direita/esquerda) if (ball.x + ball.size > canvas.width || ball.x - ball.size < 0) { ball.dx *= -1; // ball.dx = ball.dx * -1 } // Colisão com a parede (cima/embaixo) if (ball.y + ball.size > canvas.height || ball.y - ball.size < 0) { ball.dy *= -1; } // console.log(ball.x, ball.y); // Colisão com a raquete if ( ball.x - ball.size > paddle.x && ball.x + ball.size < paddle.x + paddle.w && ball.y + ball.size > paddle.y ) { ball.dy = -ball.speed; } // Colisão com o tijolo bricks.forEach(column => { column.forEach(brick => { if (brick.visible) { if ( ball.x - ball.size > brick.x && // left brick side check ball.x + ball.size < brick.x + brick.w && // right brick side check ball.y + ball.size > brick.y && // top brick side check ball.y - ball.size < brick.y + brick.h // bottom brick side check ) { ball.dy *= -1; brick.visible = false; increaseScore(); } } }); }); // Bate na parede inferior - Perde if (ball.y + ball.size > canvas.height) { showAllBricks(); score = 0; } } // Aumenta o placar function increaseScore() { score++; if (score % (brickRowCount * brickColumnCount) === 0) { ball.visible = false; paddle.visible = false; // Após 0.5 segundos reinicia o jogo setTimeout(function () { showAllBricks(); score = 0; paddle.x = canvas.width / 2 - 40; paddle.y = canvas.height - 20; ball.x = canvas.width / 2; ball.y = canvas.height / 2; ball.visible = true; paddle.visible = true; },delay) } } // Faz todos os tijolos aparecerem function showAllBricks() { bricks.forEach(column => { column.forEach(brick => (brick.visible = true)); }); } // Desenha tudo function draw() { // clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); drawPaddle(); drawScore(); drawBricks(); } // Atualiza o desenho e a animação function update() { movePaddle(); moveBall(); // Desenha tudo draw(); requestAnimationFrame(update); } update(); // Evento Keydown function keyDown(e) { if (e.key === 'Right' || e.key === 'ArrowRight') { paddle.dx = paddle.speed; } else if (e.key === 'Left' || e.key === 'ArrowLeft') { paddle.dx = -paddle.speed; } } // Evento Keyup function keyUp(e) { if ( e.key === 'Right' || e.key === 'ArrowRight' || e.key === 'Left' || e.key === 'ArrowLeft' ) { paddle.dx = 0; } } // Manipuladores de evento de teclado document.addEventListener('keydown', keyDown); document.addEventListener('keyup', keyUp); // Rules and close event handlers // rulesBtn.addEventListener('click', () => rules.classList.add('show')); // closeBtn.addEventListener('click', () => rules.classList.remove('show'));
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar um Formulário para Criação de uma Conta
Tutorial para Criar um Tocador Musical >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino