Ir para conteúdo
Faça parte da equipe! (2024) ×
Conheça nossa Beta Zone! Novas áreas a caminho! ×

  • Quem está por aqui   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.

4 - Criando um Jogo com Python e HTML

Cr4cko

Por ,
em Python

 Compartilhar

Posts Recomendados

  • Velha Guarda Ex-Staffer
Dedicado

Cr4cko 1.159

Postado
  • Velha Guarda Ex-Staffer
Postado

GecUruv.jpg?1

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.png

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.

 

Linux/OSx

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

mj3lgMH.png

 

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.

N3Gys5z.png?1

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.

[/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.

[/HIDE-THANKS]

 

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

 

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.

 

[/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.

[/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.
.

 

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.

8MmXELb.png

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.

  • Curtir 9

Quer aprender a programar Python?

https://youtube.com/@ProgramadorPython

ﾠﾠMural de Coleçõesﾠﾠ

Clique aqui e adquira suas medalhas
Link para o comentário
Compartilhar em outros sites
  • Velha Guarda Ex-Staffer
Colaborador

Arkanun1000 4.544

Postado
  • Velha Guarda Ex-Staffer
Postado

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!!!!

  • Curtir 1

qRXaV1L.png

ﾠﾠMural de Coleçõesﾠﾠ

Clique aqui e adquira suas medalhas
Link para o comentário
Compartilhar em outros sites
  • Velha Guarda Ex-Staffer
Dedicado

Cr4cko 1.159

Postado
  • Autor
  • Velha Guarda Ex-Staffer
Postado

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

Demoro mano valeu <3

  • Curtir 3

Quer aprender a programar Python?

https://youtube.com/@ProgramadorPython

ﾠﾠMural de Coleçõesﾠﾠ

Clique aqui e adquira suas medalhas
Link para o comentário
Compartilhar em outros sites
Este tópico está impedido de receber novos posts.
 Compartilhar
Ir para a lista de tópicos
×
×
  • Criar Novo...

Informação Importante

Nós fazemos uso de cookies no seu dispositivo para ajudar a tornar este site melhor. Você pode ajustar suas configurações de cookies , caso contrário, vamos supor que você está bem para continuar.

 Accept Cookies  Reject Cookies