Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
Criando jogos em HTML 5 + Java script pelo bloco de notas
4 participantes
Página 1 de 1
Criando jogos em HTML 5 + Java script pelo bloco de notas
Introdução
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.
Começando a fazer o primeiro jogo
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:
- Código:
<html>
<head>
<script type="text/javascript">
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:
- Código:
var context;
var left;
var right;
var up;
var down;
var space;
var _x=0;
var _y=0;
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).
- Código:
//é o mesmo que keyboard_check
function keyDown(e) {
if (e.keyCode == 39) right = 1;
if (e.keyCode == 37) left = 1;
if (e.keyCode == 38) up = 1;
if (e.keyCode == 40) down = 1;
if (e.keyCode == 32) space = 1;
}
Agora vamos dizer que se soltarmos a tecla, então as variaveis respectivas serão falsas:
- Código:
function keyUp(e) {
if (e.keyCode == 39) right = 0;
if (e.keyCode == 37) left = 0;
if (e.keyCode == 38) up = 0;
if (e.keyCode == 40) down = 0;
if (e.keyCode == 32) space = 0;
}
Agora vamos desenhar o jogo, seria como criar a função Draw no game maker:
- Código:
function drawgame(){
context=game_area.getContext('2d');
if(left){
_x-=5;
}
if(right){
_x =5;
}
if(up){
_y-=5;
}
if(down){
_y =5;
}
context.clearRect(0,0,480,320);
context.fillRect(_x, _y,16, 16);
context.fillText(String(_x) ', ' String(_y),10,10)
}
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:
- Código:
document.addEventListener('keydown', keyDown, 0);
document.addEventListener('keyup', keyUp, 0);
setInterval(drawgame,30);
Estamos acabando com:
- Código:
</script>
</head>
<body>
<canvas id="game_area" width="480" height="320"></canvas>
</body>
</html>
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!
Créditos:
Pedro Henrique
_________________
O Equívoco do Sábio - conto na Amazon
FilipeJF- Aldeia Friend
- Medalhas :
Mensagens : 1859
Créditos : 134
Re: Criando jogos em HTML 5 + Java script pelo bloco de notas
bom cara tem uym jeito mais rapido e facil de criar um game com esse estilo e usa uma programaçao so com a mesma funcionalidade do RMXP ou VX,basta apenas a pessoa baixar o programa
Scirra Construct
ele utiliza a programaçao Phynton
abraços
Scirra Construct
ele utiliza a programaçao Phynton
abraços
_________________
Para Aqueles que gostam de Min e de meu Trabalho;
Upem Meu Pet nao custa nda!!
- Pet:
Nanzin- Membro de Honra
- Mensagens : 1550
Créditos : 252
Re: Criando jogos em HTML 5 + Java script pelo bloco de notas
eu fis isso amigo no androd ir no pc nao pego poque , nao entedor , pode me explica fis como ta ai amigo
lksflorencio- Semi-Experiente
- Mensagens : 83
Créditos : 0
Re: Criando jogos em HTML 5 + Java script pelo bloco de notas
Cara, quase fiquei cego, vc não sabe escrever em português, deve ter escrito tudo errado seu script.
Re: Criando jogos em HTML 5 + Java script pelo bloco de notas
Eu não fiz nada , eu so acompanhei o seu tutorio , mas dxa la ,ja consegir um tutorio que deu certo né outro site
lksflorencio- Semi-Experiente
- Mensagens : 83
Créditos : 0
Tópicos semelhantes
» Text Block - Bloco De Notas - V. 0.5
» Text Block - Bloco De Notas - V. 0.1
» [Java]Opção e seleção de escolha de menu, para jogos 2D
» Criando npcs pelo SqlYog database
» [Java] JFrame Configuracão Criando a Primeira Window
» Text Block - Bloco De Notas - V. 0.1
» [Java]Opção e seleção de escolha de menu, para jogos 2D
» Criando npcs pelo SqlYog database
» [Java] JFrame Configuracão Criando a Primeira Window
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|