O TEMA DO FÓRUM ESTÁ EM MANUTENÇÃO. FEEDBACKS AQUI: ACESSAR

Jogo Isométrico com CSS3 + Javascript

Iniciado por Crixus, 15/01/2017 às 01:01

15/01/2017 às 01:01 Última edição: 27/03/2019 às 00:38 por Crixus
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.


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;

Tchê, muito massa! Acho muito legal ver todos os tipos de trabalhos em diversas plataformas aqui no fórum

16/01/2017 às 16:44 #2 Última edição: 21/03/2017 às 11:15 por Crixus
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.

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.

Eu pensava como você antigamente kkkkk

Muito bacana!
Alguma possibilidade de conversão para MV?

Abraços e parabéns mais uma vez!


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

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ç;