Neste tutorial, vamos aprender a criar jogos com javascript do zero. Para isso, vamos começar com um dos aspectos mais importantes de qualquer jogo – a movimentação dos personagens.
Para começar, você vai precisar de um editor de texto, como o Visual Studio Code, e um navegador web, como o Google Chrome. Certifique-se de ter o Node.js instalado em sua máquina, pois vamos utilizar o npm para instalar algumas bibliotecas.
Primeiro passo é criar um arquivo HTML básico, como por exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Jogo</title>
</head>
<body>
<script src="jogo.js"></script>
</body>
</html>Agora, vamos criar um arquivo chamado jogo.js, onde iremos escrever o código javascript para o nosso jogo. Vamos começar criando o canvas onde o jogo será renderizado e configurando o contexto 2D:
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);Agora, vamos criar um objeto jogador que será responsável por controlar a movimentação do personagem. Vamos definir a posição inicial e a velocidade do jogador:
const jogador = {
x: canvas.width / 2,
y: canvas.height / 2,
velocidade: 5
};Agora, vamos adicionar um evento de teclado para controlar o movimento do jogador. Vamos adicionar um listener para os eventos de tecla pressionada:
document.addEventListener('keydown', function(event) {
switch(event.key) {
case 'ArrowUp':
jogador.y -= jogador.velocidade;
break;
case 'ArrowDown':
jogador.y += jogador.velocidade;
break;
case 'ArrowLeft':
jogador.x -= jogador.velocidade;
break;
case 'ArrowRight':
jogador.x += jogador.velocidade;
break;
}
});Para renderizar o jogador na tela, vamos criar uma função de atualização que será chamada a cada frame do jogo:
function atualizar() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(jogador.x, jogador.y, 50, 50);
}
function loop() {
atualizar();
requestAnimationFrame(loop);
}
loop();Agora, se você abrir o arquivo HTML em seu navegador, você verá um retângulo que pode ser movimentado com as teclas de seta.
Este é apenas o começo da criação de jogos com javascript. A movimentação dos personagens é um dos aspectos mais importantes de qualquer jogo e é fundamental para tornar a experiência do jogador mais envolvente. A partir daqui, você pode adicionar mais personagens, obstáculos, efeitos visuais e sonoros para criar um jogo completo e divertido.
Espero que este tutorial tenha sido útil e que você se sinta inspirado para explorar mais sobre a criação de jogos com javascript. Divirta-se e boa sorte na criação do seu próprio jogo!
Código do video: https://github.com/Iazzetta/2d-js-game
🔥 Programe tudo o que você quiser: https://hotm.art/87IDG7m
🔥 Cupom 10% de desconto: PPY10
primeira execução do código depois de 22mn, complicado assim.
Muito bom. Vídeo legal!
Cara faz um curso de javascript do zero a maestria
Brabo demais, muito bom!
voce acha melhor fazer o jogo no canvas ou direto do html?
cara, simplesmente sensacional esse vídeo, quero programar em javascript e amei ver mesmo sem entender nd kkkkkkkkkk, tenho no máximo intermediário em js, entendi poucas coisas no vídeo como this, funções e loops, mas foi de grande utilidade ver vc resolvendo os erros q apareciam e quebrando cabeça com eles (claro q mt disso deve ser pq vc não programa em js principalmente), mas é muito legal ver q até mesmo quem tem mais experiência em programar ainda passa por maus bocados com erros, até pq programar é resolver erros o tempo inteiro. Agradeço demais pelo vídeo, pois me motivou a continuar aprendendo cada vez mais, por favor traga mais como esse.
olha essa intro 🥵
Fala amigo tudo bem ? Tenho 17 anos irei fazer 18 to pensando em comecar em python. E tem alguma dica sobre como estudar ou cursos cara?
Mano, pfv faz uma serie criando um joguinho 2d simples, vai ser incrível acompanhar isso
fala irmao, to usando seus videos para estudos, muito bom parabens.
tem com fazer um video falando de angular e mostrando na pratica?
Eu sou CRIANÇA
hahaha top demais, ótimo vídeo, a ideia de criar um jogo em JS, HTML e CSS puro foi muito boa!!
Parabéns pelo conteúdo!!!
Oooooo muito tri o vídeo mano, teu jeito de explicar ajuda muito! O vídeo de JavaScript poderia sair hein ASUHAUSHAUSH!
Cara, vc sabe me dizer alguma faculdade ead que vc recomenda ? Só tenho disponibilidade para fazer EAD infelizmente, gostaria de saber a opinião de alguém que ja conhece do ramo, ia me ajudar muito!
BOAAAAA EU IMPLOREI POR VÍDEOS DE JAVASCRIPT KKKKKK
Mano, com a sua ideia, eu tive a ideia de fazer algo relacionado a aquecimento de manuseio do mouse e mira, aqueles joguinhos de treino de mira de FPS. Valeuzao
continuacao
hmmm agora só criar uma criatura pra atacar o player
Rapaz será que você poderia nos ensinar a fazer plugins para o RPG maker mz? A linguagem é Java script.