4 - Criando um Jogo com Python e HTML

[Cr4cko 1.159]

Uma foto do jogo feito com Python/Flask e HTML

Bom, agora o bixo pega! Vamos criar uma parada mais avançada. Na aula anterior, criamos um joguinho bem besta. Agora vamos começar a brincar de verdade. Vamos construir algo mais fuck monster foda. Que tal um Joguinho de tiro? Fui pegando umas imagens da internet para ficar mais interessante o jogo, mas o ideal e voce construir algo original.

 

Vamos trabalhar com Flask. Segue uma breve explicação do mesmo, se quiser informações a mais, pesquise e estude. E só digitar no google :)

Flask is a microframework for Python based on Werkzeug, Jinja 2 and good intentions.

 

Flask é uma pequena e poderosa web framework para Python. É fácil de aprender e simples de usar, permitindo-te construir a tua aplicação web, num curto período de tempo.

 

PRIMEIROS PASSOS

1 - Primeiramente, certifique-se de estar com python instalado em seu computador.

2 - Vamos instalar o Flask:

 

Windows (Abrir CMD como administrador)

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Linux/OSx

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

3 - Agora que voce instalou o Flask direitinho em seu computador, crie uma pasta para criarmos o jogo. Ela vai ter que ter a seguinte arquitetura de arquivos.

No meu caso, eu tenho uma pasta chamada webcheats-python e dentro dela esta organizado todas essas pastas e arquivos. Nao crie o app.pyc, ele gera sozinho. Pode ignorar esse arquivo.

 

5 - Agora antes de criar um jogo, precisamos entender qual é a proposta do jogo e quais serão as regras. Como eu estou criando um jogo aqui, eu vou dar as regras. Mas o processo sera o mesmo nos proximos jogos que vocês forem criar. Veja abaixo:

• Um jogo de tiro onde um jogador (voce) vai trocar tiros com um Bot.
  
• O bot tera movimentos aleatorios.
  
• O jogador vai controlar seu boneco (bonequinho embaixo) com as teclas W,S,A,D e o ESPAÇO para atirar.
  
• O jogador e o bot terao um ESCUDO. Entao quando estiverem atras do escudo, estarao protegidos dos tiros.
  
• Para acertar o tiro, e preciso sair do escudo e o adversario estar fora do escudo tambem. Alem disso, e preciso os 2 estarem do mesmo lado, caso contrario o tiro não pega.
  

6 - Bom vamos então começar a criar a estrutura HTML. Jogue dentro do seu templates/game.html esse código abaixo. Não vou explicar o que cada div faz, ja existe alguns tutoriais aqui na Info Zone explicando sobre HTML CSS e Javascript. Vou apenas explicar o algoritmo que fiz.

 

[HIDE-THANKS]

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

[/HIDE-THANKS]

 

Beleza. Nada muito complexo no HTML acima. Criei uma estrutura simples de HTML (html, head, body) e dentro do body eu adicionei 2 divs: arena e placar. Arena tem o escudo e o personagem do Player e do Bot. No final eu importo o jQuery que vamos trabalhar no arquivo static/js/game.rules.js e um script gravando na variavel SHOT_AUDIO a rota do audio de TIRO que baixei. Isso porque essas variáveis são do FLASK ({{url_for('static', filename='js/game.rules.js')}}), e só vão funcionar no html.

 

7 - Agora vamos adicionar um CSS bonitinho. Eu fiz algo bem porco, nada demais. Podem editar a vontade. No fundo, eu adicionei uma imagem de Mapa que catei na internet, e o unico arquivo que nao fiz download e joguei o URL mesmo. Jogue o codigo abaixo dentro do seu arquivo static/css/app.css:

 

[HIDE-THANKS]

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

[/HIDE-THANKS]

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

8 - Bom, agora vamos ao Javascript. Agora vou ser bem detalhado, vai ser um pouco chato mas tentarei resumir o máximo possível. Não é difícil entender o código. Se você possui alguma dificuldade com sintaxe ou algumas funções, e só dar uma pesquisada. Nenhum programador sabe tudo, a maior ferramenta de todos nos é o Google. Abaixo o codigo do Javascript bem comentado e explicado, jogue tudo dentro do seu arquivo static/js/game.rules.js:

 

[HIDE-THANKS]

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

[/HIDE-THANKS]

 

Eita.. bom galera a pior parte passou. Foi mais chato eu organizar todo meu codigo e comentar do que ler e entender isso kkkkkkkkk. Bom, nao fique triste se voce nao entender tudo o que ta rolando ate agora, o importante e voce entender os passos que estamos fazendo e entender um pouco a LOGICA que estou criando. Programar nao e dificil, dificil e saber identificar os mateirias e as decisoes que precisaremos tomar para alcancar certo objetivo. MAS ENFIM, vamos continuar.

 

9 - Agora com HTML, CSS e o Javascript prontos, esta faltando quem? FLASK! Agora e bem simples, dentro do seu app.py adicione esse codigo:

 

[HIDE-THANKS]

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

[/HIDE-THANKS]

 

Simples. Certo? Não precisa entender a fundo o que e esse pequeno trecho de codigo. Como estamos usando um framework (Flask), ele possui diversas complexidades e funcoes por tras. Isso e um framework, assumir todas as complexidades por tras e deixar bem facil do usuario entender. No codigo acima, chamamos a classe Flask, e criamos uma rota "/" retornando o template game.html que criamos. O metodo render_template observa a pasta templates. Entao nosso game.html precisa estar la. Se voce mudar o @app.route('/') para @app.route('/game') voce muda a rota do site. Ou seja, quando voce iniciar voce precisara acessar:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

.

 

10 - Agora so falta as imagens e o som de tiro para estar 100% antes de iniciar o jogo. Eu vou deixar no final do post o link de download de todas as imagens e arquivos. Coloque eles nas pastas de acordo com a estrutura que mostro na imagem la no passo 3 e logo em seguida vamos iniciar o jogo com esse comando digitado no TERMINAL/CMD:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Pronto! Servidor ligado, agora acesse no teu navegador: http://localhost:5000/

Teclados: A,D para esquerda/direita e ESPACO para atirar.

DOWNLOAD

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

[Arkanun1000 4.545]

Oi,

 

Muito bacana man!!!:cool:

 

Quando as minas permissões pra editar post voltar, vou adicionar seus tutos a quick list que to fazendo!

 

abçs!!!!

[Cr4cko 1.159]

Esse ai deu trabalho kkkkkkk ate dormi de ontem pra hj fazendo...

Demoro mano valeu <3