Fórum Criando Jogo em html5 e javascript #488313

08/08/2014

0

Java

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

Responder

Posts

08/08/2014

Eduardo Pessoa

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

Gostei + 0

08/08/2014

Marcelo Pastore

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]
Responder

Gostei + 0

08/08/2014

Thiago Palmeira

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

Gostei + 0

08/08/2014

Marcelo Pastore

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


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

Gostei + 0

08/08/2014

Willian

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.
Responder

Gostei + 0

08/08/2014

Willian

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.
Responder

Gostei + 0

09/08/2014

Fábio Carvalho

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();

}
Responder

Gostei + 0

09/08/2014

Eduardo Pessoa

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?
Responder

Gostei + 0

09/08/2014

Ronaldo Lanhellas

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...
Responder

Gostei + 0

09/08/2014

Roniere Almeida

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.
Responder

Gostei + 0

11/08/2014

Ronaldo Lanhellas

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).
Responder

Gostei + 0

11/08/2014

Roniere Almeida

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

Gostei + 0

11/08/2014

Ronaldo Lanhellas

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
Responder

Gostei + 0

11/08/2014

Roniere Almeida

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

Gostei + 0

11/08/2014

Ronaldo Lanhellas

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


Angry birds tem muito cálculo envolvido, principalmente trigonometria hehehe
Responder

Gostei + 0

Mais tópicos

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar