HTML5 Game Development For Dummies

O elemento primário de qualquer simpleGame

jogo é o Scene objeto. Não altere as propriedades do Cena diretamente. Em vez disso, use o método apropriado para gerir a cena.

palpávelIndica se a cena está sendo executado em uma interface touch (móvel). Retorna verdadeiro ou falso.
lonaUma referência ao objeto da lona criado por simpleGame. Pode ser usado para visualizar canvasproperties, mas a modificação deve ser feito com scenemethods.
alturaIndica a altura da tela. Normalmente usado forborder controlo. Mudar com o método setSize () do objeto de cena.
larguraIndica a largura da tela. Normalmente usado forborder controlo. Mudar com o método setSize () do objeto de cena.
topoIndica a posição Y do topo da tela na page.Change com o setPosition () método ofthe Cena objeto.
esquerdaIndica a posição da parte superior da lona no page.Change com o setPosition () método ofthe Cena objeto.
começar()Começa o circuito fechado de temporização. Normalmente, a última linha da página do nisso() função.
Claro()Apaga a cena com a cor de fundo atual. Chamado atthe início da página do atualizar() função.
Pare()Interrompe o ciclo de tempo, parando o jogo.
setSize (largura, altura)Altera o tamanho da cena com a largura e altura indicada.
setpos (esquerda, em cima)Move o canto superior esquerdo da cena para os pixels esquerda e superior indicadas.
setSizePos (largura, altura, à esquerda, em cima)função de utilitário para definir o tamanho e posição no sametime.
setBG (cor)Muda a cor da cena de fundo. Pode ser qualquer cadeia de cor validHTML: # 147-preto # 148-,# 147- # FF00CC # 148-, e assim por diante.
hideCursor ()Esconde o cursor do mouse padrão. Freqüentemente usado no INIT() ofgames método que permitem a entrada do mouse.
ShowCursor ()Exibe um cursor que foi escondida com hideCursor().
GetMouseX ()Retorna o mouse do x posição sobre thegame tela (não a página web em geral). joystick virtual deve beenabled para obter posições de mouse em um dispositivo de entrada de toque.
GetMouseY ()Retorna o mouse do Y posição sobre thegame tela (não a página web em geral). joystick virtual deve beenabled para obter posições de mouse em um dispositivo de entrada de toque.

Mantendo o seu jogo em movimento com o objeto Sprite

