Criando Jogo em html5 e javascript

Java

08/08/2014

Como posso criar um jogo em turnos como por exemplo: dofus, final fantasy entre outros, to no ultimo ano do curso técnico de informática e to desde inicio do ano tentando criar um mas o projeto não anda alguém pode me da umas ticas tenho os personagens e monstros quero saber como movimentar os personagens e colocar pros monstros atacar automaticamente por favor alguém me ajude
Willian

Willian

Curtidas 0

Respostas

Eduardo Pessoa

Eduardo Pessoa

08/08/2014

vou ser sincero, desenvolvimento de jogos em HTML5 é complicado, o assunto é extremamente novo, você tem noção de desenvolvimento de jogos?
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

08/08/2014

William, olha esse artigo daqui da devmedia

[url]https://www.devmedia.com.br/jogos-em-html5-criando-um-jogo-passo-a-passo-com-construct2/29910[/url]
GOSTEI 0
Thiago Palmeira

Thiago Palmeira

08/08/2014

Também consegue construir bastante coisa em Canvas...
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

08/08/2014

Também consegue construir bastante coisa em Canvas...


eu acho que vi aqui na devmedia um artigo sobre o assunto, bem introdutorio por sinal.
GOSTEI 0
Willian

Willian

08/08/2014

Não é exatamente isso que eu queria... pois usa um programa .... porem vou baixar o programa e estudar ele até por que é quase isso mas quero tutoriais programando direto no bloco de notas.


vlw pela ajuda.
GOSTEI 0
Willian

Willian

08/08/2014

Então Eduardo pela questão de ser novo quero criar em html5 pois acho que vai substituir o flash ... porem não tenho muita noção em jogos apenas em programação.
GOSTEI 0
Fábio Carvalho

Fábio Carvalho

08/08/2014

Eu tenho um jogo que usei de projeto na facul: http://navinha.fcarvalho.org

No html: Eu fiz a lógica desse jogo meu (que foi em um curso no luciano augusto) utilizando javascript, em resumo a área do jogo foi separadas em divs, uma externa pra área em preta que é o corpo, uma central que é a area do jogo, dentro da área do jogo eu criei mais div's relacionadas ao tiro aos vilões e a nave do personagem.

Então fui pro css: Colori o ambiente e coloquei cada imagem em sua div correspondente, denominei o tamanho da área do jogo e da área ocupada pelos objetos.


E por ultimo o javascript pra lógica: 
/* Este código foi feito com a ajuda do professor Denilson L. Bonatti  [http://learncafe.com/perfil/denilsonbonatti]*/
/*Comentado e Identado por Fábio Carvalho, Renata Azevedo e Jeziel Lopes*/
/*As músicas e sons deste game não infligem as regras de direitos autorais*/

$(document).ready(function() {
    $("#tiro").hide();
	$("#explosao1").hide();
	$("#explosao2").hide();
	$("#fim").hide();

});

