Meu Primeiro Jogo em JavaScript: Criando um Jogo Simples
O Primeiro Jogo em JavaScript é um projeto básico onde você controla uma bolinha que se move pela tela usando as setas do teclado. Esse projeto trabalha conceitos de movimentação de sprites, controle de teclado e renderização de elementos na tela. Sua criação em JavaScript usando a biblioteca p5.js é uma excelente forma de aprender sobre desenvolvimento de jogos, lógica de programação e animações interativas!
Passo 1: Configurando o ambiente
Antes de começarmos a programar, certifique-se de ter um ambiente de desenvolvimento configurado:
Um editor de código (VS Code)
- Um navegador (Google Chrome)
A biblioteca p5.js
Passo 2: Criando a Estrutura Básica do Jogo
Vamos começar criando a estrutura básica do jogo. O código abaixo configura a tela e cria a bolinha que será controlada pelo jogador.
var bola;
function setup() {
createCanvas(400, 400);
// Cria a bolinha na posição (200, 200) com tamanho 20x20
bola = createSprite(200, 200, 20, 20);
}
Passo 3: Movimentando a Bolinha
Agora, vamos adicionar a movimentação da bolinha usando as setas do teclado. O código abaixo permite que o jogador mova a bolinha para cima, baixo, esquerda e direita.
function draw() {
background("black");
// Movimentação para a direita
if (keyDown(RIGHT_ARROW)) {
bola.x = bola.x + 3;
}
// Movimentação para a esquerda
if (keyDown(LEFT_ARROW)) {
bola.x = bola.x - 3;
}
// Movimentação para cima
if (keyDown(UP_ARROW)) {
bola.y = bola.y - 3;
}
// Movimentação para baixo
if (keyDown(DOWN_ARROW)) {
bola.y = bola.y + 3;
}
// Desenha os sprites na tela
drawSprites();
}
RESULTADO
var bola;
function setup() {
createCanvas(400, 400);
// Cria a bolinha na posição (200, 200) com tamanho 20x20
bola = createSprite(200, 200, 20, 20);
}
function draw() {
background("black");
// Movimentação para a direita
if (keyDown(RIGHT_ARROW)) {
bola.x = bola.x + 3;
}
// Movimentação para a esquerda
if (keyDown(LEFT_ARROW)) {
bola.x = bola.x - 3;
}
// Movimentação para cima
if (keyDown(UP_ARROW)) {
bola.y = bola.y - 3;
}
// Movimentação para baixo
if (keyDown(DOWN_ARROW)) {
bola.y = bola.y + 3;
}
// Desenha os sprites na tela
drawSprites();
}