Como um desenvolvedor de jogos, lembre-se que o Sprite objecto é a base para mover os elementos do jogo. Não altere as propriedades diretamente, mas use o método apropriado para manipular o sprite da seguinte forma:

  • spriteName = new Sprite (cena, imgFile, largura, altura) -: Criar uma instância da classe Sprite chamada spriteName com a cena indicada, arquivo de imagem e tamanho.

  • Lona: Refere-se a lona elemento criado por cena do Sprite.

  • largura altura: A largura ea altura da duende objeto em pixels.

  • LARGURA C, cHeight: A largura e altura da tela contendo o sprite.

  • x, y: Posição do centro de o sprite.

  • Dx: Delta-x, ou em alterar x. Descreve como o sprite irá mover no eixo X. Os valores positivos indicam movimento para a direita.

  • dy: Delta-y, ou em alterar Y. Descreve como o sprite irá mover no eixo Y. Os valores positivos indicam um movimento de baixa.

  • velocidade: Mostra a velocidade atual da entidade gráfica em sua direção atual de viagem.

  • ChangeImage (imageFile): Altera o arquivo de imagem para o arquivo indicado por arquivo de imagem. Usado para uma forma simples de animação.

  • setImage (imageFile): Outro nome para ChangeImage().

  • atualizar(): Desenha a imagem do sprite de em cena com base na corrente imagem, tamanho, imgAngle, x, e Ypropriedades. Normalmente chamada no final da página do atualizar() função.

  • esconder(): Oculta o sprite. posição Sprite eo ângulo ainda são calculados, mas o sprite não serão atraídos, nem vai colidir com outros sprites.

  • exposição(): Inverte a esconder() método, fazendo o visível aparecem e responder aos colisões.

  • relatório(): Um método de utilitário para exibir a posição, dx, dy, velocidade e valores do ângulo do sprite para consola do programador. Útil para depuração.

  • setPosition (X, Y): Define o centro do sprite para a coordenada especificada por x e Y.

  • setX (x), setY (y): Define um indivíduo de coordenadas para o valor especificado.

  • setDX (newDX), setDY (newDY): Altera o DX ou DY propriedades com os valores indicados. Configuração DX para 5 faz com que o sprite para mover 5 pixels para a direita todos os quadros até DXé alterado novamente (directamente ou através de outros métodos de movimento).

  • changeXby (Xchange), changeYby (yChange): Move o sprite o valor indicado na x ou Y, mas não fazer uma mudança permanente para DX ou DY. Após o quadro atual, o sprite vai mover com base em suas configurações atuais do DX e DY.

  • setspeed (velocidade): Muda a velocidade do sprite para o valor indicado. A velocidade e moveAngleOs valores são usados ​​em conjunto para determinar o DX e DY propriedades da Sprite. Você pode ajustar a velocidade para um valor negativo para fazer o sprite se mover para trás.

  • getSpeed ​​(): Retorna a velocidade atual com base na actual do Sprite DX e DY valores. Pode ser mais preciso do que usando a propriedade velocidade.

  • changeSpeedBy (diff): Muda a velocidade do valor diff. Os valores positivos acelerar o sprite na atual moveAngle direção, e os valores negativos retardar o sprite para baixo. É possível ter uma velocidade negativa. Você pode querer limitar a velocidades mínima e máxima para manter o jogo sob controle.

  • (graus) setImgAngle: Muda imediatamente o ângulo no qual o sprite é atraído para o valor indicado. não modifica o movimento do sprite.

  • (graus) changeImgAngleBy: Modifica ângulo da imagem da entidade gráfica. Utilize este método várias vezes para mudar gradualmente o ângulo em que um sprite é desenhado.

  • getImgAngle (): Usado para retornar atual do Sprite imgAngle. Retorna um valor em graus.

  • (graus) setMoveAngle: Muda imediatamente o ângulo no qual o sprite movimentos. Utilizado em conjunto com a velocidade para determinar nova DX e DYvalores para o sprite. não modifica a aparência da entidade gráfica.

  • (graus) changeMoveAngleBy: Modifica ângulo de movimento do Sprite. Utilize este método várias vezes para mudar gradualmente o ângulo de movimento de um sprite.

  • getMoveAngle (): Retorna o ângulo de movimento atual do sprite no graus.

  • (graus) setAngle: Define Imediatamente imagem e movimento ângulos para o mesmo valor. Use quando o sprite viaja na direção que ele está enfrentando.

  • (graus) changeAngleBy: Modifica tanto a imagem e ângulos de movimento. Utilize este método várias vezes para mudar gradualmente a direção da entidade gráfica.

  • (graus) turnBy: Outro nome para changeAngleBy().

  • addVector (graus, força): Adiciona um vetor de força para o sprite no ângulo indicado e força. Este método extremamente poderoso pode ser usado para adicionar comportamentos baseados na física como a gravidade, as órbitas e derrapagem. Modifica apenas o ângulo de movimento.

  • setBoundAction (ação): Mudar o boundAction do sprite para um dos seguintes procedimentos: O SALTO,EMBRULHO, PARE, MORRER, ou CONTINUAR.

  • checkBounds (): Se você tem um comportamento limite que não é coberto por uma das ações padrão, você pode escrever seu próprio checkBounds() método. Você é responsável por verificar todas as condições de contorno, e as ações padrão não será mais verificado para esta entidade. Nunca é necessário chamar a checkBounds() método. Ele é chamado automaticamente pelo o sprite do atualizar() método.

  • collidesWith (Sprite): Retorna verdadeiro se retângulo delimitador deste sprite está sobrepondo o retângulo do parâmetro duende. Retorna false se os sprites não são sobrepostas ou seja Sprite está escondido.

  • * distanceTo (Sprite): Retorna a distância (em pixels) entre o centro do sprite de corrente e o centro do parâmetro duende. Não é afetado por tamanho de imagem da Sprite ou ângulo.

  • angleTo (Sprite): Retorna o ângulo (em graus) entre o centro do sprite de corrente e o centro do parâmetro duende.

  • loadAnimation (largura, altura, cellWidth, cellHeight): Indica que a imagem associada a um sprite é realmente uma folha de sprite. Os parâmetros largura e altura indicar a largura ea altura do sprite, eo cellWidth e cellHeight determinar a largura de uma única célula de animação.

  • generateAnimationCycles (): Gera uma série de animações com base na folha de sprite. comportamento padrão pressupõe que cada linha é um estado e cada coluna é um quadro de animação dentro desse estado.

  • renameCycles (cycleNameArray): Muda o nome de cada ciclo. Cada elemento da matriz deve ser um nome legível para o estado correspondente.

  • setAnimationSpeed ​​(velocidade): Define o atraso utilizado quando a biblioteca folheia os quadros da animação. Valores mais altos fazem animações mais lentas.

  • setCurrentCycle (cycleName): Altera o ciclo de animação para o valor indicado. Use um dos nomes definidos com o renameCycles() método.

  • playAnimation (): Inicia a animação, que continuará até que parou.

  • pauseAnimation (): Pausa a animação atual.