function start(){


$("#inicio").hide();

var velocidade=5;
var posicaoY1 = parseInt(Math.random() * 410);
var posicaoY2 = parseInt(Math.random() * 410);
var podeAtirar=true;
var jogadorEnergia=3;
var score=0;



var TECLA = {
	W: 87,
	S: 83,
	D: 68
}

var jogo = {};
jogo.pressionou = [];

/*Função principal do jogo */

$(function(){
	jogo.timer = setInterval(loop,30); 

		var somTiro=document.getElementById('somTiro');
		var somExplosao=document.getElementById('somExplosao');
		var musica = document.getElementById("musica");
		musica.addEventListener("ended", function(){ musica.currentTime = 0; musica.play(); }, false);
		musica.play();

	$(document).keydown(function(e){
		jogo.pressionou[e.which] = true;
    });
    $(document).keyup(function(e){
    	jogo.pressionou[e.which] = false;
	});
});



function loop()
{
	moveJogador();
	moveFundo();
	moveInimigo1();
	moveInimigo2();
	colisao();
	energia();
	pontos();
}



function moveJogador() {

if (jogo.pressionou[TECLA.W])
	{
		var topo = parseInt($("#jogador").css("top"));
		$("#jogador").css("top",topo-10);
		

if (topo<=0) {
		
		$("#jogador").css("top",topo+10);
		
		}
		
	}
	
	if (jogo.pressionou[TECLA.S])
	{
		
		var topo = parseInt($("#jogador").css("top"));
		$("#jogador").css("top",topo+10);	

	if (topo>=410) {
		
		$("#jogador").css("top",topo-10);
		
		}


		
	}
	
	if (jogo.pressionou[TECLA.D])
	{
		
		tiro();
	}
}

function moveFundo() {
	
	posicao = parseInt($("#fundoGame").css("background-position"));  // posicao recebe a posição do fundo.
	$("#fundoGame").css("background-position",posicao-1); // diminuiu 1px da variavel posicao
		
}



function moveInimigo1() {

        posicaoX = parseInt($("#inimigo1").css("left"));
		$("#inimigo1").css("left",posicaoX-velocidade);
		$("#inimigo1").css("top",posicaoY1);


if (posicaoX<=0) {
			
			posicaoY1 = parseInt(Math.random() * 410);
			$("#inimigo1").css("left",617);
			$("#inimigo1").css("top",posicaoY1);
			
		}

		
}

function moveInimigo2() {

        posicaoX = parseInt($("#inimigo2").css("left"));
		$("#inimigo2").css("left",posicaoX-velocidade);
		$("#inimigo2").css("top",posicaoY2);
		
		if (posicaoX<=0) {
			
			posicaoY2 = parseInt(Math.random() * 410);
			$("#inimigo2").css("left",617);
			$("#inimigo2").css("top",posicaoY2);
			
		}
		
}


function tiro() {

	if (podeAtirar == true){

	podeAtirar=false;
	somTiro.play();
	topo = parseInt($("#jogador").css("top"))
	posicaoX= parseInt($("#jogador").css("left"))
	tiroX = posicaoX + 80;
	topoTiro=topo+80;
	$("#tiro").show();
	$("#tiro").css("top",topoTiro);
	$("#tiro").css("left",tiroX);


    var tempoTiro=window.setInterval(executaTiro, 30);


 	}


 function executaTiro() {
		posicaoX = parseInt($("#tiro").css("left"));
	    $("#tiro").css("left",posicaoX+20); 

        if (posicaoX>650) {
						
			window.clearInterval(tempoTiro);
			tempoTiro=null;
			$("#tiro").hide();
			$("#tiro").css("top",-15);
			podeAtirar=true;
        }
}

}

function colisao() { //Identifica a colisão do Inimigo1 com o Jogador

var jogadorX = parseInt($("#jogador").css("left"))+parseInt($("#jogador").css("width"));
var jogadorBaixo = parseInt($("#jogador").css("top"))+parseInt($("#jogador").css("height"))+50;
var jogadorTopo = parseInt($("#jogador").css("top"));

var inimigo1X = parseInt($("#inimigo1").css("left"));
var inimigo1Baixo = parseInt($("#inimigo1").css("top"))+parseInt($("#inimigo1").css("height"));
var inimigo1Topo = parseInt($("#inimigo1").css("top"));

var inimigo2X = parseInt($("#inimigo2").css("left"))
var inimigo2Baixo = parseInt($("#inimigo2").css("top"))+parseInt($("#inimigo2").css("height"));
var inimigo2Topo = parseInt($("#inimigo2").css("top"));

var tiroX = parseInt($("#tiro").css("left"))+parseInt($("#tiro").css("width"));
var tiroBaixo = parseInt($("#tiro").css("top"))+parseInt($("#tiro").css("height"));
var tiroTopo = parseInt($("#tiro").css("top"));


	if (inimigo1X <= jogadorX) {
		
		if (inimigo1Baixo <= jogadorBaixo && inimigo1Baixo >= jogadorTopo)
			{
		$("#inimigo1").css("left",617);
		posicaoY1 = parseInt(Math.random() * 410);
		$("#inimigo1").css("top",posicaoY1);


		explosao1(inimigo1X,inimigo1Topo);
		jogadorEnergia--;
									
		 } 
			
	}

	//Identifica a colisão do Inimigo2 com o Jogador

	if (inimigo2X <= jogadorX) {
		
		if (inimigo2Baixo <= jogadorBaixo && inimigo2Baixo >= jogadorTopo)
			{
		$("#inimigo2").css("left",617);
		posicaoY2 = parseInt(Math.random() * 410);
		$("#inimigo2").css("top",posicaoY2);
									
	explosao2(inimigo2X,inimigo2Topo);
	jogadorEnergia--;
		 } 
			
	}



// se a posição do tiro passar a posição do inimigo ele é reposicionado.
	if (tiroX >= inimigo1X) {
	
		if (tiroBaixo <= inimigo1Baixo && tiroBaixo >= inimigo1Topo)
		   {
		$("#inimigo1").css("left",617); //reposiciona o inimigo 1.
		posicaoY1 = parseInt(Math.random() * 410);
		$("#inimigo1").css("top",posicaoY1);

		explosao1(inimigo1X,inimigo1Topo);			
		score=score+100;
		velocidade=velocidade+0.2;	
		}
	} //fecha tiro acerta inimigo 1.



	if (tiroX >= inimigo2X) { 
	
		if (tiroBaixo <= inimigo2Baixo && tiroBaixo >= inimigo2Topo)
		   {
		$("#inimigo2").css("left",617);
		posicaoY2 = parseInt(Math.random() * 410);
		$("#inimigo2").css("top",posicaoY1);

		explosao2(inimigo2X,inimigo2Topo);
		score=score+100;
		velocidade=velocidade+0.2;
		}
	}//fecha tiro acerta inimigo 2.

} //fecha função



function explosao1(inimigo1X,inimigo1Topo) {

	somExplosao.play();
	var div=$("#explosao1");
	div.css("top", inimigo1Topo);
	div.css("left", inimigo1X);
	div.show();
	div.animate({width:200, height:100, opacity:0}, "slow");
	
	var tempoExplosao=window.setInterval(resetaExplosao, 1000);
	
	function resetaExplosao() {
		div.css("width", 100);
		div.css("height",100);
		div.css("opacity", 100);
		div.hide();
		window.clearInterval(tempoExplosao);
		tempoExplosao=null;
		
	}
		
}

function explosao2(inimigo2X,inimigo2Topo) {

	somExplosao.play();
	var div=$("#explosao2");
	div.css("top", inimigo2Topo);
	div.css("left", inimigo2X);
	div.show();
	div.animate({width:200, height:100, opacity:0}, "slow");
	
	var tempoExplosao=window.setInterval(resetaExplosao, 1000);
	
	function resetaExplosao() {
		div.css("width", 100);
		div.css("height",100);
		div.css("opacity", 100);
		div.hide();
		window.clearInterval(tempoExplosao);
		tempoExplosao=null;
		
	}
		
}

function energia() {
	
	if (jogadorEnergia==3) {
		
		$("#energia").css("background-image", "url(imgs/energia_3.png)");
	}
	
	if (jogadorEnergia==2) {
		
		$("#energia").css("background-image", "url(imgs/energia_2.png)");
	}
	
	if (jogadorEnergia==1) {
		
		$("#energia").css("background-image", "url(imgs/energia_1.png)");
	}
	
	if (jogadorEnergia==0) {
		
		$("#energia").css("background-image", "url(imgs/energia_0.png)");
		gameOver();
		
	}
	
	
}


function pontos() {
	$("#placar").html("<h1> Score: " + score + "</h1>");
}


function gameOver() {
    window.clearInterval(jogo.timer);
	jogo.timer=null;
	$("#inimigo1").hide();
	$("#inimigo2").hide();
	$("#jogador").hide();
	musica.pause();
	gameover.play();
	
	saida = "<h1> Game Over </h1><h1>Sua pontuação foi: " + score + "</h1><p> Clique aqui para jogar novamente</p>"
	
	document.getElementById('fim').innerHTML = saida; 
	
	$("#fim").show();

}

}//Fim da função star

