Criando um Web Game #1

por Fogomax Sáb 12 Out 2013, 11:34

Vamos começar a desenvolver um jogo que pode ser jogado a partir do navegador, sem a necessidade de plugins (Flash ou Unity, por exemplo).

Antes de começar, estude HTML.

Utilizaremos as linguagens:
HTML
CSS
PHP (SQL também)
JavaScript
Quem sabe essas linguagens terá facilidade para aprender. Caso você fique com dúvida durante os tutoriais, é só pesquisar sobre o assunto, ou me perguntar que eu respondo.
Faça o download do seguinte programa:
Wamp Server - http://www.wampserver.com/en/

Primeiro, planeje como será o jogo. Vou fazer um jogo chamado "Drago e os Cookies".
Desenhe o modelo do jogo, o meu será assim:
Criando um Web Game #1 BZZwwnh

"Título" será onde vou escrever o nome do jogo.
A parte verde será o menu.
A parte laranja será o corpo do jogo, onde terá as funções.
A parte azul será o rodapé, onde terá as informações do jogo, como nome, criador, empresa, etc.
Agora, a primeira coisa a fazer é o HTML e o CSS, para realmente "desenhar" o site.
Abra o bloco de notas, ou qualquer outro editor de texto (eu uso o Notepad++) para começarmos.

Código:: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Drago e os Cookies</title> </head> <body> </body> </html>

O código começará assim. Coloque o nome do seu jogo entre as tags "<title>" e "</title>".
Vamos criar os elementos.

Código:: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Drago e os Cookies</title> </head> <body> <div id="logotipo"></div> <div id="corpo"> <div id="menu"> </div> <div id="cjogo"> </div> </div> <div id="rodape"></div> </body> </html>

Eu coloquei "divs" no código. O que elas são?
Por uma definição simples, elas são responsáveis pela formatação e pela posição dos elementos na página.
Porém, elas precisam de alterações por CSS, senão não serão nada.
Salve o arquivo como "jogo.php".
Até o momento, você deve ter tentado rodar o jogo, mas não deve ter conseguido pois a extensão ".php", diferente do ".html", precisa ser rodada de uma maneira diferente.
Instale o Wamp Server e abra ele. Clique com o botão esquerdo e aparecerá esse menu:
Criando um Web Game #1 InstalandoXdebug02

Criando um Web Game #1 InstalandoXdebug02

Clique em "Start all services" e espere ele ficar verde.
Depois disso, clique em "www directory" para abrir a pasta.
Crie uma pasta com o nome do seu jogo, ou o que você quiser. Vou chama-la de "drago".
Agora coloque o "jogo.php" dentro dessa pasta.
Vá no seu navegador e digite: "localhost/drago". Substitua "drago" pelo nome da sua pasta. Renomeie o nome do arquivo para "index.php".
O arquivo deve ter rodado, mas não aparece nada (se o título da página mudar para o nome que você colocou entre as tags "<title>", funcionou).
Temos que editar o CSS, mas isso vou deixar para a outra aula, o tópico já está grande demais.

Espero que consigam acompanhar os tutoriais, se vocês ficaram com alguma dúvida, é só perguntarem.

por Pablo Sáb 12 Out 2013, 12:29

Aula bem explicada, entendi tudo...
Merece até ser admin do fórum pela ótima explicação de como funciona cada coisa

por Fogomax Sáb 12 Out 2013, 13:03

Pablo escreveu:Aula bem explicada, entendi tudo...
Merece até ser admin do fórum pela ótima explicação de como funciona cada coisa

Antes de começar, estude HTML.

por Freak Sáb 12 Out 2013, 23:02

Simples ...

por DragonicK Dom 13 Out 2013, 02:07

Freak escreveu:Simples ...

melior parar de colocar comentariu inutiu fera? belesinha?

por Lincoln Dom 13 Out 2013, 07:28

Só tem um problema, você utilizou as Tags html, head, body. Mas não explicou a função de nenhuma delas.
mesmo assim, ótimo tutorial, bela iniciativa, caso precise de ajuda futuramente, estarei disposto.

por Fogomax Dom 13 Out 2013, 11:24

Lincoln escreveu:Só tem um problema, você utilizou as Tags html, head, body. Mas não explicou a função de nenhuma delas.
mesmo assim, ótimo tutorial, bela iniciativa, caso precise de ajuda futuramente, estarei disposto.

Por isso pedi para estudarem HTML antes de começar o tutorial, pois é uma coisa básica e é super fácil aprender.

por Conteúdo patrocinado

Criando um Web Game #1

Criando um Web Game #1

Re: Criando um Web Game #1

Re: Criando um Web Game #1

Re: Criando um Web Game #1

Re: Criando um Web Game #1

Re: Criando um Web Game #1

Re: Criando um Web Game #1

Re: Criando um Web Game #1