Como construir o adivinhador número em seu jogo html5

Video: Coisas que precisa saber para fazer seu jogo: Funções - Jogo em Python

Com números aleatórios, você pode fazer jogos interessantes em HTML5. Dê uma olhada em um jogo simples que usa HTML, CSS e javascript juntos. Este jogo tem uma série de características interessantes:

  • Ele usa a página da web como interface. Como muitos programas javascript, ele usa uma página web como interface do usuário. Um elemento de entrada é usada para a entrada, uma div é o elemento principal de saída, e um botão aciona todas as ações.

  • Ele usa CSS para o estilo. As várias partes da página são formatados com CSS. O CSS é armazenada em uma folha de estilo externa por conveniência e reutilização.

  • Ele informa ao usuário quantas voltas ela tomou. Em cada passagem, o computador lembra o usuário quantas voltas ter acontecido.

  • Quando o usuário tenha adivinhado corretamente, aparece um botão Reiniciar. Thisbutton está escondida num primeiro momento, e aparece somente quando for necessário.

  • A resposta certa está disponível para programadores através de uma característica especial de depuração. Ao testar o programa, o desenvolvedor pode ver o que a resposta correta é, mas esta informação é escondido do usuário.

    Video: Jogo do Adivinha em C# Windows Form

  • A nisso() função começa o jogo. o nisso() função inicializa o jogo. Ele é chamado quando o programa começa em primeiro lugar e novamente quando o usuário quer começar de novo.

  • Outra função é ligado ao botão. Quando o usuário clica no botão Check Your Guess, palpite do usuário atual é comparado com a resposta certa, e uma dica é retornado para o usuário.

Como projetar o programa de jogo

Quando você construir um programa complexo, você precisa para começar com um plano de design.

Grande parte do trabalho no desenvolvimento de jogos acontece antes de começar a programação. Se você projetar o jogo bem, a programação é muito mais fácil de fazer. Um design do jogo ajuda a compreender muitas coisas sobre o jogo antes de começar a escrever código:

Esboço geral: Enquanto o layout não está completamente decidido por este desenho, é fácil ver a aparência geral.

  • elementos nomeados: Cada elemento que precisa ter um nome foi determinada, e os nomes estão escritos no documento. Alguns elementos (como o primeiro botão) não precisa de nomes, porque não vai ser referido no código.

  • As funções dos botões: Cada botão irá chamar uma função. O diagrama indica que funcionam cada botão vai chamar.

  • planos de função: Cada função é planejado com uma descrição de língua Inglês do que a função irá fazer.

  • As variáveis ​​globais: As variáveis ​​que precisam ser compartilhados entre funções são descritas.



  • É realmente difícil criar um bom documento de concepção, mas isso faz com que a programação um pouco mais fácil. É difícil descobrir o que você está tentando fazer, e também é difícil descobrir como fazê-lo. Ter um documento de design separa esses dois processos para que possa concentrar-se em primeiro o que você está fazendo, e então se preocupar com como você está indo para fazê-lo.

    Como construir o HTML para o jogo

    O código HTML para o jogo de adivinhação número é muito fácil escrever se você projetou o jogo no papel primeiro. Aqui está o código:

    número Guesser

    número Guesser

    É bom separar HTML, CSS e javascript, porque esta prática permite que você “dividir e conquistar” um grande problema em uma série de problemas menores. Aqui estão as principais características do documento HTML:

    1. Link para o CSS em um arquivo externo.

      No momento, o CSS não é crítico, então você movê-lo fora em um arquivo separado para que possa trabalhar com ele mais tarde.

    2. Terceirizar o código javascript.

      Você também mover o código javascript em um arquivo externo, assim você não precisa se preocupar com isso ainda. No código HTML, basta fazer as ligações para os arquivos externos.

    3. Construir uma forma como o componente principal da página.

      O aspecto mais importante desta página é o formulário. Como a maioria das formas, ele terá um conjunto de campos, rótulos, dos elementos de entrada e botões.

    4. Crie um div para a saída.

      A saída div é apenas um ordinário div. Você colocá-lo dentro do fieldset por isso vai manter uma ligação visual com o resto do formulário. Você pode colocar texto padrão dentro do div (Embora você provavelmente vai mudar este texto mais tarde). Porque o div será referido através de código, ele precisa de um identidade atributo.

    5. Faça uma área de entrada para a estimativa feita pelo usuário.

      O usuário precisará digitar algum tipo de entrada numérica. Use um elemento de entrada para esta finalidade. Consulte a documentação para lembrar o identidade deste elemento. (Você fez fazer um documento de design, certo?) É bom adicionar um rótulo para a entrada que o usuário saiba o que se espera lá.

    6. Construir um botão para verificar o palpite.

      O usuário não cometer um palpite até que ela clica no botão Check Your Guess. Então, você realmente precisa ter um tal botão. Este botão não precisa de um nome, mas ele vai chamar o checkGuess () função.

    7. Construir um segundo botão para começar de novo.

      Uma característica interessante deste programa é um botão que permite que o usuário reinicie. Este segundo botão está disponível apenas quando o utilizador adivinhou corretamente a resposta. Criá-lo com HTML comum e uso CSS e javascript truques para torná-lo desaparecer e aparecer na demanda.


    Publicações relacionadas