Como criar RPGs em seu jogo HTML5

O role-playing game (RPG) é uma das formas mais duradouras de jogo. Enquanto os jogos de role-playing pode trabalhar em muitas maneiras diferentes para o seu jogo HTML5, a configuração geral segue um padrão familiar. O usuário se envolve como um personagem com um conjunto de características básicas. O jogador então recolhe objectos e derrota inimigos para eventualmente melhorar o seu desempenho, o que leva a monstros mais difíceis.

Construir classe base do caráter do jogo

Comece por construir um genérico Personagem classe que suporta todas as características comuns, e então você pode facilmente modificar essa classe para construir todos os heróis e monstros que você pode imaginar. As chaves para qualquer classe de personagem são as estatísticas usadas em combate e nivelamento. Você pode lidar com isso de várias maneiras:

• Nome: Embora isso possa ser óbvio, o nome é útil para relatar o que está acontecendo.

• hp: Pontos de vida. Esta é a quantidade de dano que um personagem pode tomar. Se você tem um monte de pontos de vida, você pode ter um monte de danos.

• hitPerc: Esta é a percentagem da probabilidade de que um ataque em particular vai bater. Se o hitPerc é de 50, os ataques vão desembarcar metade do tempo. Valores mais altos levar a ataques mais bem sucedidos.

• danificar: O danificar modificador indica quanto dano será feito em cima de um ataque bem sucedido. Este valor indica quantos dados de seis lados será lançado. (Usando dados dá um valor de dano mais crível do que um valor aleatório em linha reta. Por exemplo, rolando dois dados de seis lados irá produzir os valores de cinco a nove muito mais frequência do que 2 ou 12.)

• defMod: Este valor é um modificador defensivo. Ele é usado para simular a destreza ea habilidade para esquivar um ataque. O modificador de defesa é usado para fazer um adversário menos probabilidade de um golpe.

• armadura: Uma vez que um ataque tenha desembarcado, o armadura valor irá absorver alguns dos danos. Quanto maior for o armadura valor, mais difícil é para ferir o personagem.

o Character classe contém todos estes valores nas propriedades, e também contém duas funções. o showStatus () função retorna um string contendo todas as estatísticas para o personagem. o luta() função gere uma rodada de combate.

Aqui está o código para o luta() método:

 tChar.fight = function (inimigo) {// assume inimigo também é baseado em CharhitPerc = (this.hitPerc - enemy.defMod) / 100-if (Math.random () lt; hitPerc) {danos = 0-for (i = 0- i lt; this.damage- i ++) {danos + = parseInt (Math.random () * 6) -} // fordamage final - = enemy.armor-enemy.hp - = danos-se (enemy.hp lt; = 0) {alert (enemy.name + "! está morto") document.location.href = "" -} // fim do 'inimigo morto' if} // fim do "hit" if} // luta final

Veja como o luta() método funciona:

1. Aceitar um outro personagem como um parâmetro.

   o luta() Método espera um inimigo de classe, que também deve ser um personagem (ou algo baseado na Personagem classe).

2. Determinar a percentagem de sucesso.

   Subtrair modificador de defesa do inimigo do atacante do hitPerc. Isto vai dar um valor entre 0 e 100. Divide este valor por 100 para obter um 0-1 float.

3. Rolar um número aleatório.

   o Math.random () função retorna um valor entre 0 e 1. Compare isso com o calculado hitPerc para descobrir se houve um acerto.

4. Lance os dados.

   Lança um dado de seis lados para cada ponto de dano, e adicionar este valor para um total de execução para determinar quanto dano é causado por este sucesso.

5. Compensar a armadura do inimigo.

   Subtrair o valor de armadura a partir da quantidade de danos.

6. danos Subtrair o inimigo hp.

   Aplicar os danos de o subtrair de hp.

7. Verifique se o inimigo está morto.

   Se o hp vai abaixo de 0, o inimigo está morto.

O modelo de combate é projetado para ser simples e flexível. Todos os vários captadores ou melhorias de nível pode ser fervida para baixo para modificar pequenas características.

heróis do jogo

O herói é uma extensão da Personagem classe, mas (como convém a um herói) que tem um acessório pouco mais. O herói usa uma animação folha de sprite. Um arquivo GIMP permite que você construa personagens personalizados por ligar e desligar várias camadas no GIMP.

o Herói classe é muito parecido com o padrão Personagem. O principal disso é o código de animação. Aqui está uma parte desse código:

 Herói function () {Thero = new Character ( "herói", "hero.png") - tHero.loadAnimation (512, 256, 64, 64) -tHero.generateAnimationCycles () - tHero.renameCycles (new Array ( "Up" , "esquerda", "baixo", "right")) - tHero.setAnimationSpeed ​​(500) - // deixar todas as estatísticas ao seu padrão valuestHero.pause = function () {this.setSpeed ​​(0) -this.setCurrentCycle ( " down ") - this.pauseAnimation () -} // endtHero.checkKeys = function () {if (keysDown[K_LEFT]){this.setSpeed(1)-this.playAnimation()-this.setMoveAngle(270)-this.setCurrentCycle("left")-}

O herói usa um colisão preditivo modelo para evitar uma curta para o orc. Se uma colisão é conhecido, o herói simplesmente faz o backup para o local original antes de atualizar-se:

 tHero.checkCollision = function () {// preditivo detectionif colisão (this.collidesWith (orc)) {// back-up e pausethis.x - = this.dx-this.y - = this.dy-this.pause () -Luta () -}} // checkCollision final

Se o herói colide com o orc, o luta() mecanismo começa. Isso é realmente muito simples:

 luta function () {hero.fight (orc) -orc.fight (herói) -heroStatus.innerHTML = hero.showStats () - orcStatus.innerHTML = orc.showStats () -} // função luta final

o luta() função tem o ataque herói do orc, e então o orc ataca o herói. Após a rodada, as estatísticas de cada personagem são exibidos na saída apropriada.

Como melhorar o jogo role-playing

Este jogo simplesmente implora por melhorias. Há muitas maneiras de levar ainda mais este exemplo particular:

• Adicionar mais monstros. Você pode construir toda uma gama de monstros. Note-se que cada monstro poderia ser simplesmente uma imagem e as estatísticas de combate.

• Adicionar um inventário. Permitir que o usuário pegar vários itens. Cada um dos artigos irá simplesmente mudar uma variável ou dois: tornando o jogador mais forte, dando-lhe mais danos, ou melhor defesa contra o ataque, por exemplo.

• Incluir um calabouço. Use alguns gráficos de fundo para adicionar atmosfera. Você sempre pode usar uma variedade de blocos de barreiras.

• Adicionar um calabouço baseado em azulejo. Claro, mundos à base de cerâmica e de combate RPG são companheiros naturais.