HTML5 jogo de programação: faz o ruído com o objeto de som

Você usa o Som objeto para criar dois sons por objeto - um MP3 e um OGG - para garantir que os efeitos sonoros em seu jogo irá funcionar na maioria dos navegadores compatíveis com HTML5.

sndElement = new Sound (src)Cria um novo Som objeto chamadosndElement com base no srcArquivo. Este arquivo deve estar no formato MP3, OGG, ou WAV.
Toque()Reproduz o som atual.
showControls ()Exibe o painel de controle de som do HTML5 com um purificador de volume controland. Pode ser útil para dispositivos iOS que requerem a reprodução manualsound antes da reprodução baseada em código.

HTML5 Game Development: Seguindo a pista com o objeto Timer

o Timer objeto irá ajudá-lo a manter o controle de tempo em seus jogos. Você pode ter tantos como temporizadores como você deseja em seu jogo.

timerObj = new Timer ()Cria um novo cronômetro objeto chamadotimerObj. Os automaticallybegins contador contagem quando ele é criado.
reiniciar()Repõe o temporizador para que ele começa a contar do zero.
ObterTempoDecorrido ()Retorna o número de segundos desde o temporizador foi criada orreset.

HTML5 jogo de programação: Adicionando um toque com o objeto Joystick Virtual

Crie um Controle de video game objeto sempre que você acha que seu jogo pode ser usado em dispositivos sensíveis ao toque. Da cena GetMouseX () e GetMouseY () métodos irá responder ao toque de entrada.

joyName = new Joy ()Cria um novo Controle de video game objeto chamadojoyName.
GetMouseX (), GetMouseY ()Obtém o x ea posição Y do mouse se o usuário é touchingthe tela. Devoluções tela coordenadas, não coordenadas em thescene. Normalmente, você quer usar GetMouseX do objeto cena() e GetMouseY() methodsinstead.
getDiffX (), getDiffY ()Retorna o quão longe o dedo do utilizador mudou de posição initialtouch. Modificar esses valores para obter joystick-likebehavior.
virtKeys = verdade-Se você criar uma variável chamada virtKeys em seu código principal e configurá-lo para true antes de construir um objeto joystick, theuser pode arrastar-se para acionar a seta para cima, para baixo para acionar thedown seta, e assim por diante.

Adicionando Tilt com o objeto Acelerômetro Virtual

Um programador de jogos HTML5 pode usar um acelerômetro (o Accel objeto) para ler inclinação e entrada de movimento em dispositivos suportados, como tablets e telefones.

accelName = new Accel ()Cria um novo Accel objeto chamadoaccelName.
getAX ()Retorna rotação em torno do x eixo asa -1 a 1 valor (muitas vezes usado para modificar DY).
getAY ()Retorna rotação em torno do Y eixo asa -1 a 1 valor (muitas vezes usado para modificar DX).
Getaz ()Retorna rotação em torno do Z eixo (girando o dispositivo como um volante). Tipicamente, o getAY () retorna os valores adequados também para thisType de entrada, de maneira Getaz () é rarelyneeded.
getRotX (), getRotY (), getRotZ ()Retorna a mudança atual em rotação em torno de cada um dos axes.Normally, o obter() métodos são MoreUseful.

HTML5 Game Development: Adicionando botões com o objeto GameButton

Se o seu jogo só permite a entrada de teclado, os usuários com dispositivos touchscreen pode não ser capaz de jogar. Use o gameButton opor-se adicionar botões suportado touchscreen.

buttonname = newGameButton (etiqueta) -cria um GameButton objeto chamadobuttonname exibindo o valor do rótulo valor.A rótulo pode incluir um código HTML para mais interestingbuttons.
setPosition (x, y)Define canto superior esquerdo do botão para o indicado (x, y) Coordena. As coordenadas são para thepage, então botões podem ser colocados na cena do jogo ou em outro lugar onthe página.
setSize (largura, altura)Muda o tamanho do botão. Você pode precisar experimentar para findthe tamanho do botão ideal para o jogo fácil sem obscurecer thescreen.
isClicked ()Retorna true se o botão é clicado atualmente e falso se itis não. Fornece uma maneira fácil de ler o estado do botão no thegame loop.

menu