{"id":679,"date":"2024-10-07T17:26:44","date_gmt":"2024-10-07T20:26:44","guid":{"rendered":"https:\/\/urutaudev.com.br\/?p=679"},"modified":"2024-10-07T18:34:43","modified_gmt":"2024-10-07T21:34:43","slug":"como-fazer-arkanoid-game-em-javascript","status":"publish","type":"post","link":"https:\/\/urutaudev.com.br\/index.php\/2024\/10\/07\/como-fazer-arkanoid-game-em-javascript\/","title":{"rendered":"Como fazer Arkanoid Game em Javascript"},"content":{"rendered":"

<\/h1>\n
\"Como
Como fazer Arkanoid Game em Javascript<\/figcaption><\/figure>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Introdu\u00e7\u00e3o<\/span><\/h2>\n
\n
Neste post, vamos explorar passo a passo como criar uma vers\u00e3o simples do Arkanoid, um game cl\u00e1ssico dos anos 80. Durante este tutorial irei abordar a implementa\u00e7\u00e3o das principais funcionalidades, como o movimento da bola e a colis\u00e3o com os blocos.<\/span><\/div>\n
Prepare-se para mergulhar no mundo dos jogos retro e descobrir como trazer um toque de nostalgia a seu aprendizado em programa\u00e7\u00e3o, construindo um game utilizando apenas Javascript<\/a>, css e html.<\/span><\/div>\n<\/div>\n

 <\/p>\n

 <\/p>\n

Primeiro passo voc\u00ea dever\u00e1 criar a estrutura da p\u00e1gina, para isso crie um arquivo html contendo\u00a0 o c\u00f3digo conforme mostrado abaixo:<\/span><\/strong><\/span><\/p>\n

 <\/p>\n

\n
<!DOCTYPE html><\/code><\/div>\n
<html lang=\"pt-BR\"><\/code><\/div>\n
<head><\/code><\/div>\n
\u00a0 \u00a0 <meta charset=\"UTF-8\"><\/code><\/div>\n
\u00a0 \u00a0 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code><\/div>\n
\u00a0 \u00a0 <title>Arkanoid Game<\/title><\/code><\/div>\n
\u00a0 \u00a0 <link rel=\"stylesheet\" href=\"style.css\"><\/code><\/div>\n
<\/head><\/code><\/div>\n
<body><\/code><\/div>\n
\u00a0 \u00a0 <div class=\"container\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"scenes\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div id=\"menu\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <img src=\"logo-arkanoid.jpeg\" alt=\"\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button id=\"startButton\">Start Game<\/button><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div id=\"levelUp\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h2>Level Completed!<\/h2><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button id=\"nextLevelButton\">Next Level<\/button><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div id=\"gameOver\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h1>Game Over<\/h1><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button id=\"restartButton\">Restart Game<\/button><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div id=\"gameOverScore\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h2>Your Score: 100<\/h2><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h2>Best Score: 100<\/h2><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <canvas id=\"gameCanvas\" width=\"480\" height=\"320\"><\/canvas><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"game-info\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div id=\"controls\" class=\"controls\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"sound-control\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label>Sound:<\/label><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button id=\"toggleSound\">TURN OFF<\/button><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"volume-control\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label for=\"volumeControl\" id=\"volumeControlLabel\">Music Volume:<\/label><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"range\" id=\"volumeControl\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.3\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"score\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h3>Records<\/h3><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <ul id=\"recordsList\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li>1\u00ba - 000 Points<\/li><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li>2\u00ba - 000 Points<\/li><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li>3\u00ba - 000 Points<\/li><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li>4\u00ba - 000 Points<\/li><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li>5\u00ba - 000 Points<\/li><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/ul><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 <script src=\"main.js\"><\/script><\/code><\/div>\n
<\/body><\/code><\/div>\n
<\/html><\/code><\/div>\n<\/div>\n

 <\/p>\n

Depois adiciono o css respons\u00e1vel pela estiliza\u00e7\u00e3o da p\u00e1gina :<\/span><\/strong><\/span><\/p>\n

 <\/p>\n

\n
@font-face {<\/code><\/div>\n
\u00a0 font-family: \"Poppins\";<\/code><\/div>\n
\u00a0 src: url(\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@500;800&display=swap\");<\/code><\/div>\n
}<\/code><\/div>\n
*,<\/code><\/div>\n
*:after,<\/code><\/div>\n
*:before {<\/code><\/div>\n
\u00a0 margin: 0;<\/code><\/div>\n
\u00a0 padding: 0;<\/code><\/div>\n
\u00a0 border: 0;<\/code><\/div>\n
\u00a0 font-size: 100%;<\/code><\/div>\n
\u00a0 vertical-align: baseline;<\/code><\/div>\n
\u00a0 text-decoration: none;<\/code><\/div>\n
}<\/code><\/div>\n
ul {<\/code><\/div>\n
\u00a0 list-style: none;<\/code><\/div>\n
}<\/code><\/div>\n
button:focus {<\/code><\/div>\n
\u00a0 outline: 0;<\/code><\/div>\n
}<\/code><\/div>\n
:root {<\/code><\/div>\n
\u00a0 --green: rgb(166, 247, 80);<\/code><\/div>\n
}<\/code><\/div>\n
html,<\/code><\/div>\n
body {<\/code><\/div>\n
\u00a0 height: 100%;<\/code><\/div>\n
\u00a0 font-family: \"Poppins\", sans-serif;<\/code><\/div>\n
\u00a0 color: #6e7888;<\/code><\/div>\n
}<\/code><\/div>\n
body {<\/code><\/div>\n
\u00a0 height: 100vh;<\/code><\/div>\n
\u00a0 width: 100vw;<\/code><\/div>\n
\u00a0 display: flex;<\/code><\/div>\n
\u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 align-items: center;<\/code><\/div>\n
\u00a0 background-color: #222738;<\/code><\/div>\n
}<\/code><\/div>\n
.container {<\/code><\/div>\n
\u00a0 width: 100%;<\/code><\/div>\n
\u00a0 height: 100%;<\/code><\/div>\n
\u00a0 display: flex;<\/code><\/div>\n
\u00a0 flex-direction: row;<\/code><\/div>\n
\u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 align-items: center;<\/code><\/div>\n
\u00a0 gap: 1rem;<\/code><\/div>\n
}<\/code><\/div>\n
.scenes {<\/code><\/div>\n
\u00a0 display: flex;<\/code><\/div>\n
\u00a0 flex-direction: column;<\/code><\/div>\n
}<\/code><\/div>\n
canvas {<\/code><\/div>\n
\u00a0 border: 1px solid var(--green);<\/code><\/div>\n
\u00a0 background-color: #181825;<\/code><\/div>\n
}<\/code><\/div>\n
#menu,<\/code><\/div>\n
#gameOver,<\/code><\/div>\n
#levelUp {<\/code><\/div>\n
\u00a0 min-width: 400px;<\/code><\/div>\n
\u00a0 min-height: 300px;<\/code><\/div>\n
\u00a0 display: none;<\/code><\/div>\n
\u00a0 flex-direction: column;<\/code><\/div>\n
\u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 align-items: center;<\/code><\/div>\n
\u00a0 background: rgba(255, 255, 255, 0.95);<\/code><\/div>\n
\u00a0 background-color: #181825;<\/code><\/div>\n
\u00a0 padding: 30px;<\/code><\/div>\n
\u00a0 border: 2px solid #0095dd;<\/code><\/div>\n
\u00a0 text-align: center;<\/code><\/div>\n
\u00a0 border-radius: 10px;<\/code><\/div>\n
\u00a0 gap: 1rem;<\/code><\/div>\n
\u00a0 box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,<\/code><\/div>\n
\u00a0 \u00a0 rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,<\/code><\/div>\n
\u00a0 \u00a0 rgba(255, 255, 255, 0.08) 0px 1px 0px inset;<\/code><\/div>\n
\u00a0 font-size: 2rem;<\/code><\/div>\n
\u00a0 font-weight: 900;<\/code><\/div>\n
\u00a0 color: var(--green);<\/code><\/div>\n
}<\/code><\/div>\n
#menu > img{<\/code><\/div>\n
\u00a0 width: 250px;<\/code><\/div>\n
\u00a0 max-height: 30%;<\/code><\/div>\n
}<\/code><\/div>\n
#gameOver h1 {<\/code><\/div>\n
\u00a0 color: #f22c3d;<\/code><\/div>\n
}<\/code><\/div>\n
.game-info {<\/code><\/div>\n
\u00a0 display: flex;<\/code><\/div>\n
\u00a0 flex-direction: column;<\/code><\/div>\n
\u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 align-items: flex-start;<\/code><\/div>\n
\u00a0 padding: 1rem;<\/code><\/div>\n
\u00a0 gap: 1rem;<\/code><\/div>\n
\u00a0 font-size: 1rem;<\/code><\/div>\n
\u00a0 font-weight: 800;<\/code><\/div>\n
}<\/code><\/div>\n
.controls {<\/code><\/div>\n
\u00a0 display: flex;<\/code><\/div>\n
\u00a0 flex-direction: column;<\/code><\/div>\n
\u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 align-items: start;<\/code><\/div>\n
\u00a0 gap: 0.5rem;<\/code><\/div>\n
}<\/code><\/div>\n
button {<\/code><\/div>\n
\u00a0 padding: 0.4rem 0.5rem;<\/code><\/div>\n
\u00a0 background: #0095dd;<\/code><\/div>\n
\u00a0 color: white;<\/code><\/div>\n
\u00a0 cursor: pointer;<\/code><\/div>\n
\u00a0 border: none;<\/code><\/div>\n
\u00a0 border-radius: 4px;<\/code><\/div>\n
\u00a0 font-size: 0.7rem;<\/code><\/div>\n
\u00a0 line-height: 0.7rem;<\/code><\/div>\n
\u00a0 font-weight: 800;<\/code><\/div>\n
}<\/code><\/div>\n
button:hover {<\/code><\/div>\n
\u00a0 background: #007bb5;<\/code><\/div>\n
}<\/code><\/div>\n
#controls label {<\/code><\/div>\n
\u00a0 font-size: 1rem;<\/code><\/div>\n
\u00a0 color: var(--green);<\/code><\/div>\n
}<\/code><\/div>\n
.sound-control {<\/code><\/div>\n
\u00a0 display: flex;<\/code><\/div>\n
\u00a0 flex-direction: column;<\/code><\/div>\n
\u00a0 gap: 0.2rem;<\/code><\/div>\n
\u00a0 border-radius: 4px;<\/code><\/div>\n
}<\/code><\/div>\n
.volume-control {<\/code><\/div>\n
\u00a0 display: flex;<\/code><\/div>\n
\u00a0 flex-direction: column;<\/code><\/div>\n
\u00a0 gap: 0.8rem;<\/code><\/div>\n
\u00a0 border-radius: 4px;<\/code><\/div>\n
}<\/code><\/div>\n
.volume-control input {<\/code><\/div>\n
\u00a0 width: calc(80% -20px);<\/code><\/div>\n
\u00a0 height: 10px;<\/code><\/div>\n
\u00a0 appearance: none;<\/code><\/div>\n
\u00a0 outline: none;<\/code><\/div>\n
\u00a0 background: #6e7888;<\/code><\/div>\n
\u00a0 border-radius: 5px;<\/code><\/div>\n
\u00a0 box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,<\/code><\/div>\n
\u00a0 \u00a0 rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,<\/code><\/div>\n
\u00a0 \u00a0 rgba(255, 255, 255, 0.08) 0px 1px 0px inset;<\/code><\/div>\n
}<\/code><\/div>\n
.volume-control input::-webkit-slider-thumb {<\/code><\/div>\n
\u00a0 appearance: none;<\/code><\/div>\n
\u00a0 width: 18px;<\/code><\/div>\n
\u00a0 height: 18px;<\/code><\/div>\n
\u00a0 background: #0095dd;<\/code><\/div>\n
\u00a0 border: solid 2px white;<\/code><\/div>\n
\u00a0 border-radius: 50%;<\/code><\/div>\n
\u00a0 cursor: grab;<\/code><\/div>\n
}<\/code><\/div>\n
.score h3 {<\/code><\/div>\n
\u00a0 font-weight: 900;<\/code><\/div>\n
\u00a0 color: var(--green);<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n

 <\/p>\n

Por ultimo adiciono o script respons\u00e1vel por adicionar a l\u00f3gica do jogo<\/a>:<\/span><\/strong><\/span><\/p>\n

 <\/p>\n

\n
\/\/ Constantes de configura\u00e7\u00e3o<\/code><\/div>\n
const BALL_SPEED_MULTIPLIER = 1.2;<\/code><\/div>\n
const INITIAL_LIVES = 1;<\/code><\/div>\n
const MAX_LEVELS = 5;<\/code><\/div>\n
const PADDLE_SPEED = 7;<\/code><\/div>\n
const PARTICLE_COUNT = 15;<\/code><\/div>\n
\/\/ Elementos do DOM<\/code><\/div>\n
const canvas = document.getElementById(\"gameCanvas\");<\/code><\/div>\n
const ctx = canvas.getContext(\"2d\");<\/code><\/div>\n
const menu = document.getElementById(\"menu\");<\/code><\/div>\n
const startButton = document.getElementById(\"startButton\");<\/code><\/div>\n
const gameOverMenu = document.getElementById(\"gameOver\");<\/code><\/div>\n
const gameOverScore = document.getElementById(\"gameOverScore\");<\/code><\/div>\n
const restartButton = document.getElementById(\"restartButton\");<\/code><\/div>\n
const levelUpMenu = document.getElementById(\"levelUp\");<\/code><\/div>\n
const nextLevelButton = document.getElementById(\"nextLevelButton\");<\/code><\/div>\n
const toggleSoundButton = document.getElementById(\"toggleSound\");<\/code><\/div>\n
const volumeControl = document.getElementById(\"volumeControl\");<\/code><\/div>\n
const volumeControlLabel = document.getElementById(\"volumeControlLabel\");<\/code><\/div>\n
const recordsList = document.getElementById(\"recordsList\");<\/code><\/div>\n
\/\/ Controle de som<\/code><\/div>\n
let soundOn = true;<\/code><\/div>\n
\/\/ Sons do jogo<\/code><\/div>\n
const music = new Audio(\"sounds\/background.mp3\");<\/code><\/div>\n
music.loop = true;<\/code><\/div>\n
music.volume = 0.3;<\/code><\/div>\n
class Ball {<\/code><\/div>\n
\u00a0 constructor(x, y, radius, dx, dy, color = \"#0095DD\") {<\/code><\/div>\n
\u00a0 \u00a0 this.x = x;<\/code><\/div>\n
\u00a0 \u00a0 this.y = y;<\/code><\/div>\n
\u00a0 \u00a0 this.radius = radius;<\/code><\/div>\n
\u00a0 \u00a0 this.dx = dx;<\/code><\/div>\n
\u00a0 \u00a0 this.dy = dy;<\/code><\/div>\n
\u00a0 \u00a0 this.color = color;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 draw(ctx) {<\/code><\/div>\n
\u00a0 \u00a0 ctx.beginPath();<\/code><\/div>\n
\u00a0 \u00a0 ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);<\/code><\/div>\n
\u00a0 \u00a0 ctx.fillStyle = this.color;<\/code><\/div>\n
\u00a0 \u00a0 ctx.fill();<\/code><\/div>\n
\u00a0 \u00a0 ctx.closePath();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 move() {<\/code><\/div>\n
\u00a0 \u00a0 this.x += this.dx;<\/code><\/div>\n
\u00a0 \u00a0 this.y += this.dy;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 reset(x, y, dx, dy) {<\/code><\/div>\n
\u00a0 \u00a0 this.x = x;<\/code><\/div>\n
\u00a0 \u00a0 this.y = y;<\/code><\/div>\n
\u00a0 \u00a0 this.dx = dx;<\/code><\/div>\n
\u00a0 \u00a0 this.dy = dy;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
class Paddle {<\/code><\/div>\n
\u00a0 constructor(width, height, canvasWidth, color = \"#0095DD\") {<\/code><\/div>\n
\u00a0 \u00a0 this.width = width;<\/code><\/div>\n
\u00a0 \u00a0 this.height = height;<\/code><\/div>\n
\u00a0 \u00a0 this.canvasWidth = canvasWidth;<\/code><\/div>\n
\u00a0 \u00a0 this.x = (canvasWidth - width) \/ 2;<\/code><\/div>\n
\u00a0 \u00a0 this.color = color;<\/code><\/div>\n
\u00a0 \u00a0 this.speed = PADDLE_SPEED;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 draw(ctx) {<\/code><\/div>\n
\u00a0 \u00a0 ctx.beginPath();<\/code><\/div>\n
\u00a0 \u00a0 ctx.rect(this.x, canvas.height - this.height, this.width, this.height);<\/code><\/div>\n
\u00a0 \u00a0 ctx.fillStyle = this.color;<\/code><\/div>\n
\u00a0 \u00a0 ctx.fill();<\/code><\/div>\n
\u00a0 \u00a0 ctx.closePath();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 move(direction) {<\/code><\/div>\n
\u00a0 \u00a0 if (direction === \"right\" && this.x < this.canvasWidth - this.width) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.x += this.speed;<\/code><\/div>\n
\u00a0 \u00a0 } else if (direction === \"left\" && this.x > 0) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.x -= this.speed;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 reset() {<\/code><\/div>\n
\u00a0 \u00a0 this.x = (this.canvasWidth - this.width) \/ 2;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
class Brick {<\/code><\/div>\n
\u00a0 constructor(x, y, width, height, status = 1, color = \"rgb(166, 247, 80)\") {<\/code><\/div>\n
\u00a0 \u00a0 this.x = x;<\/code><\/div>\n
\u00a0 \u00a0 this.y = y;<\/code><\/div>\n
\u00a0 \u00a0 this.width = width;<\/code><\/div>\n
\u00a0 \u00a0 this.height = height;<\/code><\/div>\n
\u00a0 \u00a0 this.status = status;<\/code><\/div>\n
\u00a0 \u00a0 this.color = color;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 draw(ctx) {<\/code><\/div>\n
\u00a0 \u00a0 if (this.status === 1) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ctx.beginPath();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ctx.rect(this.x, this.y, this.width, this.height);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ctx.fillStyle = this.color;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ctx.fill();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ctx.closePath();<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
class Particle {<\/code><\/div>\n
\u00a0 constructor(x, y, color) {<\/code><\/div>\n
\u00a0 \u00a0 this.x = x;<\/code><\/div>\n
\u00a0 \u00a0 this.y = y;<\/code><\/div>\n
\u00a0 \u00a0 this.color = color;<\/code><\/div>\n
\u00a0 \u00a0 this.size = Math.random() * 3 + 1;<\/code><\/div>\n
\u00a0 \u00a0 this.speedX = Math.random() * 2 - 1;<\/code><\/div>\n
\u00a0 \u00a0 this.speedY = Math.random() * 2 - 1;<\/code><\/div>\n
\u00a0 \u00a0 this.alpha = 1;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 draw(ctx) {<\/code><\/div>\n
\u00a0 \u00a0 ctx.save();<\/code><\/div>\n
\u00a0 \u00a0 ctx.globalAlpha = this.alpha;<\/code><\/div>\n
\u00a0 \u00a0 ctx.beginPath();<\/code><\/div>\n
\u00a0 \u00a0 ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);<\/code><\/div>\n
\u00a0 \u00a0 ctx.fillStyle = this.color;<\/code><\/div>\n
\u00a0 \u00a0 ctx.fill();<\/code><\/div>\n
\u00a0 \u00a0 ctx.closePath();<\/code><\/div>\n
\u00a0 \u00a0 ctx.restore();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 update() {<\/code><\/div>\n
\u00a0 \u00a0 this.x += this.speedX;<\/code><\/div>\n
\u00a0 \u00a0 this.y += this.speedY;<\/code><\/div>\n
\u00a0 \u00a0 this.alpha -= 0.02;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
class SoundManager {<\/code><\/div>\n
\u00a0 constructor() {<\/code><\/div>\n
\u00a0 \u00a0 this.sounds = {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 bounce: new Audio(\"sounds\/bounce.wav\"),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 brick: new Audio(\"sounds\/brick.wav\"),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 gameOver: new Audio(\"sounds\/gameover.wav\"),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 levelUp: new Audio(\"sounds\/levelup.wav\"),<\/code><\/div>\n
\u00a0 \u00a0 };<\/code><\/div>\n
\u00a0 \u00a0 this.soundOn = true;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 playSound(soundName) {<\/code><\/div>\n
\u00a0 \u00a0 const sound = this.sounds[soundName];<\/code><\/div>\n
\u00a0 \u00a0 sound.volume = 0.1;<\/code><\/div>\n
\u00a0 \u00a0 if (this.soundOn && sound) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 sound.currentTime = 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 sound<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 .play()<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 .catch((error) => console.error(\"Erro ao reproduzir som:\", error));<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 toggleSound() {<\/code><\/div>\n
\u00a0 \u00a0 this.soundOn = !this.soundOn; \/\/ Alterna entre ativar\/desativar o som<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
\/\/ Classe principal do jogo<\/code><\/div>\n
class Game {<\/code><\/div>\n
\u00a0 constructor() {<\/code><\/div>\n
\u00a0 \u00a0 this.ball = new Ball(canvas.width \/ 2, canvas.height - 30, 10, 2, -2);<\/code><\/div>\n
\u00a0 \u00a0 this.paddle = new Paddle(75, 10, canvas.width);<\/code><\/div>\n
\u00a0 \u00a0 this.bricks = [];<\/code><\/div>\n
\u00a0 \u00a0 this.particles = [];<\/code><\/div>\n
\u00a0 \u00a0 this.score = 0;<\/code><\/div>\n
\u00a0 \u00a0 this.lives = INITIAL_LIVES;<\/code><\/div>\n
\u00a0 \u00a0 this.level = 1;<\/code><\/div>\n
\u00a0 \u00a0 this.maxLevels = MAX_LEVELS;<\/code><\/div>\n
\u00a0 \u00a0 this.rightPressed = false;<\/code><\/div>\n
\u00a0 \u00a0 this.leftPressed = false;<\/code><\/div>\n
\u00a0 \u00a0 this.isRunning = false;<\/code><\/div>\n
\u00a0 \u00a0 this.bricks = this.createBricks();<\/code><\/div>\n
\u00a0 \u00a0 this.soundManager = new SoundManager();<\/code><\/div>\n
\u00a0 \u00a0 this.musicManager = new SoundManager();<\/code><\/div>\n
\u00a0 \u00a0 this.addEventListeners();<\/code><\/div>\n
\u00a0 \u00a0 this.setRecords();<\/code><\/div>\n
\u00a0 \u00a0 this.showStartMenu();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 createBricks() {<\/code><\/div>\n
\u00a0 \u00a0 const brickRowCount = 3;<\/code><\/div>\n
\u00a0 \u00a0 const brickColumnCount = 5;<\/code><\/div>\n
\u00a0 \u00a0 const brickWidth = 75;<\/code><\/div>\n
\u00a0 \u00a0 const brickHeight = 20;<\/code><\/div>\n
\u00a0 \u00a0 const brickPadding = 10;<\/code><\/div>\n
\u00a0 \u00a0 const brickOffsetTop = 30;<\/code><\/div>\n
\u00a0 \u00a0 const brickOffsetLeft = 30;<\/code><\/div>\n
\u00a0 \u00a0 const bricks = [];<\/code><\/div>\n
\u00a0 \u00a0 for (let r = 0; r < brickRowCount; r++) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 for (let c = 0; c < brickColumnCount; c++) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 const brick = new Brick(brickX, brickY, brickWidth, brickHeight);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 bricks.push(brick);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 console.log(bricks);<\/code><\/div>\n
\u00a0 \u00a0 return bricks; \/\/ Retorna uma lista plana de tijolos<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 addEventListeners() {<\/code><\/div>\n
\u00a0 \u00a0 document.addEventListener(\"keydown\", this.handleKey.bind(this), false);<\/code><\/div>\n
\u00a0 \u00a0 document.addEventListener(\"keyup\", this.handleKey.bind(this), false);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 handleKey(e, isKeyDown) {<\/code><\/div>\n
\u00a0 \u00a0 const keyActions = {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 Right: \"rightPressed\",<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ArrowRight: \"rightPressed\",<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 Left: \"leftPressed\",<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ArrowLeft: \"leftPressed\",<\/code><\/div>\n
\u00a0 \u00a0 };<\/code><\/div>\n
\u00a0 \u00a0 const action = keyActions[e.key];<\/code><\/div>\n
\u00a0 \u00a0 if (action) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 e.preventDefault();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Define o estado com base no tipo do evento (keydown = true, keyup = false)<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this[action] = e.type === \"keydown\";<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 collisionDetection() {<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Filtra apenas os tijolos ativos para colis\u00e3o<\/code><\/div>\n
\u00a0 \u00a0 const activeBricks = this.bricks.filter((brick) => brick.status === 1);<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Verifica colis\u00e3o dos tijolos ativos<\/code><\/div>\n
\u00a0 \u00a0 activeBricks.forEach((brick) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (this.isCollidingWithBrick(brick)) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.handleBrickCollision(brick);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 isCollidingWithBrick(brick) {<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Verifica se a bola est\u00e1 colidindo com o tijolo<\/code><\/div>\n
\u00a0 \u00a0 return (<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ball.x > brick.x &&<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ball.x < brick.x + brick.width &&<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ball.y > brick.y &&<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ball.y < brick.y + brick.height<\/code><\/div>\n
\u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 handleBrickCollision(brick) {<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Reage \u00e0 colis\u00e3o: atualiza o status, incrementa a pontua\u00e7\u00e3o e trata efeitos<\/code><\/div>\n
\u00a0 \u00a0 this.soundManager.playSound(\"brick\");<\/code><\/div>\n
\u00a0 \u00a0 this.ball.dy = -this.ball.dy;<\/code><\/div>\n
\u00a0 \u00a0 brick.status = 0;<\/code><\/div>\n
\u00a0 \u00a0 this.score++;<\/code><\/div>\n
\u00a0 \u00a0 this.createParticles(brick.x + brick.width \/ 2, brick.y + brick.height \/ 2);<\/code><\/div>\n
\u00a0 \u00a0 this.checkLevelCompletion();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 createParticles(x, y) {<\/code><\/div>\n
\u00a0 \u00a0 for (let i = 0; i < PARTICLE_COUNT; i++) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.particles.push(new Particle(x, y, \"#0095DD\"));<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 updateParticles() {<\/code><\/div>\n
\u00a0 \u00a0 this.particles = this.particles.filter((particle) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 particle.update();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 return particle.alpha > 0;<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 drawParticles() {<\/code><\/div>\n
\u00a0 \u00a0 this.particles.forEach((particle) => particle.draw(ctx));<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 checkLevelCompletion() {<\/code><\/div>\n
\u00a0 \u00a0 const totalBricks = this.bricks.filter(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 (brick) => brick.status === 1<\/code><\/div>\n
\u00a0 \u00a0 ).length;<\/code><\/div>\n
\u00a0 \u00a0 if (totalBricks < 1) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.showLevelUpMenu();<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 saveHighScore() {<\/code><\/div>\n
\u00a0 \u00a0 let scores = JSON.parse(localStorage.getItem(\"highScores\")) || [];<\/code><\/div>\n
\u00a0 \u00a0 scores.push(this.score);<\/code><\/div>\n
\u00a0 \u00a0 scores.sort((a, b) => b - a);<\/code><\/div>\n
\u00a0 \u00a0 if (scores.length > 5) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 scores.pop();<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 localStorage.setItem(\"highScores\", JSON.stringify(scores));<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 displayHighScores() {<\/code><\/div>\n
\u00a0 \u00a0 const highScoresList = document.createElement(\"div\");<\/code><\/div>\n
\u00a0 \u00a0 const scores = JSON.parse(localStorage.getItem(\"highScores\")) || [];<\/code><\/div>\n
\u00a0 \u00a0 const userScore = document.createElement(\"h2\");<\/code><\/div>\n
\u00a0 \u00a0 userScore.textContent = `Your Score: ${this.score}`;<\/code><\/div>\n
\u00a0 \u00a0 highScoresList.appendChild(userScore);<\/code><\/div>\n
\u00a0 \u00a0 const bestScoreValue = scores.length > 0 ? Math.max(...scores) : this.score;<\/code><\/div>\n
\u00a0 \u00a0 const bestScore = document.createElement(\"h2\");<\/code><\/div>\n
\u00a0 \u00a0 bestScore.textContent = `Best Score: ${bestScoreValue}`;<\/code><\/div>\n
\u00a0 \u00a0 highScoresList.appendChild(bestScore);<\/code><\/div>\n
\u00a0 \u00a0 gameOverScore.innerHTML = \"\";<\/code><\/div>\n
\u00a0 \u00a0 gameOverScore.appendChild(highScoresList);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 showGameOverMenu() {<\/code><\/div>\n
\u00a0 \u00a0 this.stopGame();<\/code><\/div>\n
\u00a0 \u00a0 this.saveHighScore();<\/code><\/div>\n
\u00a0 \u00a0 this.toggleMenu(gameOverMenu, true);<\/code><\/div>\n
\u00a0 \u00a0 this.displayHighScores();<\/code><\/div>\n
\u00a0 \u00a0 this.setRecords();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 showLevelUpMenu() {<\/code><\/div>\n
\u00a0 \u00a0 this.stopGame();<\/code><\/div>\n
\u00a0 \u00a0 this.toggleMenu(levelUpMenu, true);<\/code><\/div>\n
\u00a0 \u00a0 this.soundManager.playSound(\"levelUp\");<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 showStartMenu() {<\/code><\/div>\n
\u00a0 \u00a0 this.toggleMenu(menu, true);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 stopGame() {<\/code><\/div>\n
\u00a0 \u00a0 this.isRunning = false;<\/code><\/div>\n
\u00a0 \u00a0 music.pause();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 resetBallAndPaddle() {<\/code><\/div>\n
\u00a0 \u00a0 this.ball.reset(canvas.width \/ 2, canvas.height - 30, 2, -2);<\/code><\/div>\n
\u00a0 \u00a0 this.paddle.reset();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 resetBricks() {<\/code><\/div>\n
\u00a0 \u00a0 this.bricks = this.createBricks();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 resetGame() {<\/code><\/div>\n
\u00a0 \u00a0 this.toggleMenu(menu, false);<\/code><\/div>\n
\u00a0 \u00a0 this.toggleMenu(gameOverMenu, false);<\/code><\/div>\n
\u00a0 \u00a0 this.toggleMenu(levelUpMenu, false);<\/code><\/div>\n
\u00a0 \u00a0 canvas.style.display = \"block\";<\/code><\/div>\n
\u00a0 \u00a0 this.isRunning = true;<\/code><\/div>\n
\u00a0 \u00a0 music.play();<\/code><\/div>\n
\u00a0 \u00a0 this.score = 0;<\/code><\/div>\n
\u00a0 \u00a0 this.lives = INITIAL_LIVES;<\/code><\/div>\n
\u00a0 \u00a0 this.level = 1;<\/code><\/div>\n
\u00a0 \u00a0 this.resetBricks();<\/code><\/div>\n
\u00a0 \u00a0 this.resetBallAndPaddle();<\/code><\/div>\n
\u00a0 \u00a0 this.draw();<\/code><\/div>\n
\u00a0 \u00a0 this.setRecords();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 drawText(text, x, y, font = \"16px Arial\", color = \"#0095DD\") {<\/code><\/div>\n
\u00a0 \u00a0 ctx.font = font;<\/code><\/div>\n
\u00a0 \u00a0 ctx.fillStyle = color;<\/code><\/div>\n
\u00a0 \u00a0 ctx.fillText(text, x, y);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 drawScore() {<\/code><\/div>\n
\u00a0 \u00a0 this.drawText(`Level: ${this.level} | Score: ${this.score} `, 8, 20);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 drawLives() {<\/code><\/div>\n
\u00a0 \u00a0 this.drawText(`Lifes: ${this.lives}`, canvas.width - 65, 20);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 drawBricks(ctx) {<\/code><\/div>\n
\u00a0 \u00a0 this.bricks.forEach((brick) => brick.draw(ctx));<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 draw() {<\/code><\/div>\n
\u00a0 \u00a0 if (!this.isRunning) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 return;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 ctx.clearRect(0, 0, canvas.width, canvas.height);<\/code><\/div>\n
\u00a0 \u00a0 this.drawBricks(ctx);<\/code><\/div>\n
\u00a0 \u00a0 this.ball.draw(ctx);<\/code><\/div>\n
\u00a0 \u00a0 this.paddle.draw(ctx);<\/code><\/div>\n
\u00a0 \u00a0 this.drawScore();<\/code><\/div>\n
\u00a0 \u00a0 this.drawLives();<\/code><\/div>\n
\u00a0 \u00a0 this.drawParticles();<\/code><\/div>\n
\u00a0 \u00a0 this.collisionDetection();<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Movimenta\u00e7\u00e3o da bola<\/code><\/div>\n
\u00a0 \u00a0 this.ball.move();<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Colis\u00e3o com as paredes<\/code><\/div>\n
\u00a0 \u00a0 if (<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ball.x + this.ball.dx > canvas.width - this.ball.radius ||<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ball.x + this.ball.dx < this.ball.radius<\/code><\/div>\n
\u00a0 \u00a0 ) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ball.dx = -this.ball.dx;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.soundManager.playSound(\"bounce\");<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 if (this.ball.y + this.ball.dy < this.ball.radius) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ball.dy = -this.ball.dy;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.soundManager.playSound(\"bounce\");<\/code><\/div>\n
\u00a0 \u00a0 } else if (this.ball.y + this.ball.dy > canvas.height - this.ball.radius) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.ball.x > this.paddle.x &&<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.ball.x < this.paddle.x + this.paddle.width<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Ajustar a dire\u00e7\u00e3o da bola com base no ponto de impacto na raquete<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 const relativeHit =<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 (this.ball.x - (this.paddle.x + this.paddle.width \/ 2)) \/<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 (this.paddle.width \/ 2);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.ball.dx = relativeHit * 5;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.ball.dy = -this.ball.dy;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.soundManager.playSound(\"bounce\");<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.lives--;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.soundManager.playSound(\"gameOver\");<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 if (this.lives === 0) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.showGameOverMenu();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.resetBallAndPaddle();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Movimenta\u00e7\u00e3o da raquete<\/code><\/div>\n
\u00a0 \u00a0 if (this.rightPressed) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.paddle.move(\"right\");<\/code><\/div>\n
\u00a0 \u00a0 } else if (this.leftPressed) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.paddle.move(\"left\");<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 this.updateParticles();<\/code><\/div>\n
\u00a0 \u00a0 requestAnimationFrame(this.draw.bind(this));<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 nextLevel() {<\/code><\/div>\n
\u00a0 \u00a0 this.toggleMenu(levelUpMenu, false);<\/code><\/div>\n
\u00a0 \u00a0 this.level++;<\/code><\/div>\n
\u00a0 \u00a0 if (this.level > this.maxLevels) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 alert(\"Parab\u00e9ns! Voc\u00ea completou todos os n\u00edveis!\");<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 document.location.reload();<\/code><\/div>\n
\u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Aumentar a velocidade da bola<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ball.dx *= BALL_SPEED_MULTIPLIER;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ball.dy *= BALL_SPEED_MULTIPLIER;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Resetar os tijolos<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.resetBricks();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Resetar a posi\u00e7\u00e3o da bola e raquete<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.resetBallAndPaddle();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.isRunning = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 music.play();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.draw();<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 setRecords() {<\/code><\/div>\n
\u00a0 \u00a0 const scores = JSON.parse(localStorage.getItem(\"highScores\")) || [];<\/code><\/div>\n
\u00a0 \u00a0 const listItems = scores<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .map((score, index) => `<li>${index + 1}\u00ba - ${score} Points<\/li>`)<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .join(\"\");<\/code><\/div>\n
\u00a0 \u00a0 recordsList.innerHTML = listItems;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 toggleSound() {<\/code><\/div>\n
\u00a0 \u00a0 this.soundManager.toggleSound();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 \/\/ Fun\u00e7\u00f5es de interface<\/code><\/div>\n
\u00a0 toggleMenu(selectedMenu, show) {<\/code><\/div>\n
\u00a0 \u00a0 selectedMenu.style.display = show ? \"flex\" : \"none\";<\/code><\/div>\n
\u00a0 \u00a0 canvas.style.display = show ? \"none\" : \"block\";<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
function updateVolumeControlLabel() {<\/code><\/div>\n
\u00a0 const volumeValue = volumeControl.value * 100;<\/code><\/div>\n
\u00a0 volumeControlLabel.innerText = `Music Volume: ${volumeValue}%`;<\/code><\/div>\n
}<\/code><\/div>\n
\/\/ Controle de som<\/code><\/div>\n
toggleSoundButton.addEventListener(\"click\", () => {<\/code><\/div>\n
\u00a0 soundOn = !soundOn;<\/code><\/div>\n
\u00a0 music.muted = !soundOn;<\/code><\/div>\n
\u00a0 game.toggleSound();<\/code><\/div>\n
\u00a0 toggleSoundButton.textContent = soundOn ? \"Turn OFF\" : \"Turn ON\";<\/code><\/div>\n
});<\/code><\/div>\n
\/\/ Controle do volume<\/code><\/div>\n
volumeControl.addEventListener(\"input\", () => {<\/code><\/div>\n
\u00a0 music.volume = volumeControl.value;<\/code><\/div>\n
\u00a0 updateVolumeControlLabel();<\/code><\/div>\n
});<\/code><\/div>\n
\/\/ Eventos dos bot\u00f5es<\/code><\/div>\n
startButton.addEventListener(\"click\", () => game.resetGame());<\/code><\/div>\n
restartButton.addEventListener(\"click\", () => game.resetGame());<\/code><\/div>\n
nextLevelButton.addEventListener(\"click\", () => game.nextLevel());<\/code><\/div>\n
\/\/ Instanciar o jogo<\/code><\/div>\n
const game = new Game();<\/code><\/div>\n
updateVolumeControlLabel();<\/code><\/div>\n<\/div>\n

 <\/p>\n

 <\/p>\n

Deixo aqui um v\u00eddeo curto de como ficou o Jogo:<\/span><\/strong><\/span><\/p>\n

 <\/p>\n