Centro RPG Maker

Centro de Software => Informática e Tecnologia => Tópico iniciado por: Crixus online 15/01/2017 às 01:01

Título: Jogo Isométrico com CSS3 + Javascript
Enviado por: Crixus online 15/01/2017 às 01:01
Totalmente inspirado no sistema que eu criei a anos atrás pro Rm2k/2k3/XP que podia ser facilmente convertido para VX e ACE agora refeito para Web.

Esse é um sistema que simula um jogo isométrico, as posições CSS3 são calculadas e definidas com Javascript com um algoritmo que eu fiz na época em que usava rpg maker.

Diferente da versão de Rm2k essa ainda está bem crua, dando foco apenas ao calculo que faz o mapa se mover referente as coordenadas do personagem, só que agora não existe o personagem, somente suas variáveis.

(https://rpgmaker.000webhostapp.com/games/html5/css3/isoview/sample.png)
[imagem] (https://rpgmaker.000webhostapp.com/games/html5/css3/isoview/sample.png)

DEMO: https://rpgmaker.000webhostapp.com/games/html5/css3/isoview/

Suporte para teclado (direcionais) e touch através de botões, apenas para testes.


Segue aqui a ideia do algoritmo:
Citar#====================================#
#===== Dá a posição inicial do mapa na tela =====#
#=====  antes de calcular as coordenadas   =====#
#====================================#
mapaX = -194;
mapaY = 23;

#====================================#
#============ Posiciona o Mapa ===========#
#====================================#
var calculaX = 16;
var calculaY = 8;
calculaX = calculaX * jogadorX;
calculaY = calculaY * jogadorY;
mapaX = mapaX - calculaX;
mapaY = mapaY - calculaY;

#====================================#
#=========== corrige_iso o Isométrico ==========#
#====================================#
var corrige_isoX = 16;
var corrige_isoY = 8;
corrige_isoX = corrige_isoX * jogadorY; //(aqui a posição X se corrige_iso pela corrdenada Y)
corrige_isoY = corrige_isoY * jogadorX; //(aqui a posição X se corrige_iso pela corrdenada X)
mapaX = mapaX + corrige_isoX;
mapaY = mapaY - corrige_isoY;
Título: Jogo Isométrico com CSS3 + Javascript
Enviado por: guKing online 15/01/2017 às 03:35
Tchê, muito massa! Acho muito legal ver todos os tipos de trabalhos em diversas plataformas aqui no fórum
Título: Jogo Isométrico com CSS3 + Javascript
Enviado por: Crixus online 16/01/2017 às 16:44
Na realidade estou desenvolvendo apenas para WEB agora (CSS/3+Javascript), meus trabalhos de Rm2k/2k3 não são muito mais compátiveis com o Windows em suas mais atuais versões, 8/8.1/10.

Esse sistema isométrico pode ser facilmente refeito em CANVAS, mas eu quero fazer um teste de tentar criar um jogo inteiramente com CSS e Javascript.
Título: Jogo Isométrico com CSS3 + Javascript
Enviado por: guKing online 16/01/2017 às 19:53
Citação de: TanatosMaker online 16/01/2017 às 16:44
Na realidade estou desenvolvendo apenas para WEB agora (CSS/3+Javascript), meus trabalhos de Rm2k/2k3 não são muito mais compátiveis com o Windows e suas mais atuais versões, 8/8.1/10.

Esse sistema isométrico pode ser facilmente refeito em CANVAS, mas eu quero fazer um teste de tentar criar um jogo inteiramente com CSS e Javascript.

Realmente. Bah quero muito ainda tomar um tempo para aprender programação pois não sei uma linha se quer.
Título: Jogo Isométrico com CSS3 + Javascript
Enviado por: Crixus online 16/01/2017 às 20:36
Eu pensava como você antigamente kkkkk
Título: Jogo Isométrico com CSS3 + Javascript
Enviado por: WilliamBlack online 16/01/2017 às 21:13
Muito bacana!
Alguma possibilidade de conversão para MV?

Abraços e parabéns mais uma vez!
Título: Jogo Isométrico com CSS3 + Javascript
Enviado por: sloder online 16/01/2017 às 22:55
Me lembra habbo
Título: Jogo Isométrico com CSS3 + Javascript
Enviado por: Crixus online 17/01/2017 às 17:22
@WilliamBlack
Não, já que usa CSS e não canvas, o algoritimo só faria um jogo de RM MV mais lento do que ele já é.

@sloder
Mas eu me inspirei em jogos bem mais antigos, como Super Mario Rpg.
Título: Re:Jogo Isométrico com CSS3 + Javascript
Enviado por: Crixus online 27/03/2019 às 00:40
Pra quem estava com dúvida quanto ao ALGORITIMO, eu rescrevi o código no tópico por que confundi os nomes das variaveis quando peguei do arquivo main.js

Corrigido Abç;