function reinicia() {

    $("#inimigo1").show();
	$("#inimigo2").show();
	$("#jogador").show();
	gameover.pause();
	$("#fim").hide();
	
	start();

}
GOSTEI 0
Eduardo Pessoa

Eduardo Pessoa

08/08/2014

Então Eduardo pela questão de ser novo quero criar em html5 pois acho que vai substituir o flash ... porem não tenho muita noção em jogos apenas em programação.


entendo, mas qual programa que vc irá baixar?
GOSTEI 0
Ronaldo Lanhellas

Ronaldo Lanhellas

08/08/2014

Como posso criar um jogo em turnos como por exemplo: dofus, final fantasy entre outros, to no ultimo ano do curso técnico de informática e to desde inicio do ano tentando criar um mas o projeto não anda alguém pode me da umas ticas tenho os personagens e monstros quero saber como movimentar os personagens e colocar pros monstros atacar automaticamente por favor alguém me ajude


Meu caro, não quero lhe desanimar, longe disso, quero lhe mostrar que o caminho é longo e difícil mas a recompensa pode ser grande no final. Acontece que desenvolvimento de jogos não é algo trivial, ainda mais no estilo que você citou. Fazer um jogo completo exige muitos conhecimentos, não só HTML5 e Javascript como você pensa, vou lhe citar alguns:

1 - Matemática: Essa é básica, se não souber matemática, quer dizer, se não for bom em matemática então nem leia os próximos itens.
2 - Computação Gráfica: Você precisa saber muito, e não tem nada haver com photoshop (rsrsrsr), é cálculo puro (integral, derivada, limite e etc).
3 - Física: Se você não sabe física, desista, você precisa saber como calcular força, gravidade, velocidade e etc.
4 - O Projeto: Você não pode fazer tudo sozinho, precisa de ótimos desenhistas para fazer suas cenas; precisa de um sonoplasta e muito mais. Programar não é a única tarefa na construção de um jogo, longe disso, envolve muito mais.

Enfim, se pretende começar a criar um jogo sozinho, boa sorte vá em frente que irá aprender muito...
GOSTEI 0
Roniere Almeida

Roniere Almeida

08/08/2014

pegando o post em andamento e me metendo no assunto!!!

sobre o que Ronaldo escreveu

1 - Matemática: Essa é básica, se não souber matemática, quer dizer, se não for bom em matemática então nem leia os próximos itens.
2 - Computação Gráfica: Você precisa saber muito, e não tem nada haver com photoshop (rsrsrsr), é cálculo puro (integral, derivada, limite e etc).
3 - Física: Se você não sabe física, desista, você precisa saber como calcular força, gravidade, velocidade e etc.
4 - O Projeto: Você não pode fazer tudo sozinho, precisa de ótimos desenhistas para fazer suas cenas; precisa de um sonoplasta e muito mais. Programar não é a única tarefa na construção de um jogo, longe disso, envolve muito mais.


aqui em Fortaleza, uma faculdade particular tentou iniciar um curso de Jogos Digitais, até ai tudo bem, mas quando as pessoas perceberam o quanto era complexo o desenvolvimento de jogos, pois é quase uma produção de um "filme", por mais simples que pareça. bem, o curso não durou 1 ou 2 anos, pela evasão de alunos.
GOSTEI 0
Ronaldo Lanhellas

Ronaldo Lanhellas

08/08/2014

pegando o post em andamento e me metendo no assunto!!!

sobre o que Ronaldo escreveu

1 - Matemática: Essa é básica, se não souber matemática, quer dizer, se não for bom em matemática então nem leia os próximos itens.
2 - Computação Gráfica: Você precisa saber muito, e não tem nada haver com photoshop (rsrsrsr), é cálculo puro (integral, derivada, limite e etc).
3 - Física: Se você não sabe física, desista, você precisa saber como calcular força, gravidade, velocidade e etc.
4 - O Projeto: Você não pode fazer tudo sozinho, precisa de ótimos desenhistas para fazer suas cenas; precisa de um sonoplasta e muito mais. Programar não é a única tarefa na construção de um jogo, longe disso, envolve muito mais.


aqui em Fortaleza, uma faculdade particular tentou iniciar um curso de Jogos Digitais, até ai tudo bem, mas quando as pessoas perceberam o quanto era complexo o desenvolvimento de jogos, pois é quase uma produção de um "filme", por mais simples que pareça. bem, o curso não durou 1 ou 2 anos, pela evasão de alunos.


Sim, meu caro, chega a ser quase a produção de um filme mesmo. É óbvio que estamos tratando de jogos mais complexos, com uma história, cenários e etc, não é o caso do "snake" (famoso jogo da cobrinha).
GOSTEI 0
Roniere Almeida

Roniere Almeida

08/08/2014

verdade, mas hoje em dia os joguinhos de celular por mais que pareçam simples, envolve muito conhecimento.
GOSTEI 0
Ronaldo Lanhellas

Ronaldo Lanhellas

08/08/2014

verdade, mas hoje em dia os joguinhos de celular por mais que pareçam simples, envolve muito conhecimento.


Ah sim, mas não são apenas "joguinhos" de celular, longe disso. São verdadeiras engenhosidades modernas rsrsrs
GOSTEI 0
Roniere Almeida

Roniere Almeida

08/08/2014

concordo 100%, imagine a grana de quem desenvolveu angry birds, aquele joguinho é fantastico!!!
GOSTEI 0
Ronaldo Lanhellas

Ronaldo Lanhellas

08/08/2014

concordo 100%, imagine a grana de quem desenvolveu angry birds, aquele joguinho é fantastico!!!


Angry birds tem muito cálculo envolvido, principalmente trigonometria hehehe
GOSTEI 0
Roniere Almeida

Roniere Almeida

08/08/2014

Jogos é legal, falo isso como consumidor desse mercado, acredito que para mim, desenvolver não dar certo.
GOSTEI 0
Filipe

Filipe

08/08/2014

Olá, achei este canal no youtube que faz vídeos legais sobre o assunto: https://www.youtube.com/watch?v=z3r8up9cz3w&list=UUv6aZVQz8IHrhgemxZrNRmQ
GOSTEI 0
POSTAR