{"id":806,"date":"2025-04-12T19:43:57","date_gmt":"2025-04-12T22:43:57","guid":{"rendered":"https:\/\/urutaudev.com.br\/?p=806"},"modified":"2025-04-12T21:21:57","modified_gmt":"2025-04-13T00:21:57","slug":"matrix-invaders-em-javascript","status":"publish","type":"post","link":"https:\/\/urutaudev.com.br\/index.php\/2025\/04\/12\/matrix-invaders-em-javascript\/","title":{"rendered":"Matrix invaders em Javascript"},"content":{"rendered":"

<\/h1>\n
\"matrix-invaders\"
matrix-invaders<\/figcaption><\/figure>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Introdu\u00e7\u00e3o<\/span><\/h2>\n
Embarque nesta jornada de desenvolvimento de jogos web! Neste post vamos recriar o cl\u00e1ssico “Space Invaders” utilizando apenas Javascript , html e Css. No post mostrarei como dar vida a gr\u00e1ficos, implementar os controles e construir a l\u00f3gica do jogo que roda diretamente no seu navegador. Prepare-se para transformar c\u00f3digo em divers\u00e3o interativa!<\/span><\/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
\n
\n
<!DOCTYPE html><\/code><\/div>\n
<html><\/code><\/div>\n
<head><\/code><\/div>\n
\u00a0 \u00a0 <title>Space Invaders - Matrix Style<\/title><\/code><\/div>\n
\u00a0 \u00a0 <link rel=\"stylesheet\" href=\"style.css\"><\/code><\/div>\n
\u00a0 \u00a0 <style><\/code><\/div>\n
\u00a0 \u00a0 \u00a0<\/code><\/div>\n
\u00a0 \u00a0 <\/style><\/code><\/div>\n
<\/head><\/code><\/div>\n
<body><\/code><\/div>\n
\u00a0 \u00a0 <div id=\"matrixRainContainer\"><\/div><\/code><\/div>\n
\u00a0 \u00a0 <h1 class=\"title\">Matr1x 1nvaders<\/h1><\/code><\/div>\n
\u00a0 \u00a0 <canvas id=\"gameCanvas\"><\/canvas><\/code><\/div>\n
\u00a0 \u00a0 <div id=\"overlay\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div id=\"message\"><\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div id=\"highScores\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h2>Top Players<\/h2><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <ul id=\"highScoreList\"><\/ul><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button id=\"playAgainButton\">Play Again<\/button><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <button id=\"restartButton\">Back to the Game<\/button><\/code><\/div>\n
\u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 <audio id=\"shootSound\" src=\"sounds\/bounce.wav\"><\/audio><\/code><\/div>\n
\u00a0 \u00a0 <audio id=\"explosionSound\" src=\"sounds\/brick.wav\"><\/audio><\/code><\/div>\n
\u00a0 \u00a0 <audio id=\"winSound\" src=\"sounds\/levelup.wav\"><\/audio><\/code><\/div>\n
\u00a0 \u00a0 <audio id=\"loseSound\" src=\"sounds\/gameover.wav\"><\/audio><\/code><\/div>\n
\u00a0 \u00a0 <audio id=\"levelUpSound\" src=\"sounds\/levelup.wav\"><\/audio><\/code><\/div>\n
\u00a0 \u00a0 <audio id=\"backgroundSound\" src=\"sounds\/background.mp3\"><\/audio><\/code><\/div>\n
\u00a0 \u00a0 <script src=\"matrix-effect.js\"><\/script><\/code><\/div>\n
\u00a0 \u00a0 <script src=\"game.js\"><\/script><\/code><\/div>\n
<\/body><\/code><\/div>\n
<\/html><\/code><\/div>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

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

\n
* {<\/code><\/div>\n
\u00a0 box-sizing: border-box;<\/code><\/div>\n
}<\/code><\/div>\n
:root {<\/code><\/div>\n
\u00a0 --matrix-green: #00ff00;<\/code><\/div>\n
\u00a0 --matrix-black: #000000;<\/code><\/div>\n
}<\/code><\/div>\n
body {<\/code><\/div>\n
\u00a0 font-family: monospace;<\/code><\/div>\n
\u00a0 background-color: var(--matrix-black);<\/code><\/div>\n
\u00a0 background-image: url(\"matrix-digital-rain.png\");<\/code><\/div>\n
\u00a0 background-size: cover;<\/code><\/div>\n
\u00a0 background-repeat: repeat;<\/code><\/div>\n
\u00a0 margin: 0;<\/code><\/div>\n
\u00a0 overflow: hidden;<\/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: center;<\/code><\/div>\n
\u00a0 min-height: 100vh;<\/code><\/div>\n
\u00a0 position: relative;<\/code><\/div>\n
\u00a0 overflow: hidden;<\/code><\/div>\n
}<\/code><\/div>\n
#matrixRainContainer {<\/code><\/div>\n
\u00a0 position: fixed;<\/code><\/div>\n
\u00a0 top: 0;<\/code><\/div>\n
\u00a0 left: 0;<\/code><\/div>\n
\u00a0 width: 100%;<\/code><\/div>\n
\u00a0 height: 100%;<\/code><\/div>\n
\u00a0 pointer-events: none;<\/code><\/div>\n
\u00a0 z-index: -1;<\/code><\/div>\n
\u00a0 color: var(--matrix-green);<\/code><\/div>\n
\u00a0 font-family: monospace;<\/code><\/div>\n
\u00a0 font-size: 1rem;<\/code><\/div>\n
\u00a0 line-height: 1.2;<\/code><\/div>\n
}<\/code><\/div>\n
.matrixChar {<\/code><\/div>\n
\u00a0 position: absolute;<\/code><\/div>\n
\u00a0 opacity: 0;<\/code><\/div>\n
\u00a0 animation: matrixRain 1s linear infinite;<\/code><\/div>\n
}<\/code><\/div>\n
@keyframes matrixRain {<\/code><\/div>\n
\u00a0 to {<\/code><\/div>\n
\u00a0 \u00a0 transform: translateY(100vh);<\/code><\/div>\n
\u00a0 \u00a0 opacity: 1;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
.title {<\/code><\/div>\n
\u00a0 color: var(--matrix-green);<\/code><\/div>\n
\u00a0 font-size: 2.5rem;<\/code><\/div>\n
\u00a0 padding: 1rem;<\/code><\/div>\n
\u00a0 text-align: center;<\/code><\/div>\n
\u00a0 margin-bottom: 1rem;<\/code><\/div>\n
\u00a0 background-color: rgba(0, 0, 0, 0.5);<\/code><\/div>\n
}<\/code><\/div>\n
#gameCanvas {<\/code><\/div>\n
\u00a0 background-color: transparent;<\/code><\/div>\n
\u00a0 border: 1px solid var(--matrix-green);<\/code><\/div>\n
}<\/code><\/div>\n
#overlay {<\/code><\/div>\n
\u00a0 position: absolute;<\/code><\/div>\n
\u00a0 top: 0;<\/code><\/div>\n
\u00a0 left: 0;<\/code><\/div>\n
\u00a0 width: 100%;<\/code><\/div>\n
\u00a0 height: 100%;<\/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-color: rgba(0, 0, 0, 0.8);<\/code><\/div>\n
\u00a0 color: var(--matrix-green);<\/code><\/div>\n
\u00a0 font-size: 1.2rem;<\/code><\/div>\n
\u00a0 text-align: center;<\/code><\/div>\n
}<\/code><\/div>\n
#overlay button {<\/code><\/div>\n
\u00a0 background-color: #000;<\/code><\/div>\n
\u00a0 color: var(--matrix-green);<\/code><\/div>\n
\u00a0 border: 1px solid var(--matrix-green);<\/code><\/div>\n
\u00a0 padding: 1rem;<\/code><\/div>\n
\u00a0 font-family: monospace;<\/code><\/div>\n
\u00a0 font-size: 1rem;<\/code><\/div>\n
\u00a0 cursor: pointer;<\/code><\/div>\n
}<\/code><\/div>\n
#highScores {<\/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: center;<\/code><\/div>\n
\u00a0 margin-top: 1rem;<\/code><\/div>\n
\u00a0 font-size: 1rem;<\/code><\/div>\n
}<\/code><\/div>\n
#highScores li {<\/code><\/div>\n
\u00a0 margin-bottom: 0.2rem;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n
<\/div>\n
Em seguida adiciona o script respons\u00e1vel pelo efeito matrix do background:<\/span><\/strong><\/span><\/div>\n
<\/div>\n
<\/div>\n
\n
\n
class MatrixRain {<\/code><\/div>\n
\u00a0 constructor(containerId, chars, numChars) {<\/code><\/div>\n
\u00a0 \u00a0 this.container = document.getElementById(containerId);<\/code><\/div>\n
\u00a0 \u00a0 this.chars = chars;<\/code><\/div>\n
\u00a0 \u00a0 this.numChars = numChars;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 create() {<\/code><\/div>\n
\u00a0 \u00a0 for (let i = 0; i < this.numChars; i++) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const charSpan = document.createElement(\"span\");<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 charSpan.className = \"matrixChar\";<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 charSpan.textContent = this.chars.charAt(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 Math.floor(Math.random() * this.chars.length)<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 charSpan.style.left = `${Math.random() * 100}vw`;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 charSpan.style.top = `${Math.random() * 100}vh - 100vh`;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 charSpan.style.animationDelay = `${Math.random() * 2}s`;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 charSpan.style.fontSize = `${0.8 + Math.random() * 0.6}rem`;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.container.appendChild(charSpan);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
const matrixRain = new MatrixRain(<\/code><\/div>\n
\u00a0 \"matrixRainContainer\",<\/code><\/div>\n
\u00a0 \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\",<\/code><\/div>\n
\u00a0 300<\/code><\/div>\n
);<\/code><\/div>\n
matrixRain.create();<\/code><\/div>\n<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n

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

 <\/p>\n

<\/div>\n
\n
class GameObject {<\/code><\/div>\n
\u00a0 constructor(x, y, width, height, color) {<\/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.color = color;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 draw(ctx) {<\/code><\/div>\n
\u00a0 \u00a0 ctx.fillStyle = this.color;<\/code><\/div>\n
\u00a0 \u00a0 ctx.fillRect(this.x, this.y, this.width, this.height);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
class MatrixTextObject extends GameObject {<\/code><\/div>\n
\u00a0 constructor(x, y, width, height, color, chars, fontStyle) {<\/code><\/div>\n
\u00a0 \u00a0 super(x, y, width, height, color);<\/code><\/div>\n
\u00a0 \u00a0 this.chars = chars;<\/code><\/div>\n
\u00a0 \u00a0 this.fontStyle = fontStyle;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 draw(ctx) {<\/code><\/div>\n
\u00a0 \u00a0 const charWidth = this.width \/ this.chars.length;<\/code><\/div>\n
\u00a0 \u00a0 const charHeight = this.height;<\/code><\/div>\n
\u00a0 \u00a0 ctx.font = `${charHeight}px ${this.fontStyle}`;<\/code><\/div>\n
\u00a0 \u00a0 ctx.textAlign = \"center\";<\/code><\/div>\n
\u00a0 \u00a0 this.chars.forEach((char, index) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ctx.fillStyle = this.color;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ctx.fillText(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 char,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.x + (index + 0.5) * charWidth,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.y + charHeight * 0.8<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
class Player extends MatrixTextObject {<\/code><\/div>\n
\u00a0 constructor(<\/code><\/div>\n
\u00a0 \u00a0 x,<\/code><\/div>\n
\u00a0 \u00a0 y,<\/code><\/div>\n
\u00a0 \u00a0 width,<\/code><\/div>\n
\u00a0 \u00a0 height,<\/code><\/div>\n
\u00a0 \u00a0 color,<\/code><\/div>\n
\u00a0 \u00a0 chars,<\/code><\/div>\n
\u00a0 \u00a0 fontStyle,<\/code><\/div>\n
\u00a0 \u00a0 speed,<\/code><\/div>\n
\u00a0 \u00a0 canvasWidth<\/code><\/div>\n
\u00a0 ) {<\/code><\/div>\n
\u00a0 \u00a0 super(x, y, width, height, color, chars, fontStyle);<\/code><\/div>\n
\u00a0 \u00a0 this.speed = speed;<\/code><\/div>\n
\u00a0 \u00a0 this.canvasWidth = canvasWidth;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 moveLeft() {<\/code><\/div>\n
\u00a0 \u00a0 if (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 moveRight() {<\/code><\/div>\n
\u00a0 \u00a0 if (this.x < this.canvasWidth - this.width) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.x += this.speed;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
class Bullet extends MatrixTextObject {<\/code><\/div>\n
\u00a0 constructor(x, y, width, height, color, char, fontStyle, speed) {<\/code><\/div>\n
\u00a0 \u00a0 super(x, y, width, height, color, [char], fontStyle);<\/code><\/div>\n
\u00a0 \u00a0 this.speed = speed;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 update() {<\/code><\/div>\n
\u00a0 \u00a0 this.y -= this.speed;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
class Alien extends MatrixTextObject {<\/code><\/div>\n
\u00a0 constructor(x, y, width, height, color, chars, fontStyle, speedX) {<\/code><\/div>\n
\u00a0 \u00a0 super(x, y, width, height, color, chars, fontStyle);<\/code><\/div>\n
\u00a0 \u00a0 this.speedX = speedX;<\/code><\/div>\n
\u00a0 \u00a0 this.alive = true;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 move(direction, speedY) {<\/code><\/div>\n
\u00a0 \u00a0 this.x += this.speedX * direction;<\/code><\/div>\n
\u00a0 \u00a0 this.y += speedY;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
class Game {<\/code><\/div>\n
\u00a0 constructor(config) {<\/code><\/div>\n
\u00a0 \u00a0 this.canvas = document.getElementById(\"gameCanvas\");<\/code><\/div>\n
\u00a0 \u00a0 this.ctx = this.canvas.getContext(\"2d\");<\/code><\/div>\n
\u00a0 \u00a0 this.overlay = document.getElementById(\"overlay\");<\/code><\/div>\n
\u00a0 \u00a0 this.messageDisplay = document.getElementById(\"message\");<\/code><\/div>\n
\u00a0 \u00a0 this.restartButton = document.getElementById(\"restartButton\");<\/code><\/div>\n
\u00a0 \u00a0 this.playAgainButton = document.getElementById(\"playAgainButton\");<\/code><\/div>\n
\u00a0 \u00a0 this.highScoresDiv = document.getElementById(\"highScores\");<\/code><\/div>\n
\u00a0 \u00a0 this.highScoreList = document.getElementById(\"highScoreList\");<\/code><\/div>\n
\u00a0 \u00a0 this.shootSound = document.getElementById(\"shootSound\");<\/code><\/div>\n
\u00a0 \u00a0 this.explosionSound = document.getElementById(\"explosionSound\");<\/code><\/div>\n
\u00a0 \u00a0 this.winSound = document.getElementById(\"winSound\");<\/code><\/div>\n
\u00a0 \u00a0 this.loseSound = document.getElementById(\"loseSound\");<\/code><\/div>\n
\u00a0 \u00a0 this.levelUpSound = document.getElementById(\"levelUpSound\");<\/code><\/div>\n
\u00a0 \u00a0 this.backgroundSound = document.getElementById(\"backgroundSound\");<\/code><\/div>\n
\u00a0 \u00a0 this.config = { ...config }; \/\/ Create a copy to avoid direct modification<\/code><\/div>\n
\u00a0 \u00a0 this.canvas.width = this.config.canvasWidth;<\/code><\/div>\n
\u00a0 \u00a0 this.canvas.height = this.config.canvasHeight;<\/code><\/div>\n
\u00a0 \u00a0 this.alienDirection = 1;<\/code><\/div>\n
\u00a0 \u00a0 this.score = 0;<\/code><\/div>\n
\u00a0 \u00a0 this.gameActive = true;<\/code><\/div>\n
\u00a0 \u00a0 this.level = 1;<\/code><\/div>\n
\u00a0 \u00a0 this.player = this.createPlayer();<\/code><\/div>\n
\u00a0 \u00a0 this.bullets = [];<\/code><\/div>\n
\u00a0 \u00a0 this.aliens = [];<\/code><\/div>\n
\u00a0 \u00a0 this.highScores = this.loadHighScores();<\/code><\/div>\n
\u00a0 \u00a0 this.keys = {};<\/code><\/div>\n
\u00a0 \u00a0 this.shootSound.volume = 0.3;<\/code><\/div>\n
\u00a0 \u00a0 this.explosionSound.volume = 0.2;<\/code><\/div>\n
\u00a0 \u00a0 this.winSound.volume = 0.3;<\/code><\/div>\n
\u00a0 \u00a0 this.loseSound.volume = 0.3;<\/code><\/div>\n
\u00a0 \u00a0 this.levelUpSound.volume = 0.3;<\/code><\/div>\n
\u00a0 \u00a0 this.backgroundSound.volume = 0.3;<\/code><\/div>\n
\u00a0 \u00a0 this.backgroundSound.play();<\/code><\/div>\n
\u00a0 \u00a0 this.setupEventListeners();<\/code><\/div>\n
\u00a0 \u00a0 this.resetLevel();<\/code><\/div>\n
\u00a0 \u00a0 this.update();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 createPlayer() {<\/code><\/div>\n
\u00a0 \u00a0 return new Player(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.config.canvasWidth \/ 2 - 20,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.config.canvasHeight - 30,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 40,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 20,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.config.matrixColor,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.config.playerChars,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.config.fontStyle,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.config.playerSpeed,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.config.canvasWidth<\/code><\/div>\n
\u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 createAlien(x, y) {<\/code><\/div>\n
\u00a0 \u00a0 return new Alien(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 x,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 y,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 30,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 20,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.config.matrixColor,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.config.alienChars,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.config.fontStyle,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.config.alienSpeedX<\/code><\/div>\n
\u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 createAliens() {<\/code><\/div>\n
\u00a0 \u00a0 this.aliens.length = 0;<\/code><\/div>\n
\u00a0 \u00a0 const rows =<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.config.initialAlienRows + Math.floor((this.level - 1) * 0.5);<\/code><\/div>\n
\u00a0 \u00a0 const cols = this.config.aliensPerRow + Math.floor((this.level - 1) * 0.2);<\/code><\/div>\n
\u00a0 \u00a0 for (let row = 0; row < rows; row++) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 for (let col = 0; col < cols; col++) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.aliens.push(this.createAlien(30 + col * 50, 30 + row * 40));<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 this.alienDirection = 1;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 resetLevel() {<\/code><\/div>\n
\u00a0 \u00a0 this.bullets = [];<\/code><\/div>\n
\u00a0 \u00a0 this.createAliens();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 loadHighScores() {<\/code><\/div>\n
\u00a0 \u00a0 const scoresString = localStorage.getItem(this.config.highScoreStorageKey);<\/code><\/div>\n
\u00a0 \u00a0 return scoresString ? JSON.parse(scoresString) : [];<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 saveHighScores() {<\/code><\/div>\n
\u00a0 \u00a0 this.highScores.sort((a, b) => b - a);<\/code><\/div>\n
\u00a0 \u00a0 this.highScores = this.highScores.slice(0, this.config.maxHighScores);<\/code><\/div>\n
\u00a0 \u00a0 localStorage.setItem(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.config.highScoreStorageKey,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 JSON.stringify(this.highScores)<\/code><\/div>\n
\u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 getTopFiveHighScores() {<\/code><\/div>\n
\u00a0 \u00a0 return this.highScores.slice(0, 5);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 displayHighScores() {<\/code><\/div>\n
\u00a0 \u00a0 this.highScoreList.innerHTML = \"\";<\/code><\/div>\n
\u00a0 \u00a0 const topFiveScores = this.getTopFiveHighScores();<\/code><\/div>\n
\u00a0 \u00a0 topFiveScores.forEach((score, index) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const listItem = document.createElement(\"li\");<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 listItem.textContent = `${index + 1}. ${score}`;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.highScoreList.appendChild(listItem);<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 this.messageDisplay.style.display = \"none\";<\/code><\/div>\n
\u00a0 \u00a0 this.highScoresDiv.style.display = \"flex\";<\/code><\/div>\n
\u00a0 \u00a0 this.restartButton.style.display = \"none\";<\/code><\/div>\n
\u00a0 \u00a0 this.playAgainButton.style.display = \"block\";<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 getRank() {<\/code><\/div>\n
\u00a0 \u00a0 for (const threshold in this.config.rankThresholds) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (this.score < parseInt(threshold)) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 return this.config.rankThresholds[<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 threshold === \"Infinity\"<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ? Object.keys(this.config.rankThresholds)[<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Object.keys(this.config.rankThresholds).length - 2<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ]<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 : threshold<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 ];<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 return this.config.rankThresholds.Infinity;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 createBullet() {<\/code><\/div>\n
\u00a0 \u00a0 if (this.gameActive) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.bullets.push(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 new Bullet(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.player.x + this.player.width \/ 2 - 5,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.player.y - 10,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 10,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 15,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.config.matrixColor,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.config.bulletChar,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.config.fontStyle,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.config.bulletSpeed<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 )<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.playSound(this.shootSound);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 showMessage(message, sound) {<\/code><\/div>\n
\u00a0 \u00a0 this.gameActive = false;<\/code><\/div>\n
\u00a0 \u00a0 this.messageDisplay.textContent = message;<\/code><\/div>\n
\u00a0 \u00a0 this.messageDisplay.style.display = \"block\";<\/code><\/div>\n
\u00a0 \u00a0 this.highScoresDiv.style.display = \"none\";<\/code><\/div>\n
\u00a0 \u00a0 this.restartButton.style.display = \"block\";<\/code><\/div>\n
\u00a0 \u00a0 this.playAgainButton.style.display = \"none\";<\/code><\/div>\n
\u00a0 \u00a0 this.overlay.style.display = \"flex\";<\/code><\/div>\n
\u00a0 \u00a0 if (sound) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.playSound(sound);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 nextLevel() {<\/code><\/div>\n
\u00a0 \u00a0 this.level++;<\/code><\/div>\n
\u00a0 \u00a0 if (this.level > this.config.maxLevels) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.gameActive = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.highScores.push(this.score);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.saveHighScores();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.messageDisplay.textContent = this.config.gameWonMessage;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.displayHighScores();<\/code><\/div>\n
\u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.showMessage(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 `${this.config.levelText} ${this.level}`,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.levelUpSound<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 setTimeout(() => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.overlay.style.display = \"none\";<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.gameActive = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.resetLevel();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }, 2000);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 resetGame() {<\/code><\/div>\n
\u00a0 \u00a0 this.score = 0;<\/code><\/div>\n
\u00a0 \u00a0 this.level = 1;<\/code><\/div>\n
\u00a0 \u00a0 this.resetLevel();<\/code><\/div>\n
\u00a0 \u00a0 this.gameActive = true;<\/code><\/div>\n
\u00a0 \u00a0 this.overlay.style.display = \"none\";<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 playSound(audio) {<\/code><\/div>\n
\u00a0 \u00a0 if (audio) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 audio.currentTime = 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 audio.play();<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 setupEventListeners() {<\/code><\/div>\n
\u00a0 \u00a0 document.addEventListener(\"keydown\", (e) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.keys[e.key] = true;<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 document.addEventListener(\"keyup\", (e) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.keys[e.key] = false;<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 this.restartButton.addEventListener(\"click\", () => this.resetGame());<\/code><\/div>\n
\u00a0 \u00a0 this.playAgainButton.addEventListener(\"click\", () => this.resetGame());<\/code><\/div>\n
\u00a0 \u00a0 this.restartButton.textContent = this.config.restartButtonText;<\/code><\/div>\n
\u00a0 \u00a0 this.playAgainButton.textContent = this.config.playAgainButtonText;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 update() {<\/code><\/div>\n
\u00a0 \u00a0 if (!this.gameActive) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 requestAnimationFrame(() => this.update());<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 return;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Player Movement<\/code><\/div>\n
\u00a0 \u00a0 if (this.keys[\"ArrowLeft\"]) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.player.moveLeft();<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 if (this.keys[\"ArrowRight\"]) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.player.moveRight();<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 if (this.keys[\" \"] || this.keys[\"Spacebar\"]) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.createBullet();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.keys[\" \"] = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.keys[\"Spacebar\"] = false;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Bullets Movement and Removal<\/code><\/div>\n
\u00a0 \u00a0 this.bullets.forEach((bullet) => bullet.update());<\/code><\/div>\n
\u00a0 \u00a0 this.bullets = this.bullets.filter((bullet) => bullet.y > 0);<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Aliens Movement<\/code><\/div>\n
\u00a0 \u00a0 let moveDown = false;<\/code><\/div>\n
\u00a0 \u00a0 this.aliens.forEach((alien) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (alien.alive) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 alien.move(this.alienDirection * this.level, 0);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 if (alien.x + alien.width > this.config.canvasWidth || alien.x < 0) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.alienDirection *= -1;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 moveDown = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 if (moveDown) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.aliens.forEach((alien) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 if (alien.alive) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 alien.move(0, this.config.alienSpeedY);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Collision Detection<\/code><\/div>\n
\u00a0 \u00a0 this.bullets.forEach((bullet) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.aliens.forEach((alien) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 if (<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 alien.alive &&<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 bullet.x < alien.x + alien.width &&<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 bullet.x + bullet.width > alien.x &&<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 bullet.y < alien.y + alien.height &&<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 bullet.y + bullet.height > alien.y<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 ) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 alien.alive = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 bullet.y = -bullet.height;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.score += 10 * this.level;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.playSound(this.explosionSound);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 this.aliens = this.aliens.filter((alien) => alien.alive);<\/code><\/div>\n
\u00a0 \u00a0 this.bullets = this.bullets.filter((bullet) => bullet.y > 0);<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Check for Level Completion<\/code><\/div>\n
\u00a0 \u00a0 if (this.aliens.length === 0) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.gameActive = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 setTimeout(() => this.nextLevel(), 1000);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Check for Game Over<\/code><\/div>\n
\u00a0 \u00a0 if (this.aliens.some((alien) => alien.y + alien.height > this.player.y)) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.gameActive = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.highScores.push(this.score);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.saveHighScores();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.showMessage(this.config.gameOverMessage, this.loseSound);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.displayHighScores();<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 this.draw();<\/code><\/div>\n
\u00a0 \u00a0 requestAnimationFrame(() => this.update());<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 draw() {<\/code><\/div>\n
\u00a0 \u00a0 this.ctx.fillStyle = this.config.backgroundColor;<\/code><\/div>\n
\u00a0 \u00a0 this.ctx.fillRect(0, 0, this.config.canvasWidth, this.config.canvasHeight);<\/code><\/div>\n
\u00a0 \u00a0 this.player.draw(this.ctx);<\/code><\/div>\n
\u00a0 \u00a0 this.bullets.forEach((bullet) => bullet.draw(this.ctx));<\/code><\/div>\n
\u00a0 \u00a0 this.aliens.forEach((alien) => alien.draw(this.ctx));<\/code><\/div>\n
\u00a0 \u00a0 this.ctx.fillStyle = this.config.matrixColor;<\/code><\/div>\n
\u00a0 \u00a0 this.ctx.font = \"1rem \" + this.config.fontStyle;<\/code><\/div>\n
\u00a0 \u00a0 this.ctx.textAlign = \"left\";<\/code><\/div>\n
\u00a0 \u00a0 this.ctx.fillText(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 `${this.config.scoreText}: ${this.score} | ${this.config.levelText}: ${<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.level<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 } | ${this.config.rankText}: ${this.getRank()}`,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 10,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 20<\/code><\/div>\n
\u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 this.ctx.fillText(``, 10, 40);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
\/\/ Game Configuration<\/code><\/div>\n
const gameConfig = {<\/code><\/div>\n
\u00a0 canvasWidth: 480,<\/code><\/div>\n
\u00a0 canvasHeight: 320,<\/code><\/div>\n
\u00a0 playerSpeed: 5,<\/code><\/div>\n
\u00a0 bulletSpeed: 10,<\/code><\/div>\n
\u00a0 initialAlienRows: 3,<\/code><\/div>\n
\u00a0 aliensPerRow: 8,<\/code><\/div>\n
\u00a0 alienSpeedX: 1,<\/code><\/div>\n
\u00a0 alienSpeedY: 20,<\/code><\/div>\n
\u00a0 maxLevels: 5,<\/code><\/div>\n
\u00a0 matrixColor: \"#00ff00\", \/\/ Matrix Green<\/code><\/div>\n
\u00a0 backgroundColor: \"#000\",<\/code><\/div>\n
\u00a0 bulletChar: \"0\",<\/code><\/div>\n
\u00a0 playerChars: [\"01\", \"11\", \"11\", \"10\"],<\/code><\/div>\n
\u00a0 alienChars: [\"0\", \"1\", \"0\"],<\/code><\/div>\n
\u00a0 fontStyle: \"monospace\",<\/code><\/div>\n
\u00a0 scoreText: \"SCORE\",<\/code><\/div>\n
\u00a0 levelText: \"LEVEL\",<\/code><\/div>\n
\u00a0 rankText: \"RANK\",<\/code><\/div>\n
\u00a0 gameOverMessage: \"Game Over!\",<\/code><\/div>\n
\u00a0 gameWonMessage: \"You won the game!\",<\/code><\/div>\n
\u00a0 restartButtonText: \"Back to the Game\",<\/code><\/div>\n
\u00a0 playAgainButtonText: \"Play Again\",<\/code><\/div>\n
\u00a0 highScoresTitle: \"Top Players\",<\/code><\/div>\n
\u00a0 rankThresholds: {<\/code><\/div>\n
\u00a0 \u00a0 500: \"Recruit\",<\/code><\/div>\n
\u00a0 \u00a0 1500: \"Soldier\",<\/code><\/div>\n
\u00a0 \u00a0 3000: \"Veteran\",<\/code><\/div>\n
\u00a0 \u00a0 5000: \"Elite\",<\/code><\/div>\n
\u00a0 \u00a0 Infinity: \"Legend\",<\/code><\/div>\n
\u00a0 },<\/code><\/div>\n
\u00a0 highScoreStorageKey: \"spaceInvadersHighScores\",<\/code><\/div>\n
\u00a0 maxHighScores: 10,<\/code><\/div>\n
};<\/code><\/div>\n
const game = new Game(gameConfig);<\/code><\/div>\n<\/div>\n

 <\/p>\n

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

 <\/p>\n