Crie jogos em HTML5 + javascript

A criação de jogos de navegador é muito comum, mas nem tanto para os usuários do Game Maker. Agora que existe o Game Maker HTML5, isso pode mudar. Só que há um problema: nem todos podemos comprar a nova versão. Então, como fazer de forma gratuita, sem baixar nenhum programa? Você deve saber a resposta: Bloco de Notas.

Esse artigo vai mostrar como criar um jogo usando um software e duas linguagens, sendo uma não tão necessária no momento. Vamos precisar saber JavaScript.


Tudo o que precisaremos para iniciar é criar um arquivo de texto no bloco de notas. Vamos usar somente esse arquivo por enquanto.

Vamos começar. Primeiro, precisamos começar escrevendo:


O que isso faz? Diz que vamos começar a escrever em Javascript dentro da página html (você irá salvar como 'nome.html').

Depois, vamos adicionar nas linhas de baixo:


O que isso faz? Cria as variaveis. É o mesmo esquema do Game Maker.

Agora vamos checar se pressionamos as setas, temos que colocar o código delas (uma tabela será fornecida em breve).


Agora vamos dizer que se soltarmos a tecla, então as variaveis respectivas serão falsas:


Agora vamos desenhar o jogo, seria como criar a função Draw no game maker:


Context é um 'pacote' de funções que usamos no jogo. As funções de imagem são dele.
Também checamos se as variaveis eram veradeiras e movimentamos.
As três ultimas linhas: apaga tudo o que está desenhado, desenha o player, escreve nossa posição.

Vamos adicionar os códigos que avisam as funções de teclado quando houver alguma tecla pressionada ou solta:

A ultima linha faz a função drawgame se repetir a cada 30 milissecundos.

Estamos acabando com:

Canvas serve para criar a tela do jogo. É com ele que desenhamos tudo.

Código completo:

Ou então: http://freetexthost.com/wfrg02r4d1

Com isso, salve com extensão .html, clique no arquivo para abrir no navegador.
Mova-se com as teclas. Depois vamos fazer um jogo de plataforma.

Até mais!

cara, nao aparece um monte de codigos pra mim =/
tenta de outro jeito.
flw

Veja se está melhor agora.

Até mais!

vlw, agora, deu.
cara, ja ja vo testa o script, mas, da pra faze jogos java em bloco de notas o.o
vo estuda mais o javascript, vc conhece uns sites de aula bons?

---edit----
precisa de algum programa especifico pra abri?
eu abri com o IE e nao funfo =/

Viu pedro, não ta funfando.

Aparece:

//finaliza a escrita de javascript //fecha a tag //inicia o corpo //cria a tela do jogo na pagina

Como se fosse abrir um documento de texto.

Flws!

Eu desativei o html nessa mensagem, agora está funcionando?

Até mais!

nao, não é isso, os codigos aparecem tranquilamente, mas quando abrimos, nao aparece a tela do javascript...
é algum erro nos scripts, tenta revisa, flw

nao, não é isso, os codigos aparecem tranquilamente, mas quando abrimos, nao aparece a tela do javascript...
é algum erro nos scripts, tenta revisa, flw

Nem todos os navagadores dão suporte ao canvas.

Vamos fazer um teste, na onde está:

Código:

<canvas id="game_area" width="480" height="320"></canvas>

Substituam por:

Código:

<canvas id="game_area" width="480" height="320">Não suporta</canvas>

Assim saberemos se suporta ou não.

Se não tiver suporte, testem no Mozilla (recomendado) ou Chrome. Ou então tentem achar algum plugin (algo do tipo) para rodar no IE.

Até mais!

Como faz para colocar um background ou player ( Se movendo )?

nao consigo aparece assim:

nao consigo aparece assim

Eu coloquei comentários errados no final. Eu usei //, mas esse é só para javascript. Agora está melhor.

Até mais!

agora aparece tudo branco

tudo em branco aqui

Aqui também só fica a tela branca :?

Fizeram o que eu disse? Nem todos os navagadores dão suporte ao canvas. Coloquem um texto qualquer entre as tags do canvas (ultimo codigo). Se aparecer, é porque seu browser não suporta o jogo.

Se não tiver suporte, testem no Mozilla (recomendado) ou Chrome. Para rodar no IE explorercanvas é uma opção.


---------------- Se ainda quiser tentar ------------------
Copiem o código hospedado aqui e colem no bloco de notas e salvem como .html:
http://freetexthost.com/wfrg02r4d1

Até mais!

SHOOOOOW aqui deu certo

Dá pra mover um quadrado preto na tela, javascript é igual ou semelhante a java?

Tô estudando java e quero saber se aprender posso reaproveitar o conhecimento no javascript!!!!!!!

Só consegui jogar depois que você mandou o link com os códigos completos.
Deve ser alguma coisa errada nos códigos do tópico.

SHOOOOOW aqui deu certo

Dá pra mover um quadrado preto na tela, javascript é igual ou semelhante a java?

Tô estudando java e quero saber se aprender posso reaproveitar o conhecimento no javascript!!!!!!!

Javascript não tem relação com o java. Pode ser que algo seja parecido, mas não tem relação forte.

Só consegui jogar depois que você mandou o link com os códigos completos.
Deve ser alguma coisa errada nos códigos do tópico.

Alguém sabe o que poderia ser?

Até mais!

Pedro Henrique escreveu:Alguém sabe o que poderia ser?

Até mais!

Não faço a mínima ideia.
Comparei os códigos do link com os do tópico e não vi erro algum.

Que estranho!

Eu retirei os comentários e coloquei eles fora do código.
Era a única diferença. No meu pc, roda normal.
Mas vai saber o que poderia ser.

Até mais!