Criando jogos em HTML 5 + Java script pelo bloco de notas Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o temaVoltar para a ficha do tema

Aldeia RPG
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Criando jogos em HTML 5 + Java script pelo bloco de notas

4 participantes

Ir para baixo

Criando jogos em HTML 5 + Java script pelo bloco de notas Empty Criando jogos em HTML 5 + Java script pelo bloco de notas

Mensagem por FilipeJF Dom Out 16, 2011 10:42 am

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);
A ultima linha faz a função drawgame se repetir a cada 30 milissecundos.

Estamos acabando com:
Código:
</script>
</head>
<body>
<canvas id="game_area" width="480" height="320"></canvas>
</body>
</html>
Canvas serve para criar a tela do jogo. É com ele que desenhamos tudo.

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

_________________

Criando jogos em HTML 5 + Java script pelo bloco de notas Atpqp
O Equívoco do Sábio - conto na Amazon
FilipeJF
FilipeJF
Aldeia Friend
Aldeia Friend

Medalhas : Criando jogos em HTML 5 + Java script pelo bloco de notas Trophy11Criando jogos em HTML 5 + Java script pelo bloco de notas 94Jxv
Mensagens : 1859
Créditos : 134

Ir para o topo Ir para baixo

Criando jogos em HTML 5 + Java script pelo bloco de notas Empty Re: Criando jogos em HTML 5 + Java script pelo bloco de notas

Mensagem por Nanzin Sáb Out 22, 2011 4:10 pm

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

_________________
Criando jogos em HTML 5 + Java script pelo bloco de notas Npvo

Para Aqueles que gostam de Min e de meu Trabalho;
Upem Meu Pet nao custa nda!!


Pet:
Nanzin
Nanzin
Membro de Honra
Membro de Honra

Mensagens : 1550
Créditos : 252

Ir para o topo Ir para baixo

Criando jogos em HTML 5 + Java script pelo bloco de notas Empty Re: Criando jogos em HTML 5 + Java script pelo bloco de notas

Mensagem por lksflorencio Sáb Jul 13, 2013 12:14 pm

eu fis isso amigo no androd ir no pc nao pego poque , nao entedor ,  pode me explica fis como ta ai amigo
lksflorencio
lksflorencio
Semi-Experiente
Semi-Experiente

Mensagens : 83
Créditos : 0

Ir para o topo Ir para baixo

Criando jogos em HTML 5 + Java script pelo bloco de notas Empty Re: Criando jogos em HTML 5 + Java script pelo bloco de notas

Mensagem por RD12 Sáb Jul 13, 2013 5:47 pm

Cara, quase fiquei cego, vc não sabe escrever em português, deve ter escrito tudo errado seu script.
RD12
RD12
Lenda
Lenda

Medalhas : Criando jogos em HTML 5 + Java script pelo bloco de notas 48080450Criando jogos em HTML 5 + Java script pelo bloco de notas Trophy11Criando jogos em HTML 5 + Java script pelo bloco de notas GIueZCriando jogos em HTML 5 + Java script pelo bloco de notas ZgLkiRU
Mensagens : 1946
Créditos : 745

Ir para o topo Ir para baixo

Criando jogos em HTML 5 + Java script pelo bloco de notas Empty Re: Criando jogos em HTML 5 + Java script pelo bloco de notas

Mensagem por lksflorencio Qui Jul 18, 2013 12:04 pm

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
lksflorencio
Semi-Experiente
Semi-Experiente

Mensagens : 83
Créditos : 0

Ir para o topo Ir para baixo

Criando jogos em HTML 5 + Java script pelo bloco de notas Empty Re: Criando jogos em HTML 5 + Java script pelo bloco de notas

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos