Jogo HTML5 do zero passo a passo | Laurence Svekis | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Jogo HTML5 do zero passo a passo

teacher avatar Laurence Svekis, Best Selling Course Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

22 aulas (2 h 18 min)
    • 1. VÍDEO PROMOCIONAL

      1:13
    • 2. Introdução ao curso de jogo HTML5

      3:39
    • 3. Modelo de jogo HTML5

      3:01
    • 4. Jogo HTML5 conectar tela ao Javascript

      5:10
    • 5. Jogo HTML5 Use JavaScript para criar tela

      3:26
    • 6. Configurar GameBoard HTML5

      10:40
    • 7. Desenho de HTML5 selecionando peças de imagem

      9:44
    • 8. Variáveis dinâmicas de configuração de texto HTML5

      8:03
    • 9. Ouvintes de evento de configuração de jogo HTML5

      6:40
    • 10. Teclado ativo do jogo HTML5

      5:50
    • 11. Movimento de jogos HTML5

      5:48
    • 12. Jogo HTML5 criar um inimigo

      6:54
    • 13. Criação de inimigos aleatórios em HTML5

      6:02
    • 14. inimiga de jogo HTML5 em movimento

      9:24
    • 15. Ajustes de cálculo de jogo HTML5

      3:05
    • 16. HTML5 Jogo adicionando pílula de energia

      9:01
    • 17. Detecção de colisão de jogo HTML5

      10:00
    • 18. Funções de powerup de jogo HTML5

      6:50
    • 19. Fantasma de fuga de jogo HTML5

      1:59
    • 20. HTML5 jogo acertar o fantasma de teste

      8:41
    • 21. Jogo HTML5 ajustando o jogo

      4:32
    • 22. Jogo HTML5 adicionar um segundo inimigo

      8:39
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

579

Estudantes

--

Sobre este curso

Aprenda a criar jogos HTML5 e JavaScript do zero tutoriais passo a passo com exemplos de código HTML5 reais

Curso de quebra-cabeça para aprender a criar um jogo de HTML5 do zero para iniciantes.

Treinamento em HTML5 Core usando tela e como definir uma placa de jogo. Como adicionar texto e variáveis dinâmicas. Usando ouvintes de evento para determinar ações de teclado e criar movimento. Crie um inimigo aleatório e faça com que ele se mova. Interagir com itens de jogo como um comprimido de energia. Detecção de colisão para determinar múltiplas reações às interações de objetos no tabuleiro de jogo. Interações de ajustes e ajuste fino de jogos para melhor jogabilidade.

Este curso foi projetado para qualquer pessoa que queira entender melhor como criar seu próprio HTML5, neste curso, mostramos como criar um jogo de HTML5 básico do zero. Você pode reutilizar e praticar com o código de amostra no curso.

Começamos com um documento em branco, adicionamos o HTML e JavaScript para criar o jogo.

O jogo que criamos no curso é um jogo de tipo pacman com um personagem pacman que pode ser movido ao redor da tela. Existem também 2 fantasmas que se movem para o jogador ou para fora, se o pacman estiver ligado.

Nós caminhamos você passo a passo com explicações detalhadas de código e mais.

  • Aulas rápidas chegar ao ponto
  • Tópicos totalmente cobertos com exemplos do mundo real
  • desafios e lições e amostras de código
  • trechos de código
  • Links para recursos superiores para economizar tempo
  • Material de curso novo adicionado regularmente
  • nome de confiança na educação desde 2002
  • codificação de origem completa HD fácil de ler
  • Suporte de resposta rápida aos alunos
  • Discussões regulares

Ensinamos as mais recentes técnicas e ferramentas a usar para criar animações e conteúdo de tela html5. Tudo o que você precisa saber está incluído neste curso. Aprenda no seu próprio ritmo, acesso vitalício a este curso.

Conheça seu professor

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Professor

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. VÍDEO PROMOCIONAL: dentro deste curso, vamos mostrar-lhe como construir um jogo animado baseado em tela HTML cinco a partir do zero. Eu sou um desenvolvedor Web há mais de 14 anos, e eu vou estar compartilhando meu conhecimento com você, mostrando passo a passo, como criar seu próprio HTML cinco baseado. Vamos discutir o básico de como configurar o html cinco e interagir com o canvas. Vamos falar sobre como baixar imagens na tela. Como você usa e interage com ouvintes de teclado e eventos? Também vamos mostrar como criar adversários automatizados dentro do jogo, também adicionar objetos de jogo diferentes e, em seguida, usar a detecção de colisão para criar interatividade entre todos os vários objetos. Dentro disso, também estaremos cobrindo ajustes de animação de ajuste fino e muito mais quando você estiver pronto para começar a criar seus próprios jogos HTML cinco. Vamos começar 2. Introdução ao curso de jogo HTML5: dentro deste curso, eu vou estar caminhando você através passo a passo, como construir devido um html baseado em javascript cinco jogo a partir do zero. Nós vamos incluir todos os diferentes componentes, explicando-os ao longo do caminho e explicando como as diferentes funcionalidades funcionam dentro do canvas HTML cinco e JavaScript e como todos eles trabalham juntos. Meu nome é Lawrence, e eu sou um desenvolvedor web por mais de 14 anos, e eu vou compartilhar meu conhecimento com você. Todos os arquivos de origem. Você também vai ser incluído? O editor que vou usar é colchetes. Então este é um editor gratuito para download da Adobe. Eu vou incluir um arquivo de recursos onde teremos todos os recursos usados neste curso links para todos os recursos de diferença e arquivos de informação. Há alguns arquivos de caneta de código também. So Code Pen é um editor online que você pode usar para praticar JavaScript, html e CSS diretamente na linha. Todo o código vai ser escrito a partir de um modelo em branco, começando com o HTML trazendo o código-fonte JavaScript. E então vamos trabalhar predominantemente apenas com o arquivo JS. e isso vai ser capaz de acomodar toda a compilação do jogo. Então tudo isso vai ser incluído. Passo a passo, como construir o jogo a partir do zero, começando com as diferentes variáveis para usar. Como configurar a tela, como trazer imagens. Carregando imagens, adicionando ouvintes, ouvintes de teclado ouvindo funções de tecla para baixo, teclas de seta verificando para ver quais teclas de ar realmente pressionadas. Eu também impedindo o escoamento dos vários objetos na tela e, em seguida, algumas funcionalidades adicionais desses objetos. Algumas funcionalidades úteis aqui e diferentes maneiras de separar e configurar jogos. Looping de jogos e animação de jogos e, em seguida, renderizar animações na tela, fazendo detecção de colisão, adicionando objetos diferentes na tela e, em seguida, movendo-se em torno desses objetos na tela, também impedindo-os de correr para fora da tela para movimento. E então, é claro, detecção de colisão e, em seguida, desenhar objetos diferentes, como pontos tão circulares e retângulos também. E, finalmente, desenhando essas imagens na tela e escrevendo texto na tela. Para completar um jogo simples como esta simulação de Pac Man vs os dois fantasmas. É encorajado que você siga e pratique o código que estamos discutindo. Eu até mesmo criar suas próprias versões do código usando seu próprio editor O estão usando um editor on-line em breve. Você está pronto? Vamos começar a criar nosso primeiro jogo HTML cinco. 3. Modelo de jogo HTML5: nesta lição, vamos falar sobre como configurar o nosso jogo HTML 5. Então a primeira coisa que queremos fazer é declarar o documento apertado e você faz isso digitando no dock e declarando em HTML eso isso permite que o navegador saiba que este é um documento HTML cinco, e então eu vou adicionar na abertura e fechamento Tags HTML, coloque algum espaçamento. A próxima coisa que quero fazer é armar a cabeça. Então aqui é onde todas as nossas meta-informações são configuradas em que eu vou adicionar em um título também. Então eu vou chamá-lo de tutorial de jogo. E agora estamos prontos para montar o corpo. Então, abrindo e fechando tags corporais. Então eu tenho as tags de fechamento automático de outono configuradas. Estou usando colchetes, colchetes de adobe. Este é um editor para download gratuito, que você pode baixar você mesmo. Ou você poderia usar seu editor favorito também. Então a outra coisa que vamos fazer é criar algum estilo , e eu acho que por agora eu vou apenas mantê-lo no estilo da página, e então nós também vamos ligar para o JavaScript. Então você cria um novo arquivo JavaScript e vincula a isso também. Então eu vou fazer o script e fazer uma fonte para o script. Eso eu vou chamá-lo de Js dot Js E então isso vai puxar em nosso arquivo JavaScript, e então vamos fazer uma tela dividida vestindo e incluir o JavaScript porque vai ser o JavaScript que vai adicionar essa funcionalidade Teoh seu jogo HTML cinco . E por último, eu quero adicionar em tela. Então, esta tag tela é uma das tags mais importantes aqui para o seu jogo HTML cinco. Eu recebi isso. Arrume tudo. Você tem que selecionar tudo e, em seguida, Aiken embelezá-lo. Isso o torna mais legível. E então aqui, dentro da tela, eu vou definir uma largura 600 Eu também dar-lhe uma altura de cerca de 400. Então, basta fazer 400. E agora quando eu vou para a página para que nós não temos mais uma página em branco, nós temos tudo isso. Agora todo esse modelo configurado e está pronto para ir. Tem que criar o arquivo Js JavaScript também. E então nós vamos construir o jogo a partir deste ponto em diante 4. Jogo HTML5 conectar tela ao Javascript: nesta lição, vamos falar sobre configurar e realmente conectar em nossa tela em nosso JavaScript . Há várias maneiras diferentes de fazer isso. Você pode até mesmo criar a tela usando JavaScript, que vamos mostrar a você também como fazer isso. Mas para este exemplo, nós acabamos de criar usando html e agora eu vou assiná-lo e eu d Então eu vou dar-lhe tela. Então eu vou dar uma idéia do espaço de tela e agora dentro do meu JavaScript. Então eu vou me conectar a ele usando a configuração de tela e tela eu vou fazer o documento get Então isso está funcionando dentro do amanhecer porque agora que eu dei um i d, eu posso realmente isolar e pegar este elemento em particular no HTML cinco, Então agora eu só tenho que indicar o i d do elemento e, em seguida, que vai amarrar a tela para este objeto em particular no html eso Agora nós temos get elemento por i d. E agora que nós o identificamos pelo i d. Então get elemento por i d. Então agora eu só tenho que indicar o i d do elemento e, em seguida, que vai amarrar a tela para este objeto em particular no html eso Agora nós temos get elemento por i d. E agora que nós o identificamos pelo i d. nós podemos realmente definir nossa interação, que nós vamos apenas chamar C T X e isso vai nos permitir realmente interagir com a tela em duas dimensões. Permita-nos desenhar uma atualização, imagens e conteúdo dentro dele. Então, puxando essa variável que acabamos de configurar assim usando tela e, em seguida, o método é obter contexto e o contexto vai ser muito profundo. Agora que configuramos nosso JavaScript, há uma coisa importante a observar aqui porque estamos usando o amanhecer e com o dom, temos que nos certificar de que a página real tenha carregado para interagir com o amanhecer. Eso É por isso que nós realmente vamos pegar nosso JavaScript, e nós vamos movê-lo abaixo dos objetos dom porque caso contrário ele realmente não vai funcionar se você está mantê-lo no topo lá na página. Se estamos conectando o JavaScript aqui, não seremos capazes de acessar nossa tela. Então, esta é uma das razões pelas quais estamos colocando nosso JavaScript abaixo para que todas essas informações sejam carregadas no dom, e então estamos prontos para interagir com esse conteúdo. E agora vamos adicionar apenas um teste rápido, apenas para ter certeza de que nosso HTML cinco está realmente ligado e funcionando. Então vamos digitar algum texto em nossa tela. Então agora não há nada na tela. Nós não carregamos nenhuma informação e eu vou digitar em algum texto básico e ele vai ver Olá mundo. Feche isso. E agora, após a posição onde o texto é tão aqui dentro da nossa dica aqui nós notamos que o número de texto da string X. Por quê? Então isso vai ser no nosso eixo X. Então localização em nosso eixo X podemos fazer algo como 10 e são por que o acesso? Já que temos uma altura de 400... talvez possamos fazer algo como 150... e então também temos um máximo. Então, se quisermos limitar a largura da área de conteúdo ou a área de texto que estamos adicionando em nossa tela enfraquecer fazer isso dentro da próxima vírgula. Mas agora vamos deixar um padrão porque eu não quero ter que definir nada lá, ir para a nossa página web e atualizá-lo. E vemos que temos aquele “Olá mundo “e isto está na nossa área de lona. Eso uma das coisas para que eu vou configurar dentro do estilo só para que possamos realmente ver onde nossas telas. Então eu vou configurar tela, e então isso vai se aplicar a todas as telas que eu tenho na minha página. Então borda sólida uma escolha e eu vou dar-lhe uma cor de preto. Então guarde isso. Embelezar isso. Torná-lo mais legível. Volte para fora. Refresque-o. Então agora que temos uma fronteira para que possamos realmente identificar onde nossa tela está localizada. Então parece que estamos prontos para começar a interagir com nossa tela e continuar construindo nosso jogo, que faremos nas próximas lições. 5. Jogo HTML5 Use JavaScript para criar tela: nesta lição. Vamos saltar um pouco para trás como prometido, e vamos olhar para uma maneira de criar a tela sem digitá-la em HTML digitando dentro do HTML. Vou comentar a tela, voltar para a nossa página. Atualize isso, e vemos que realmente não temos nada lá quando vamos para a fonte que está comentado agora e ainda estamos vinculando nosso JavaScript eso dentro aqui. Nós estamos realmente indo para configurar nossa Candace o que, usando JavaScript. E isso nos poupa o problema de configurar isso aqui e, em seguida, realmente cozinhá-lo no dom e esperando que então o que nós tínhamos notado dentro da lição anterior é que quando eu coloquei meu JavaScript acima do conteúdo HTML real, nós não foram capazes de se conectar a essa tela em particular que eu d. E fazê-lo desta forma irá realmente garantir que tudo está carregado e que você é capaz se conectar a ele. Então a primeira coisa que vamos fazer é fazer documento e vamos criar no elemento, e o elemento que estamos criando é uma tela, e a próxima coisa que estamos fazendo é fazer C t x a mesma coisa que fizemos antes e nós vamos realmente copiar o mesmo porque neste momento, estamos criando isso dentro do amanhecer, e agora estamos ligando para que possamos manipulá-lo com o CTX. E há algumas outras coisas que temos que fazer. Nós realmente temos que dar a tela Ah, altura, bem como um com. Então nós vamos ficar com o que tínhamos lá em cima, e eu vou dar-lhe ah, altura de 400. E com 600 isso é 400 pixels por 600 ou eu deveria dizer 600 por 400 horizontalmente. E agora o que precisamos fazer é realmente uma caneta para as etiquetas do corpo. Então vamos assistir, transformar uma criança em sua, e isso vai ser o objeto de tela que acabamos de criar. E então também, se quiséssemos enfraquecer até ele em Olá mundo. Então, agora, quando vou para a página, eu a atualizo. Na verdade, obtemos o mesmo resultado da lição anterior. Então, esta é a maneira de criá-lo, usando JavaScript quando a página é carregada e nos dá essencialmente o mesmo resultado que estamos olhando na lição anterior. Então, novamente, dentro do código-fonte, nós comentamos isso e na próxima lição vamos começar a entrar em algumas coisas ou empolgantes com HTML cinco canvas e realmente começar a criar alguns elementos do jogo. 6. Configurar GameBoard HTML5: Então, agora que revisamos alguns dos conceitos básicos de configuração do canvas em seu site, podemos começar a carregar alguns componentes reais do jogo. E uma das primeiras coisas que eu quero carregar é, na verdade, eu quero uma carga em uma imagem nós. Vamos fazer um Pac Man um jogo tipo mini pacman onde vamos ter nós, Pac Man, vamos ter fantasma aleatório e vamos criar um ponto e quando o homem Pac comer o ponto, então ele pode comer o fantasma. Mas se o bode pegar o Pac Man sem ser azul ou sem estar no Mord quando o cão for comido, então o homem do Pac vai perder. Então, basta fazer um tipo rápido de jogo de pontuação como esse e o que eu vou ver é que eu vou usar este arquivo PNG. Eso Este arquivo PNG tem um número de diferentes modos diferentes, ícones diferentes aqui. Então temos os nossos fantasmas. Temos o nosso homem do Pac com a boca aberta, boca fechada e todo o caminho para baixo. Então vamos usar todos esses fantasmas azuis também vamos começar trazendo essa imagem para nossa tela. Eso na última lição, falamos sobre como configurar nossa tela e como trazê-la com JavaScript. Então eu vou em frente, e eu vou começar a remover um pouco disso aqui, e eu vou mudar CTX para contexto. E vamos ficar com isto. Vamos montar esse, uh, uh, esse tamanho aqui de altura de 400 com 600. Então este é um bom começo para o que vamos ter dentro do jogo. Eso O que eu quero fazer agora é realmente querer uma carga na imagem. Então eu quero criar uma nova imagem. Então eu vou fazer a imagem principal, e eu vou igualá-la a nova imagem. E, novamente, vou usar o mesmo objeto. Então a imagem má é o meu objecto. Na verdade, isso deve ser um sinal de igualdade, e eu vou fazer quando a imagem principal estiver pronta. Então, quando estiver carregado, por padrão, quero ter um falso aqui, e vou mudá-lo para verdadeiro. Uma vez carregado e pronto para a imagem, ou vamos chamar isso em carga. Então, quando a imagem terminar de carregar. Nós vamos correr. Uma função específica nesta função vai verificar para se certificar de que está pronto. E se estiver pronto, vai definir o pronto para ser verdade. E ele vai lançar a função de renderização do jogo assim em Load check pronto. Então esta vai ser a nossa função que vai verificar se as coisas estavam prontas, e então aqui está a imagem má. Então esta vai ser a fonte dessa imagem. Então eu vou usar o mesmo que estamos olhando mais cedo. Chama-se PNG embalado. Então, novamente, apenas para rever o que está acontecendo aqui, eso eu estou configurando um novo objeto de imagem. Uh, e eu estou configurando. Eu estou dando pronto e verificar a mudança para false por padrão. E quando a imagem é carregada, ela vai executar a função. Verifique pronto, e ele vai usar o ponto do pacote fonte PNG como a fonte. Então isso significa que eu preciso concordar que a função aqui chamada check ready Agora nós passamos qualquer coisa lá nessa função, e então eu posso apenas fazer isso pronto, e eu posso definir isso para tropas e eu vou ter outra função aqui dentro. Vou chamar isso de jogo de apelação. Então, uma vez que as imagens carregadas, ele vai acabar executando esta função. Isso só vai fazer joguinho. Eu provavelmente poderia simplificá-lo também, apenas talvez colocar o jogo aqui quando ele está pronto e carregado. Mas apenas no caso de eu querer fazer outra coisa, eu vou realmente manter isso dentro desta função s Então este é um tipo de prepará-lo para expandir para posterior possível expansão que pode ser necessário dentro deste jogo. E eu ia embelezar, então agora precisamos criar mais uma função e vai ser a função do jogo . E o que este vai fazer é este vai ser o início do jogo, lançando o jogo, esse tipo de função. Então, novamente, apenas função, jogar um jogo. Então tudo aqui é uma vez que o jogo começa, eso uma vez que nossas imagens são carregadas, então podemos fazer o que precisamos fazer. E aqui nós lançamos esta função que é jogado jogo e esta função vai realmente lançar mais uma função. Vai ser chamado de renderização, e nós também vamos incluir o loop aqui também dentro do método de jogo, e nós vamos entrar nisso mais tarde. Então, o que a renderização é isso realmente vai ser onde nós realmente vamos produzir o conteúdo em nossa tela dentro de nossa tela. E isso só vai ser chamado de renderização de função. E então, por enquanto, o que eu quero fazer é eu vou fazer contexto, estilo Phil, e eu vou dar-lhe uma cor eso e eu vou apenas dar-lhe uma cor de eso preto apenas por agora, nós vamos começar para fora com esta cor de fundo preto, e eu vou rapidamente passar sobre o que acabamos de falar, bem, tão preto. E agora eu tenho que fazer o preenchimento real do retângulo tão parecido com o que olhamos antes . Então eu vou começar isso em 0,0 e eu vou trazê-lo todo o caminho para cima. Então aqui temos os nossos números. Então, quando preenchemos retângulo, precisamos ter todos os quatro números de canto. Então precisamos ter o X o porquê do w no h. Então o X coordena a coordenada y. Esta vai ser a largura e, em seguida, a altura e com largura e altura podemos realmente usar esta tela com e altura da tela de modo que porque queremos encher toda a tela. E, claro, se você não quiser preencher toda a tela, você ajustaria isso de acordo. Agora vamos voltar para a página e não há muita coisa acontecendo agora . Temos o nosso retângulo preto, está cheio de preto. Então, só para mostrar novamente para que pudéssemos literalmente ter qualquer cor que sentirmos que queremos, podemos usar o decimal Hexi. Podemos usar RGB também sobre isso irá atualizar todo o fundo e voltar sobre o que nós configuramos aqui s para recapitular. Então isso é o que nós olhamos na lição anterior, onde criamos o contexto da tela para d nós anexamos à tag body dentro do HTML, nós definimos a altura da tela de 400 com 600. Então provavelmente só vai rápido trocar estes ao redor porque normalmente fazemos com e então fazemos altura em, então aqui estamos apenas fazendo uma carga de imagem eso estamos configurando imagem principal dando em um objeto de imagem que estamos fazendo pronto, isso é Entãoisso éalgo que podemos ou não usar novamente, dependendo do que estamos fazendo mais tarde e como estamos dimensionando isso, talvez queiramos saber que temos um valor aqui da imagem principal pronta que nos dirá se esta imagem está carregada. Eso Se estamos carregando várias imagens, então nós queremos ter essa habilidade, a fim de dizer que esta imagem está carregada e outras imagens também carregaram. Então, novamente, isto é para se quisermos construir esse eso aqui, estamos fazendo a imagem principal em carga e o que está acontecendo aqui. Uma vez que o on load é concluído, ele vai executar este método chamado check ready, que é logo aqui. E aqui é onde fazemos a viragem, a troca de falso para verdadeiro. E então executamos mais uma função aqui dentro, e esta é a função. E novamente, isso está acontecendo para escalar e atualizar dentro do cabo mais tarde. Então agora, provavelmente parece um pouco estranho que nós provavelmente poderia ter feito renderização quando está em carga. Portanto, não precisamos necessariamente deles neste momento. Mas eu os adicionei porque vamos usá-los e trabalhar com eles à medida que progredimos através deste curso eso O que está acontecendo aqui é tudo o que estamos fazendo é nos conectando de volta àquela tela que construímos originalmente aqui e onde tem algumas funções embutidas aqui. Estilo Eso Phil. Então isso está nos dando a cor que vamos preenchê-lo. E então aqui estavam fazendo ah, Phil retângulo e estes ar as dimensões do retângulo que estavam se enchendo. Então, na próxima lição, vamos entrar em algumas coisas realmente excitantes. Nós vamos começar a trazer através dessa imagem, e então nós vamos estar fazendo algumas coisas realmente legais, fazendo as imagens se moverem. E assim por diante s Oh, isso está chegando nas próximas lições, bem como nós vamos construir no loop de jogo real e executar algumas funcionalidades lá também 7. Desenho de HTML5 selecionando peças de imagem: nesta lição, vamos falar mais sobre a imagem e adicionar a imagem em nossa tela. Então, na lição anterior, olhamos e temos esta imagem onde temos todos os nossos ícones diferentes que vamos usar dentro do jogo estão contidos dentro de uma imagem. Agora, é claro, você pode ter várias imagens em que você pode carregá-las todas. Mas o que eu estou fazendo para os propósitos deste curso, é que eu vou apenas usar esta imagem, e eu vou escolher algumas partes da imagem que eu quero mostrar na tela. Então, para o homem do Pac, eu vou mostrar apenas o homem do parque para um fantasma. Eu vou mostrar um fantasma, e na verdade vai torná-lo um pouco mais fácil para mim quando eu estou realmente fazendo alguma funcionalidade dentro deste que não estão indo atrás de várias imagens carregadas. Eu tenho tudo contido dentro dessa imagem. E como vimos na lição anterior, carregamos essa imagem e estamos prontos para usá-la. Então agora, a fim de realmente adicionar essa imagem, vai ser muito fácil, porque tudo o que temos que fazer é fazer o método desenhar imagem, e isso vai fazer toda a funcionalidade da imagem. Só precisamos responder a algumas informações vitais. E o 1º 1 é, Quando você desenha a imagem? Onde está pegando a fonte da imagem de alguns aqui, nós a carregamos. Nós carregamos e entramos no objeto, minha imagem principal. Então, tudo o que estou fazendo é apenas conectando a mim e a imagem que carregamos anteriormente. E eu estou desenhando. E então aqui eu tenho que especificar onde eu quero desenhá-lo. Então, se eu quiser desenhar 00 então isso seria bem no canto. Então, voltando para os nossos exemplos ou não puxando para cima no canto. Se eu quisesse movê-lo sobre as coordenadas X, eu poderia fazer isso, e então as coordenadas brancas. Eu poderia mover isso também, então há um monte de parâmetros adicionais que você pode adicionar em Esso. Isso é por padrão. Isto é o mais simples que podemos fazer. Eso Nós também pode adicionar em segundo conjunto de parâmetros, e nós também podemos adicionar em parâmetros adicionais dentro de outra linha onde podemos estar escolhendo um determinado pedaço dele s Oh, eu tenho um exemplo aqui, dentro de caneta de código I O s. Oh, isto é uma caneta de código. Eu, oh, isso é que eu posso fornecer um link para isso também. Eso aqui temos um exemplo de que temos nossa imagem de desenho e então o que estamos fazendo agora é que estamos apenas desenhando a imagem como ela é. Estamos movendo-o. Então o nosso era, eu acho, 40 por zero. Então, vamos colocá-la aqui. Eso como você viu quando nós carregamos. Na verdade, havia um monte de parâmetros adicionais. Eso, o próximo será o com e a altura da imagem. Então, se eu quisesse que o dedo tivesse uma imagem de 20 por 20 e eu estivesse pegando toda essa imagem, eu estou fazendo 20 por 20. Eu posso fazer isso dessa maneira. Se eu quisesse um 20 por 120 eu poderia fazer isso se eu quisesse maior para 400 por 400 assim por diante . Então isso determina a altura da imagem que vamos usar eso. O próximo conjunto de parâmetros é realmente vai ser Ele vai realmente mudar isso em torno um pouco. Eso O que queremos fazer é que queremos ser capazes de escolher um desses fantasmas aqui ou realmente o Pac Man e isolar essa imagem em particular e trazer isso para a nossa tela. Eso, precisamos de algumas coordenadas Mawr aqui que precisamos adicionar. Então o próximo conjunto de coordenadas que foram adicionando será a coordenada x e y do canto superior esquerdo do sub retângulo da fonte da imagem. Então, se eu quisesse escolher, então olhamos para a fonte da imagem. Então esta é esta imagem aqui, então talvez eu possa puxá-la para uma janela separada aqui, e podemos ver que esta é a fonte da imagem. E talvez eu queira ficar com a cara de rinoceronte. Então, apenas olhando para isso quando eu entrar na fonte da imagem, Aiken aproximadamente escolher que isso é provavelmente cerca de 60 pixels em Isto é provavelmente cerca de 150 baixo, então eu vou apenas ir com isso e eu vou ir 60 em fazer 150 para baixo . E como vemos, nós realmente não vemos nada acontecendo aqui em cima porque estes realmente mudaram agora. Então, não estamos mais olhando para essas coordenadas sendo a largura e a altura da imagem real da tela de destino. Estamos olhando para a imagem de origem ao lado da largura e altura da imagem de origem. Então eu vou parar. E agora vemos que se pegarmos as coordenadas 60 por 150, então isso nos traz na verdade apenas para a taxa sobre lá. E pegamos 10 por 10 disso e colocamos como garfo. Então, talvez o quê? Mude isto para 100 por 100. Então nós estamos realmente fora colocando este 100 por 100 eso. Na verdade, está trazendo um pouco mais no rosto também. Então, só para repassar isso de novo, porque isso vai ser bastante complexo. Eso, se eu quiser escolher. Então, a primeira coisa que o primeiro parâmetro não é bastante simples. Vai ser só a imagem, e os próximos quatro vão ter a ver com a imagem de origem. Então o x e y da imagem de origem e, em seguida, a largura e a altura da peça particular ou parte de informação que estamos recebendo. Então, mesmo que eu reduza isso, vemos que ele realmente se estende. Porque agora tudo o que estou a fazer é selecionar 20 por 20 de lá. Mas é um alongamento para 100 quando saímos para o nosso destino. Então, se eu fosse reduzir isso para 20 do que se esses dois combinassem, então nós estamos realmente escolhendo uma fatia desse eso estes Isto é 150 então ele não necessariamente coincide com aquele eso novamente. Isso é bastante complexo, mas visualmente, o que vamos fazer aqui é que temos que olhar para a fonte primeiro, e então temos que escolher o destino de nossa própria imagem. Então, voltando ao nosso código-fonte e tentando escolher. Então agora que nós temos as coordenadas lá, então agora nós temos que realmente atualizar isso, e nós podemos definir ah largura e uma altura e extrair todas essas informações aqui. Então é aqui que a posição na imagem que estamos tentando escolher. Então este é 320 o ponto em 320 O próximo ponto é, por quê? Então esse zero. Então é aqui que estamos escolhendo. Queremos fazer 32 picaretas em 32 picaretas para escolher aquele pedaço específico da imagem . Então é aí que conseguimos o 32 32 e os outros quatro números estão onde estamos localizando. Então 00 é onde estamos localizando. Então, se eu quisesse definir em 50 e 50 eu poderia definir isso. E se eu quiser manter o homem do Pac do mesmo tamanho, eu poderia fazer 32 32 que vai encolher o nosso homem do Pac para baixo. Eso podemos realmente mudar isso e fazer o nosso destino Pac Man como Bigas queremos. Então pode torná-lo muito grande, se quisermos. E podemos trazê-los de volta para os sinais padrão dele. Há então eu vou ficar com o tamanho de e uma vara com um tamanho de 32 e, em seguida na próxima lição, nós vamos estar falando mais sobre como fazer esta figura dinâmica e a fim de começar a movê-los ao redor da tela e começar ter algumas funcionalidades adicionadas ao nosso jogo. Mas esta é a forma de escolher a imagem e, assim, carregar esse pacote ponto PNG e, em seguida, isolar essa parte específica da imagem e extraí-la para a tela. 8. Variáveis dinâmicas de configuração de texto HTML5: Então agora, dentro deste jogo, o que eu quero fazer é que eu realmente quero fazer algumas dessas coisas dinâmicas. E o que vamos fazer nas lições posteriores é o que mencionamos antes. Vamos passar por essa renderização. E o que realmente vai acontecer é que vamos limpar essa tela e redesenhar tudo uma e outra vez, quadro por quadro. E é assim que teremos movimento, interação, interação, cálculos para o jogo e assim por diante. Então isso tudo vai ser feito dentro desta função de renderização eso Por enquanto, que eu quero fazer é que eu quero ser capaz de isolar esta parte da imagem porque enquanto olhamos , eu tenho essa boca abrindo e fechando. Eu tenho isso para cima e para baixo. Então eu quero realmente definir valores para estes porque eu quero ter a capacidade de alterá-los dinamicamente como eventos aconteceram dentro do jogo. E à medida que as coisas mudam, quero ter essa habilidade de ter uma interação dinâmica. Então isso vai ser eu vou chamá-lo de boca de saco e a razão de eu estar chamando isso é porque nossa boca vai abrir e fechar s Então é assim que nós vamos apenas chamá-lo, a fim de identificá-lo como sendo a boca e, em seguida, embalar direção. E esta é a direção real em que nosso personagem vai estar se movendo e nós podemos realmente puxar todas essas coisas dentro de um dentro de um objeto. Então sabíamos que precisamos criar um objeto de jogador, e isso poderia conter muitas variáveis e valores. Então é isso que eu vou seguir em frente e eu vou criar aqui, e então eu vou criá-lo como jogador ex-jogador. Por quê? E eu vou ter este pacote de boca e objeto de diretório embalado. Então aqui, em vez de ser uma posição fixa. Então eu ainda tenho que criar esses objetos. Então o jogador atua jogador. Por quê? Então ele vai me dar as coordenadas do jogador, e eu vou transformar isso em objetos também. Então, estes serão quatro objetos, e eu vou apenas subir aqui, e eu vou predefinir o objeto player e a maneira como nós definimos objetos. Então jogador variável é igual a, uh , colchetes, então x então por padrão eu vou dar X posição inicial de 50. Vou dar por que uma posição inicial de 100 e então temos uma que chamamos de boca de pacote . E eu vou dar que o valor de 3 20 que estava lá por padrão. E então eu tinha outro chamado direção de pacote, e aquele era zero, porque é aí que ele realmente vai mudar. Quando mudamos de direção, nós realmente vamos estar processando uma imagem diferente como a direção muda eso para agora , isso é provavelmente tudo o que precisamos para selecionar esses valores de 32 eso Se quisermos torná-los maiores e menores, que querem que isso aconteça dinamicamente, poderíamos acrescentar isso também. Então, em vez de ter 32, poderíamos alterá-los dinamicamente. Então, se quisermos, acabei de receber um chamado de tamanho da paz. E, por enquanto, serão 32. Deve ser uma vírgula. E então, é claro, se tivéssemos dimensões diferentes, então se tivéssemos um , tamanho horizontal diferente,um tamanho vertical diferente, teríamos que atualizar isso também. Então agora, hum, agora podemos começar a adicionar algumas funcionalidades dinâmicas também com em nosso jogo. Então, por enquanto, eu realmente vou mudar isso de volta para 32 para que ele se encaixe em uma linha bem porque isso estava ficando um pouco longo. E então, é claro, se for necessário, podemos sempre mudar isso de volta para o tamanho lá. Então, na verdade, não vamos usar o valor da ciência. E na próxima lição, vamos falar mais sobre como fazer com que t configure seu teclado. Funcionalidade s vai estar entrando em que s o por agora para finalizar esta lição. Nós só vamos terminar isso com a configuração de algumas informações de pontuação porque, assim como em qualquer bom jogo, você precisa ter pontuação. Então vou definir uma fonte. Agora, você não precisa definir um tamanho. Você pode apenas usar os valores padrão de fontes. Mas para este tutorial, eu só vou definir em um tamanho aqui de 20 picaretas. A fonte Verdana e eu também temos que fazer o estilo de preenchimento porque estamos usando azul. Se mudarmos para preto nosso texto padrão, ele não ficará visível. Então, na verdade, vou deixar o texto branco. E se você notar que há um padrão aqui sobre o que estamos fazendo, então o estilo de preenchimento vai se referir à próxima ação real que vai preencher. Então, se eu não definisse um estilo de preenchimento, seria como azul. Então eu definitivamente quero ter certeza que eu definir um cérebro. Você sente estilo porque eu quero ter uma cor diferente para o texto. E então aqui é onde eu realmente vou escrever na informação de texto. Então eu vou dar o Pac Man e, claro, devemos marcar uma pontuação. E aqui eu estou apenas inventando em ating Ah, string aqui em javascript. Portanto, isto deve ser bastante simples. E eu vou fazer uma pontuação para o fantasma também. E talvez eu possa montar um fantasma aqui. E então agora eu tenho que selecionar onde eu quero uma posição. É O assim como a imagem que eu posso configurar a propriedade ponto que o valor lá, o parâmetro lá como o que eu quero exibido. E então aqui é onde eu posiciono tão X primeiro. E então por que segundo? Então eu vou colocar em dois e 18. Volte rapidamente para a nossa página. Refresque-o. E eu tive que fechar aqui rapidamente porque eu tenho que configurar os valores de pontuação porque isso está jogando um erro. Então eu tenho que configurar pontuação variável e ele vai igualá-lo a zero pontuação g invariável e igual a zero. Então, agora, quando eu voltar e atualizar, é oh, lá nós temos o nosso texto e estamos marcando e então o que nós vamos fazer também. Vamos ter essa pontuação aumentando à medida que diferentes ações e coisas diferentes acontecem dentro do jogo. 9. Ouvintes de evento de configuração de jogo HTML5: Então, dentro desta lição, nós vamos entrar em algumas coisas realmente legais onde nós vamos realmente estar tendo alguma interação acontecendo. Cliques do teclado, eles vão ser rastreados, e então algo vai acontecer assim que forem rastreados. Então primeiro precisamos configurar um objeto. Então ele ia chamá-lo de Qi Click. E nós vamos ter apenas um objeto padrão em branco que vamos usar. E aqui vamos montar alguns ouvintes de eventos. Então adicione o ouvinte de evento ID de evento, e nós vamos ouvir o evento de chave para baixo. Então isso está puxando no dormitório e, em seguida, adicionando, adicionando I eventos diferentes. Então nós vamos ter um evento de função, e nós temos que prod passar esse parâmetro lá. E nós queremos ter esse falso e então com os olhos aqui onde nós vamos realmente marcar o evento, então você vai chamá-lo de Qi. Clique. Então este é o objeto que acabamos de configurar aqui e, em seguida, estamos recebendo esta informação de evento e vamos obter o código de chave real e este deve ser um ponto porque estamos recebendo o código de chave a partir desse objeto de evento, e Vamos passar isto para outra função. Eso, por enquanto. O que vou fazer é consolar. Log isso para fora. Então, lance, hum, apenas voltar para aqui, abrir nosso console aqui, então eu estou usando, uh, cromo divertido. Portanto, há um erro de ortografia em algum lugar. Volte para trás. Aveia. Então agora vemos que quando eu toco no teclado estavam recebendo esses objetos que são enviados em eso é realmente tomar e fazer esse evento ouvindo eso esses ar. Quando toquei no teclado, vejo esses objetos acontecendo. Ah, e então onde eu tenho um passe sobre o código de chave e também dentro desta chave clique objetos. Então, na verdade, não estamos passando nada. Então não vamos colocar nada. Temos que definir isso como sendo verdade. Ah, e agora sempre que clicarmos em uma tecla, nós realmente vamos ter um clique. Quando vamos, clique em tecla. Nós vamos realmente obter o código de caracteres A s c para a chave. Aquele clique. Então, isto é para baixo. Isto é deixado. Isto é para cima. Isto está certo. Então vemos que ele está realmente se acumulando. Se eu colocar no espaço, acredito que o espaço era 32 cada tecla diferente dentro do teclado vai retornar um segundo valor dentro de seu eso Isso Na verdade, nós provavelmente temos que começar a remover objetos porque nós não queremos ter todos esses objetos sempre verdadeiros. Ah, e nós queremos 1/2 remover esses eventos. Então, queremos adicionar um segundo evento, e isso vai ser chave para cima. E isso vai evitar o primeiro evento e o que ele vai fazer, simplesmente vai apagar esse evento de clique de tecla, então devemos limpar isso. Então, toda vez que a tecla for pressionada, vamos pegar esse valor, e toda vez que ela for levantada, vamos perder o resto dos valores para que ela seja limpa toda vez que aumentarmos a chave . E isso nos dá a capacidade de retornar de volta, aquele valor que estamos procurando e então esse ar, os valores que realmente vamos procurar quando fizermos nossos cálculos. E vemos aqui que, às vezes, se você pressionar um monte de teclas de uma vez, ele passa por mais de um valor eso. Isso é algo que vamos nos procurar bem dentro do objeto. E é isso que estamos usando um objeto porque estamos recebendo, ah, uma série de valores diferentes que podem ser passados por aqui. Eso novamente Na próxima lição, vamos entrar em algumas coisas mais interessantes. Eso por enquanto, nós vamos apenas configurar uma função adicional, e eu ia chamar isso de movimento, e eu vou enviar esse valor de clique chave dentro do parâmetro ah lá. E então eu vou apenas configurar o cérebro que você funciona. É outro lá, e eu vou chamar esse movimento então isso vai ter tudo a ver com mover pela tela e nós vamos verificar se há valores específicos que estavam passando por cima. Então sabemos que estamos passando por cima desses valores de clique de chave. Então sabemos que uma vez que passamos o que, então nós temos que fazer algo dinâmico com o cálculo de onde os jogadores estão enfrentando? E então novamente, renderize isso. Então, talvez o que podemos fazer por agora é fazer isso fora. E sempre que uma tecla é clicada, eu vou para o Jogador X. E, claro, nós vamos mudar isso. Uh, chegando em inchar. Então, agora, quando eu voltar e atualizá-lo para que qualquer tecla que eu estou pressionando agora, nós vemos que nós temos está movendo funcionalidade, e na próxima lição vai ser alguma coisa ou coisa interessante. Na verdade, vamos abrir e fechar a boca enquanto estamos nos movendo. E então também vamos adicionar em diferentes direções, detectar qual tecla foi realmente clicada e executar esse conjunto específico, esses valores específicos para as teclas que são clicadas. Então está chegando na próxima lição. 10. Teclado ativo do jogo HTML5: dentro desta lição, vamos adicionar algumas funcionalidades adicionais que começamos dentro da última lição onde adicionamos os ouvintes de evento s. E então configuramos uma função onde estamos realmente olhando para ouvir esse movimento, pegando a tecla que foi pressionada. E então vamos fazer algumas ações dependendo de qual tecla foi pressionada. Eso Há mais alguns valores aqui que eu quero configurar, então realmente quero configurar um valor de velocidade, e isso vai determinar quão rápido o personagem vai se mover através eso Isso é algo novamente que queremos tornar dinâmico e todas essas variáveis, sempre que você estiver definindo variáveis, isso lhe dá a capacidade de alterá-las dentro do script. Ah, e então esta é uma das razões pelas quais gostamos de definir tantas variáveis diferentes no início do jogo e configurá-las para que possamos ter a capacidade de mudar qualquer uma delas . Então, dentro desta lição, nós vamos estar olhando para mudar o X, o porquê usando a velocidade. E nós também vamos mudar esse valor de direção porque novamente voltando para a imagem que estamos usando. Então, quando o homem do Pac vai cair, nós realmente queremos mudar. Queremos mudar para que lado ele está enfrentando. E esta é uma das boas razões pelas quais usar uh, arquivo de imagem como este é porque eu tenho todas as imagens necessárias dentro deste arquivo PNG. Então, voltando ao movimento. Então eu vou fazer um monte de declarações condicionais, então eu vou fazer se começar em 37 na tecla Click. Então este é o, uh esse valor que estamos passando aqui dentro da função e queremos que algo aconteça. Eso o que queremos fazer se for 37 é a tecla esquerda. Então nós queremos realmente fazer Jogador X menos igual e uma velocidade de jogador. Então vai nos dar esse valor dinâmico, modo que deve ser desigual. Site eso Isso vai subtrair a velocidade e, em seguida, também eu quero definir a direção tão clara uma direção pack e eso voltar para a nossa imagem. Se eu estiver indo por padrão indo para a direita, vai ser zero thes ar, tudo 32 por 32. Então 32 está aqui. Então isso está indo para baixo é 32 então 64 está indo para a esquerda, então eu definir essa direção pack igual a 64 e então eu vou fazer isso para todas as outras chaves também. Então eu tenho um número de teclas diferentes, e a coisa boa sobre as teclas de seta é que elas são todas consecutivas. Então eu tenho 37 38 então 38 vai realmente subir. Então é a chave para cima dentro de 38. Temos que usar a coordenada Por quê? Temos que fazer velocidade. E a nossa direcção vai ser 96, creio eu, a partir dos cálculos. Em seguida, queremos fazer 39. Então 39 vai ser X. Então é aqui que tivemos nosso padrão inicialmente. Então, estamos apenas a adicioná-lo. A velocidade do jogador e nossa direção vai voltar para zero e então 40 finalmente vai ser incremental ng wai Então vai descer. Então nós temos que fazer por que eles estão mudando isso para um plus e nossa direção vai ser o último lá que está disponível é 32 eso apenas uma rápida olhada nisso e nós devemos ser bons para renderizar isso para fora. Eso agora voltando aqui, Vamos ver o que acontece quando tocarmos as setas e vemos que temos o nosso movimento no lugar. Eso algumas coisas que estão chegando nas próximas lições. Eso eu quero ter essa boca abrindo e fechando eso Isso vai ser algo que vai ser bastante fácil de definir. Também vamos pedir ao Teoh para garantir que não passemos dos limites da tela . Então tela com e altura da tela. E quando passarmos o limite, quero voltar para este site. Assim como sair daqui é como quando você está jogando Pacman, você vai para a direita e você vem pela esquerda, e eu vou fazer isso também para cima e para baixo. Então, quando você cair quando você sair da tela, você vai realmente estar aqui e descer, e então nós vamos adicionar a mesma funcionalidade para os fantasmas também. Adicione, ah, power up, power up pílula ou dot s para que possamos comer isso e perseguir alguns fantasmas. Tudo isso está chegando nas próximas lições 11. Movimento de jogos HTML5: Então agora eu quero adicionar no movimento da boca, e quando o jogador passar a borda da tela, queremos redefinir o valor do jogador para que eu possa adicionar tudo isso aqui dentro. Então eu vou fazer rapidamente embelezar que um pouco, então aqui, eu vou fazer se Jogador X, é maior do que ou igual a. E eu tenho uma tela com e a tela com menos 32 de modo que, embora assim que estiver praticamente tocando a borda lá, eu posso jogá-lo de volta para a posição zero para que eu possa configurar o jogador X e dar-lhe um valor de zero. E, às vezes, com esses valores, você tem que brincar um pouco com ele é oh, este então uma vez. Por que, se ele vai altura da tela menos 32 nós vamos definir o porquê em zero e depois os próximos dois. Então eu vou verificar, na verdade, se o Jogador X é agora menor que zero. Então tenha em mente que você quer, hum, você não quer definir isso igual a zero porque eu estou colocando os jogadores em zero aqui, e se eu estou procurando que ele seja menor ou igual a zero do que quando atinge zero aqui , Vou ter um conflito aqui. Então você tem que realmente ter certeza de que, uh, você não está sobrepondo seus valores é por isso que é sempre bom para ter certeza de que você verificar isso mais. Então agora você vai definir um valor fora do jogador X, e eu vou dar-lhe valor fora da tela com menos 32 e a mesma coisa para por que altura da tela menos 32 e, finalmente, o que eu quero fazer então nós vamos apenas mostrar-lhe como isso funciona. E então vamos definir a boca, que é na verdade algo que eu queria fazer porque alguns você tem que adicionar algumas funcionalidades agradáveis . Mas veja que temos isso funcionando agora e agora para definir nossa boca de abertura e fechamento . Então eu acho que isso é, uh, parte muito legal disso. E é outra vez. Vai ser muito fácil de fazer porque está tudo contido dentro dessa imagem, então não tem que virar imagens. Então, se esse valor for de 3 20 nós vamos fazer alguma coisa. E se não for 320, então vamos definir para 320 Então, se não for 320 e definir para 352 e aqui, eu vou fazer outra coisa. E aqui nós vamos configurar para 3 20 para que a próxima vez que ele atinge esse valor lá, e ele redefine para 3 52 Então agora, apenas para tipo de rever isso como isso vai funcionar eso toda vez que a tecla é pressionada, Toda vez que o Pacman se mover, ele vai virar as duas opções aqui para onde a boca vai estar localizada. Vai mover esta agulha de imagem para a área de seleção de 320.23 52 e é aqui que temos as bocas abertas. E mais uma vez, é aqui que funciona. Realmente, Muito bem, com esses tipos de PNG é onde você apenas carregar a coisa toda, e então você pode simplesmente mover entre os diferentes pontos usando javascript, a fim selecionar todos os diferentes pontos. Então agora temos que testar oito. Certifique-se de que está funcionando e veja lá. Temos nossa boca abrindo e fechando para cima e para baixo e tudo parece parecer do jeito que precisávamos trabalhar no dedo do pé. E, claro, você sempre pode abrandar esse movimento. Se você tivesse várias posições da boca, você poderia abrandar isso, ter coisas diferentes acontecendo e assim por diante. Se você tem um personagem que está caminhando, você pode adicionar todos os pontos diferentes lá, a fim de fazer o movimento parecer natural. E essa é uma das razões pelas quais eu realmente gosto do Pacman, porque é muito simples. Você não tem muitas partes móveis. Você tem uma boca de abertura e fechamento, o que torna muito fácil renderizar esses oito. Então, a próxima lição vamos entrar em algumas coisas adicionais. Estamos onde, uh, tornando que estamos realmente fazendo alguma animação que vamos adicionar no ponto de energia . Então nós vamos começar a adicionar em alguns inimigos para transformá-lo em, hum, ou jogo interessante 12. Jogo HTML5 criar um inimigo: dentro desta lição, vamos olhar para o quadro de animação pedido s. Oh, isso vai ser algo que é relativamente novo. Eso nem todos os navegadores mais antigos vão suportar. Isto é por aqui. Eles têm um gráfico de compatibilidade do navegador aqui para que você saiba se os navegadores são compatíveis com o ar . Então, você dá uma olhada nisso? Se estiver a trabalhar em versões mais antigas em que, se o seu jogo tiver de ser compatível com o Internet Explorer, existem formas de o tornar compatível. Aqui é o Eso. Você pode realmente definir os diferentes valores de animação aqui para que dentro desta lição, nós vamos apenas estar trabalhando com o quadro de animação de solicitação de janela. Você também pode fazer isso usando intervalos, mas, uh, uh, provavelmente a melhor maneira da maneira moderna de fazer isso é fazer este quadro de animação de solicitação. E o que isso faz é que isso assume esse loop desses intervalos e tudo o que temos fazer é entrar em nosso código aqui, olhar para trás sobre o que estamos fazendo aqui no jogo plea, e se eu adicionar isso em um pedido de animação frame play game, ele vai renderizar continuamente isso para fora. Então só para mostrar o que está acontecendo aqui, e talvez eu apenas defina um valor rápido. Talvez só aumentemos a pontuação. São só por agora. Só para mostrar o que está acontecendo aqui. E eu tenho uma lista do valor da pontuação. Volte para o nosso jogo, atualize-o, e vemos que isso é aproximadamente a cada segundo. Ele está fazendo loop através dessa função particular, e vemos que ele está realmente atualizando a tela lá. Então este é um intervalo de animação muito bom nós. E isso é, um, uma das coisas que é importante quando você está criando um jogo, olhos no dedo do pé, ter essa habilidade dedo loop através e continuamente executar através de funções. Então vai ser diferente do que quando você está projetando um site ou algo assim, onde você está procurando mais de um processo linear, você constantemente quer ser capaz de atualizar e re calcular o que está acontecendo dentro do seu jogo. E isso é o que esse quadro de animação de solicitação permite que você faça para executar essa função e outra vez. E se você tiver algum cálculo ou se você precisar de algo acontecer, então você pode adicionar isso tudo no quadro. Então, tudo o que estou fazendo para o meu é que eu estou fazendo o terno e novamente, claro, eu poderia copiar isso para fora como se você se livrasse desta renderização. E eu poderia ter tudo isso dentro do jogo. Eso às vezes dependendo do que é a sua estrutura de jogo, você pode fazê-lo dessa forma. Mas queremos ter a habilidade. Thio adicionou uma funcionalidade adicional e ampliou nosso jogo. E é por isso que temos todas essas funções diferentes. E isso é o que nós temos eles agrupados neste tipo de moda para que eu possa realmente mudar este dedo do pé preto, ter um enchimento de preto eso. Dentro desta lição, vamos começar a entrar em, uh, adicionar os inimigos em também criar algumas funcionalidades para o inimigo. Uma das primeiras coisas que quero fazer é atrair o meu inimigo. Hum, e eu vou armar. Então nós configuramos este objeto vai aqui que controla as informações do jogador. Então talvez precisemos montar outro objeto aqui que controle nossas informações inimigas , então não precisaremos de nada disso, necessariamente. Embora, hum, nós podemos precisar de alguns valores lá, mas por enquanto, nós apenas vamos mantê-los iguais. Eu vou apenas mudar o X e o Y, então não está imediatamente em cima do jogador e eu vou renderizar o inimigo. Então, a partir daqui, enquanto precisamos fazer é apenas precisamos de outra imagem de desenho e realmente vamos fazer o inimigo antes do Pac Man. E isso é outra coisa a ter em mente que quando você está desenhando coisas na tela , isso vai estar em ordem. E é por isso que nós realmente fazemos o retângulo primeiro, a fim de limpar nossa tela que estamos fazendo o preto. Estamos fazendo o tamanho da tela, e estamos fazendo todas essas coisas primeiro porque queremos que todos esses dedos sejam realmente algumas das primeiras peças que vemos. E aqui, se eu quiser colocar o placar, basicamente, agora o fantasma e o Pac Man vão ser capazes de ir no topo do placar. Então está tudo em camadas em ordem do que está chegando. Primeiro há eso Agora precisamos sair. Então, novamente, vamos estar usando ponto na imagem do Maine, modo que na verdade não muda após conjunto de valor para Here s então eu vou apenas definir zero por enquanto. Direções. Não há direção para o fantasma. Então, 00 e 32. 32 vai pegar nossa primeira leitura fantasma 0.32 por 32. E agora precisamos definir em suas coordenadas onde eles vão estar localizados. E vamos ficar com ele. Aos 32, é muito fácil adicionar um inimigo. E como podemos ver aqui, há um fantasma e nas próximas lições estavam realmente indo animá-lo. E novamente, isso veio para onde as camadas estão. Então, agora, sempre que o nosso homem está viajando, ele está na camada superior. E é por isso que ele pode ir para cima do fantasma lá e de novo. Tenha sempre em mente como o seu olhar, como você está empilhando, o que está acontecendo na tela, e isso depende da ordem em que você está colocando o código. Então na próxima lição vamos talvez animar o fantasma, e então vamos terminar o jogo adicionando um ponto de poder, que vai nos dar a habilidade de comer o fantasma. Tudo isso está chegando nas próximas lições 13. Criação de inimigos aleatórios em HTML5: Então, dentro de jogos, muitas vezes você precisa dedo do pé tem coisas aleatórias acontecer. Valores aleatórios retornados. Então eu sempre gosto de incluir uma função simples onde eu posso passar sobre um número e retornar sobre um valor aleatório de volta para esse número. Então eu simplesmente faço algo como devolvido e depois o chão da boca para trazê-lo de volta. Teoh valor real e, em seguida, matemática aleatória. Porque quando fazemos matemática aleatoriamente, pegamos aquele ponto zero e um monte de valores lá. Então eu quero multiplicar isso por e qual é o parâmetro que passamos lá dentro desta função que meu número e então eu gosto de fazer mais um s Oh, isso deve me dar um número aleatório de zero para este valor particular ou de um para qualquer que seja esse valor. E, claro, você pode ter uma forma diferente. Você deixa você com quem você quer trabalhar, nós queremos aleatorizá-lo ou alterar alguns desses valores. Mas para os propósitos desta lição, eu mantenho muito simples onde eu vou ser capaz de devolver isso. E a razão de eu fazer isso é porque na verdade quero criar um fantasma aleatório para eu não querer ter apenas aquele fantasma espreitando por aí. Eu quero ser capaz de definir o nosso eso aleatório Uma das coisas aqui é que eu acho que tenho um conjunto. Eu vou definir de valor aqui. Então eu vou quebrar isso e apenas acalmar um polegar separado. Acredite em um pouco de espaço aqui, e eu vou definir meu fantasma como tendo um valor falso. E isso vai me dar a habilidade de verificar se o fantasma existe. Se ele não existir quando eu estiver renderizando o conteúdo, eu realmente vou renderizar minhas informações fantasmas também. E novamente, tudo isso depende de como e onde você deseja usar isso. Mas na maioria das vezes você pode fazer a maior parte de sua funcionalidade aqui dentro dessa renderização. Ah, você também pode configurar isso aqui dentro do jogo. Se você não detectou um fantasma, você poderia criar um lá naquele ponto nós Bem, eso um número de maneiras diferentes que você pode inserir isso em Esso. Se você quiser manter isso, a parte de renderização realmente limpa com apenas informações de tela. Este é um ótimo lugar para fazer isso também. Mas por enquanto, o que vou fazer é renderizar o fantasma dentro da função de renderização. Mas por enquanto, o que vou fazer é renderizar o fantasma dentro da função de renderização Vou ver se o fantasma existe. E se não existir eu vou criá-lo ou atualizar as informações dele aqui , se ele não existir, sei que preciso definir um número para ele. Então eu vou para o que eu estou fazendo aqui é eu estou definindo ah, número para ele. E então é aqui que imagem eu realmente vou desenhar para fora, então eu não vou estar desenhando o número fantasma. Então isso vai me dar a habilidade de realmente não ter apenas o fantasma vermelho nisso. Talvez tenha o laranja. O cor-de-rosa. O cerco ganhou o roxo, então há cinco diferentes. Então eu vou fazer o meu cinco dormente e eu tive um multiplicá-lo por 64. E também vou dar a ele uma posição X e y aleatória, então eu vou dar a eles Enemy X. E novamente, essa mente , hum , função lá, e eu vou apenas dar-lhe um lugar aleatório no mapa lá. E também vou dar-lhe uma posição aleatória. Então esse cara me deu uma cor fantasma aleatória, local aleatório, e como podemos ver, ele está continuamente fazendo isso agora. Então eu realmente acho que há, ah, erro lá no cálculo. Então, o que? Vou remover isso por não calcular em valor zero. Então é melhor. Então eu não... eu realmente não vejo o homem do Pac lá. Eu vejo todos os fantasmas diferentes, que é exatamente o que eu quero. Mas eu realmente quero ser capaz de definir isso em falso. Então eu só criei um fantasma que era esse você lá onde eu estou criando um monte deles . Mas eu queria ter certeza de que estou criando os fantasmas corretamente. Eso Now, quando eu faço, fantasma é igual a verdade. Eu só deveria ter um fantasma, e será muito mais fácil seguir o que está acontecendo aqui também. E outra coisa que eu poderia querer acrescentar também é que eu não quero que ele perto do topo, então eu vou dar-lhe um plus 30 lá, Teoh, dar-lhe uma posição, posição aleatória, mas na verdade tê-los abaixo onde o conteúdo está lá em cima. Então dê-lhes mais ou menos uma posição centrada. Eso não vem lições. Vamos falar sobre como podemos mover nosso fantasma em torno de eso. Está chegando na próxima lição. 14. inimiga de jogo HTML5 em movimento: Agora que criamos nosso inimigo agora precisamos ter algum movimento para o nosso inimigo é 01 das coisas que eu quero atualizar aqui. Quando o criamos, quero verificar se ele está se movendo. Então talvez possamos até fazer algo onde temos eso. O movimento realmente vai ser um valor de quantos espaços ou quantos segundos ele se move na mesma direção. Eso eu quero dar a ele a habilidade de se mover em direções aleatórias, mas eu não quero que ele esteja zumbindo e voltando aleatoriamente para cima e para baixo. Eu quero que ele tome uma decisão em que direção ele vai seguir essa direção por um tempo. E depois que o cálculo estiver acima, então vai ser uma contagem regressiva para este movimento vai diminuir. Assim que atingir o zero, ele vai reiniciar. Ele vai reavaliar qual direção ele precisa ir, e eu vou adicionar tudo isso na função de renderização. Então aqui nós montamos nosso fantasma e o que eu vou fazer, eu não vou adicionar no cálculo de movimento aqui só porque eu queria redefinir cada vez que chegar a zero. Então vai ser sempre a mesma coisa. Então o que temos é inimigo em movimento, e uma vez que é menor que zero, então o que eu quero fazer é que eu quero que algo aconteça. E aqui é onde escolhemos o nosso inimigo em movimento, e vamos dar-lhe um valor aleatório. Então você usa essa mente, hum, novo. E talvez escolhamos algo como 30 aleatórios. Multiplique por três. E novamente, você pode ter um cálculo diferente que você deseja usar aqui. Vou adicionar em 10, porque não quero que vá abaixo de 10. E isso deve nos dar um número aleatório para contar. Além disso, talvez queiras mudar a velocidade dele, não apenas a verificar. Então eu defini uma velocidade de cinco. Então talvez eu quero que ele tenha realmente uma velocidade aleatória não é sempre vai estar se movendo na mesma velocidade s cada vez que ele muda de direção. Haverá a possibilidade de ele mudar de velocidade também. Agora também, do jeito que estamos fazendo isso aqui porque estou colocando dentro desta área de renderização, ele vai realmente movê-lo mais rápido e de novo. Poderia ter sido melhor criar outra função e trazer isso para fora, mas por enquanto, eu vou mantê-lo dentro da renderização. Mas isso é algo para ter em mente que isso vai ser uma resposta mais rápida, mais rápida, porque isso vai ser executado a cada segundo, ao contrário da pessoa e dos cliques de teclas e seu movimento. Então eu acho que um movimento de número aproximado quatro ou cinco e, em seguida, aqui é onde nós realmente vamos definir direções. Então eu ia definir direção igual a zero, e eu vou fazer direção X e direção. Por quê? Então eu coloquei os dois zero. E a razão pela qual eu queria fazer isso é porque acontecendo aqui, eu realmente quero escolher qual direção ele deve estar indo para cima ou para baixo, esquerda e direita. E a maneira que eu vou fazer isso é eu vou fazer então eu pego este número gerado aleatoriamente que eu tenho aqui e realmente vir a pensar sobre isso, eu provavelmente preciso adicionar, hum, algo para torná-lo estranho ou Mesmo eso eu vou torná-lo estranho ou mesmo com isso, também lá. Então agora podemos fazer o inimigo em movimento. E se o módulo é, se houver um restante, então ele fará uma coisa, e se não houver restante, ele irá para outra direção. Então, o primeiro cálculo. Então, se há um resto que eu sei adicionar no outro lá também eso o que queremos fazer. Queremos movê-lo para a esquerda e para a direita se não houver remanescente e se houver um restante, vamos movê-lo para cima e para baixo 50 chances da direção que ele vai tomar . E eu também quero levar a consideração. Quando eu faço esse cálculo, eu quero dar uma olhada e ver onde os jogadores estão localizados. E se o jogador for menor que a minha localização, vou mandá-los para lá. E se os jogadores vão b'more, então eu vou mandá-lo para o outro lado. Então eu vou fazer aqui. Vou fazer direção inimiga. X é igual a menos. Então a partir daqui ele vai realmente estar subtraindo a velocidade e outra outra declaração lá e o oposto vai ser adicionando na velocidade, então a direção vai ser o valor da velocidade. E então, é claro, isso pode mudar. E então aqui, alternativamente, eu vou fazer o sábio aqui. Então eu mudei todos esses dedos. Por quê? Então, devo dar-nos uma direção para entrarmos e logo antes de atrairmos o nosso inimigo. Agora aqui temos que acrescentar. Se isso aumenta tanto como o que fizemos aqui com as teclas, o teclado, onde adicionamos no jogador, temos que fazer o mesmo para o inimigo. Então inimigo X é igual a inimigo X mais direção inimiga X um inimigo y igual a inimigo. Por quê, além da direção inimiga? Por que e mais uma coisa. Eu quero realmente diminuir esse valor móvel para que possamos redefinir de vez em quando. Então, aproximadamente, seja qual for esse cálculo, esse é e quantos segundos eles fazem uma reinicialização, e sempre será aleatório. E a razão pela qual fazemos isso aleatório é para que ninguém possa realmente determinar, uh, qual será o padrão para o inimigo. Então eu percebi isso voltando para o inimigo. Eu nunca defini essa direção X e direção. Por quê? Então eu tenho que adicioná-los antes do trabalho, porque caso contrário ele está apenas substituindo este X e y. Então ele não está exatamente funcionando porque eu não configurou o objeto corretamente. Voltando aqui, revigorando que vemos que agora está funcionando corretamente onde temos nosso fantasma se movendo aleatoriamente, e ele está sempre se movendo em direção ao jogador. Nós queremos refrescá-lo novamente, fantasma diferente e esse movimento. Então, se não quisermos que ele fique parado, posso mudar esse valor aleatório em vez de ser cinco. Talvez eu possa mudar um mais um para que sempre haja um valor lá que está sendo retornado. E se você notar que agora são fantasmas estão realmente correndo para fora da tela. Eso temos que adicionar na mesma funcionalidade que tínhamos em nosso Pac Man quando saímos da tela que ele aparece do outro lado, modo que está chegando na próxima lição. 15. Ajustes de cálculo de jogo HTML5: Assim como o que tivemos que fazer para o nosso homem do PAC para impedi-lo de fugir do palco, temos que fazer a mesma coisa para o fantasma eso eu posso simplesmente copiar isso e depois atualizar o texto aqui. Então, depois de fazermos o cálculo, quero ter certeza de que não saímos da página. Então, primeiro 1 nós queríamos mudar todos esses jogadores contra o inimigo porque nós já fizemos isso. E muitas vezes quando você está usando motores diferentes que estão disponíveis, eles já têm esses tipos de coisas pré-construídas. Ou você pode criar sua própria biblioteca que faz esse tipo de coisa onde ele detecta automaticamente a altura com, e esses valores podem ser alimentados automaticamente em eso. Mas para o propósito desta lição, vamos ter isto assim. Então agora vai sair e refrescá-lo. Nós não devemos, uh, ir não devemos mais correr para fora da tela. E como você pode ver, hey realmente passar. Então isso é, uh, isso parece muito bom, tipo, provavelmente teria que atrasá-lo um pouco porque provavelmente vai ser bastante difícil de pegar e talvez até derrubar alguns desses números para fazê-lo mudar de direção um pouco mais rápido. Eu poderia me livrar disso e atrasá-lo um pouco lá. Então, apenas alguns pequenos ajustes e ajustes e você vai descobrir que você geralmente tem que fazer alguns ajustes para seus cálculos. Mas parece que está funcionando um pouco melhor. Foi um pouco mais continua descobrindo onde eu estou e ele está encontrando maneiras de chegar até mim neste é exatamente o que queremos dentro do nosso dedo do pé do jogo. Adicionar em desafios em nosso jogo nas próximas lições foram e falar sobre detecção de colisão eso que sabemos que quando realmente o fantasma realmente detectou nós colidiu com a gente. Nós vamos estar adicionando em nosso ponto power up para colocar que em algum lugar aleatoriamente na tela objetivo do jogo é fazer o Pac Man comer o ponto e, em seguida, comer o fantasma para marcar e para garantir que o realmente o fantasma não come o Pac Man e Esse será o resumo do nosso jogo. Eso, por enquanto. O que vamos fazer são as próximas lições. Então é apenas um pequeno ajuste na próxima lição. Vamos falar sobre adicionar esse ponto de energia e, em seguida, também fazer a detecção de colisão nas próximas lições. 16. HTML5 Jogo adicionando pílula de energia: dentro desta lição, vamos falar sobre adicionar em nosso power-up dot s Oh, este vai ser outro objeto que vamos colocar em nossa tela. E isso significa que devemos ir até aqui e reproduzir um desses objetos porque vamos precisar de alguns deles novamente. Então vamos precisar desses X e Y, não precisamos colocá-los em algum lugar aleatoriamente na tela. Nós também vamos precisar de um, uh, power up, então basta chamá-lo de power up. E por enquanto, vamos colocar isso em falso. E então agora nós vamos fazer Nós devemos mudar isso uma ondulação nosso Ele vai chamá-lo de ponto de poder Então nós vamos ter uma coordenada X e y para ponto de poder e nós vamos simplesmente desenhar um ponto se ligar zero, nós vamos desenhar esse ponto Vou fazer os cálculos para isso. Então, se estiver disponível, vamos desenhá-lo. E se não estiver disponível, então não vamos desenhá-lo. E quando não está disponível, significa que o homem do Pac comeu e não vamos mostrá-lo no momento. Então, descendo aqui, como fizemos com o fantasma. Quando o renderizarmos, quero fazer uma verificação rápida para ver se existe. Assim como fizemos com os fantasmas, vou fechar a roupa. Os são aqui em baixo. Minimize o polegar. Não ocupa tanto espaço na tela. E eu vou fazer uma verificação para ver se o ponto de energia está ligado. Ah, então se nele e isso é falso, o que deve ser por padrão, eu vou até aqui, vemos que nós configuramos o poder em falso. Então aqui podemos obter nossos cálculos aleatórios nós. Podemos definir o nosso power dot exe e poder dot y posição. E aqui de novo, vou usar o meu entorpecimento vai ser adicionado em 30 para eu não acabar no topo e o ponto de poder da unidade. E, claro, você pode ajustar o Thies para depender da tela. Estes valores eso dependendo. Se você alterar o tamanho da tela, ela também pode ser facilmente ajustada. Então, às vezes isso é uma boa idéia para manter o máximo que você pode dinâmico hum, fim de acomodar ajustes e salão eso Agora, uma outra coisa. Temos que definir isso verdadeiro para que não criemos um monte de pontos lá. Eso Agora nós fizemos o nosso cálculo lá para o ponto de energia e então agora nós podemos ir para baixo e nós estamos realmente indo para verificar para ver se o ponto de energia existe. E se isso acontecer, tudo isso aqui tem a ver com movimentar o inimigo. Então aqui, vamos ver se o ponto de energia existe. Então vamos desenhar isso na tela de acordo com a posição. Então não estamos necessariamente tendo isso da mesma maneira que estávamos fazendo essas imagens. Eso, Claro, se você tivesse uma imagem do ponto, você poderia incluir isso também. Mas para os propósitos do que estamos fazendo neste curso, Juan demonstra maneiras diferentes. Como desenhar na tela s. Outra maneira de desenhar no campus é novamente que o estilo Phil, porque queremos definir uma cor particular. Então eu quero ser amarelo para ser consistente com os jogos do Pac Man. Eu acredito que os adultos são provavelmente ah, cor branca ou amarela, mas para esta lição, vamos apenas mantê-lo amarelo. E agora o que precisamos fazer é desenhar um arco. Então precisamos desenhar um circular, ah dot circular moda eso. Normalmente, se você estiver desenhando na tela, desenhe um quadrado ou um retângulo. E se quisermos algo diferente disso, então temos que traçar os caminhos e secar os caminhos de onde queremos que as conexões sejam feitas. Então retângulos por padrão apenas indo para desenhar um retângulo rápido apenas para ilustrar como realmente é fácil fazer um retângulo e o que estamos fazendo novamente, semelhante ao que estamos fazendo antes com o desenho da imagem. Então estamos recebendo uma coordenada X e A Y. Então, se eu quisesse que este ponto específico para mostrar certa coordenada X e Y, eles poderiam fazer X e y, e então este é o com. Então a próxima coordenada será a largura. Então, se eu quisesse um ponto, que fosse 20 ou um retangular neste caso ou se eu quisesse um quadrado, eu poderia fazer 20 por 20 atualizá-lo e nós obtemos essa posição aleatória do quadrado, então não é ideal para o jogo que estamos fazendo porque eu quero ter isso como um nenhum arco em vez do retângulo é mais alguns passos que precisamos fazer. Para conseguir isso, podemos ver lá dentro do Manz doente um guia em ordem desenhada arcos fazemos o X, por que fazemos o raio, o início, ângulo e ângulo e se é anti-horário. Então nós temos esse tipo de valor aqui. Então 75 por 75. Então é aqui que o posicionamento é eso é 50 02 vezes pi e isso nos dá um objeto circular . E então tudo o que temos que fazer é preencher isso. E estamos fazendo essa coisa chamada começar caminho porque estamos desenhando na tela. Por isso, temos de incluir isso também. Então é contexto começar caminho, e isso permite que a tela saiba que você realmente vai começar a desenhar um caminho, e eu vou atualizar isso. Inclua esse pi de matemática vezes dois. E quando você está desenhando caminhos, você tem que realmente fechar o caminho depois de você, você terminou de desenhar com ele. E depois de fechá-lo, esse é o ponto em que você pode preenchê-lo. Então isso deve nos dar um círculo voltando para o guia aqui. Há ângulo de partida e ângulo e, hum, o anti-horário. Então eu quero realmente, eu preciso definir o ângulo inicial para zero, e eu acho que isso deve, uh, deve corrigir isso um pouco. Claro, o problema aqui, também, também, é que eu tenho retângulos preenchidos. Eu tenho que mudar isso para Arc eso meu raio vai ser 20 o que provavelmente vai ser um pouco maior do que eu preciso, mas por enquanto, isso deve estar tudo bem. Oh, sim, sim, definitivamente maior do que o que eu quero. E eu provavelmente quero mudar isso para ser branco. Vamos fazer isso um pouco menor. Refresque. É assim que isso nos dá o nosso ponto de poder e nas próximas lições, vamos falar sobre como podemos determinar se o homem do Pac está comendo o ponto e se o homem do Pac está comendo o fantasma, então algumas coisas muito legais chegando nas próximas lições 17. Detecção de colisão de jogo HTML5: Então, a primeira coisa que eu quero fazer é adicionar a detecção de colisão com o ponto power up ativado dentro do nosso jogo. Então essa é uma das coisas que queremos adicionar quando o homem do Pac passa por cima do ponto ele realmente consegue comer a detecção de colisão de ponto eso na tela. Você tem que fazer um pouco de cálculo e isso novamente, isso vai ser algo que vai levar um monte de declarações condicionais. Eso só olhando para provavelmente onde o melhor dedo da polícia adicionar neste ponto de poder é talvez depois de termos mudado as coisas. Quando movemos nosso inimigo, temos todos esses cálculos. Quando movemos nosso inimigo, Então aqui dentro vamos fazer conluio, e isso vai ser uma declaração bastante grande e então, claro, teremos que fazer uma para o fantasma também. Então, se você estiver usando um dos mecanismos JavaScript, geralmente eles têm esse tipo de coisas embutidas porque há muitas partes repetitivas do código. E se você está fazendo qualquer tipo de tiro qualquer tipo de balas ou algo assim que realmente se torna complexo porque você vai ter um monte de colisões a fim de detectar. E a única maneira de detectar colisões é também calcular onde seus jogadores estão localizados. E neste caso, onde nosso ponto de energia está localizado e, claro, temos que fazer um menos 10 nele. E neste caso, onde nosso ponto de energia está localizado e, claro, Ou talvez pudéssemos fazer um menos cinco porque é esse o nosso raio do ponto de poder. Então nós temos que subtrair metade do raio porque este é um ponto central, modo que X e Y dentro da arca são é um ponto central, e ele sai 10 em torno dele. Então talvez tenha sido correto que o raio era 10. Então isso está detectando para ver se as coordenadas dos jogadores são menores que as coordenadas dos pontos de energia . E nós também temos que verificar para ver se o ponto de poder X é menor que os jogadores X. E aqui temos que adicionar ah, 16 novamente para obter esse ponto central e fazer outra verificação aqui para ver se os jogadores por coordenar é menor ou igual ao Por que Bayous, Ted e mais um cheque para ver Power Dot? Por que é menos então, jogador? Por que mais 16. E se isso for verdade, então, por agora, vamos apenas fazer logout do console eso Esperemos que este cálculo crie uma área quadrada que verifica se o jogador e o ponto de poder estão dentro desse mesmo espaçamento e Refresque isso. E espero que agora, quando eu passar por cima, tenhamos um sucesso, o que parece não estar a fazer-nos. Há algo errado com o cálculo? Mas conseguimos um sucesso lá, então está um pouco fora. Então temos que fazer os limites reais um pouco maiores. Então eu vou apenas trazer isso para cima, também 16 e novamente, há sempre diferentes ajustes que você precisa fazer. Então parecia que estava um pouco fora lá. Essa não é provavelmente a melhor posição do ponto de poder que parecia um pouco melhor lá. Há sempre ajustes com os cálculos, então parece que é ah, os limites são bastante bons. Precisamos provavelmente um pouco deste lado do ponto. Então o que eu posso fazer para torná-lo um pouco maior. Aumente esse limite. Então a questão estava vindo do lado esquerdo e, na verdade, isso. Então acabei atualizando o código. O cálculo teve que remover aquele ponto de potência menos 10 e, em seguida, também para X e Y. E agora parece que o hit é mais preciso. Quando chego perto do ponto, quando toco no DOT, dá-me uma batida, e é exatamente isso que eu quero. dedo do pé acontece dentro do meu código. Então, sempre que estou tocando na taxa imediatamente, eu recebo o sucesso. E sempre há esse cálculo e trabalhar com ele, é onde eu costumo usar o log do console para me ajudar com os diferentes cálculos e determinar quando estou vendo um hit. O Eso. Agora que eu tenho esse sucesso funcionando, eu posso continuar escrevendo o código e eu poderia fazer algo acontecer uma vez que a colisão é detectada e uma das coisas que eu quero que o dedo do pé aconteça é, eu quero que o dedo do pé fantasma realmente mude, e novamente, esta é uma boa razão pela qual usamos tudo dentro de um arquivo PNG, onde eu posso facilmente mudar para uma cor diferente e usá-lo em vez disso. Então, o que eu vou fazer por esse poder, eu vou definir esse 12 falso porque eu não quero mostrar mais isso. Eso, o ponto de poder agora é falso. E eu posso adicionar mais alguns objetos aqui dentro do ponto de poder Eso nós tínhamos aquele falso lá. Quero ter uma contagem regressiva. E agora eu estou definido esse zero e outro que eu quero é ser capaz de armazenar um valor para o antigo número fantasma. Eu adicionei esses valores e vou reutilizar o polegar aqui. Então, de novo , vou marcar um número de contagem decrescente usando pontos de energia e este também. Então nossa contagem regressiva vamos para 500. Eu também vou pegar o número do fantasma, e eu vou pegar esse número de fantasma velho e guardá-lo lá dentro. E a razão de eu estar fazendo isso é porque eu realmente vou mudar a cor dele. E eu preciso saber qual era a cor original do fantasma, a fim de mudá-lo de volta após a contagem decrescente terminar. Então esta é a contagem regressiva enquanto o fantasma vai ser comestível pelo homem do PAC e agora posso definir este número fantasma e já sei qual número preciso enviá-lo. Eu tenho que configurar 384 para ser o fantasma azul e p ponto x. então eu vou tirar isso do caminho para que não haja colisões com ele. E então agora quando eu voltar para fora quando eu comer o ponto o ponto disse desaparecer eo fantasma para virar azul eso monte de coisas que ainda precisamos adicionar em Eu quero que ir pilhas para ser piscando Eu quero que vai fugir de mim em vez de vir em minha direção em E Então também temos que adicionar a detecção de colisão com o fantasma, então tudo está chegando nas próximas lições. E então, é claro, não queremos que este ponto apareça enquanto a contagem regressiva ainda está acontecendo. Eso queremos que o ponto reapareça após a contagem regressiva terminar 18. Funções de powerup de jogo HTML5: Então dentro desta lição, vamos fazer o fantasma piscar para frente e para trás. E a maneira que eu vou fazer isso é eu vou passar de um para outro. E também vamos usar as duas variações fantasmas diferentes. Então tem seus olhos realmente movendo eso para frente e para trás entre aqueles dois nadando para definir um novo valor aqui. E eu vou chamar este flash realmente vai dar um valor de zero e ir para cá. E quando estamos escrevendo na Oates, eu faço um flash lá dentro, e isso vai tornar este um dinâmico, e então nós vamos simplesmente fazer tipo de como o que fizemos aqui quando estávamos mudando a boca abrindo e fechando. E este é o que eu estou procurando por aqui, então vamos fazer uma verificação rápida para ver se é o papel que ele está em, e então dependendo da estrada em que ele está, nós vamos realmente ajustar a imagem que está sendo exibida Se este for igual a zero, então vamos defini-la como 32 e, caso contrário, não é igual a zero. Vamos definir igual a zero. Então isso deve nos dar a habilidade de ter os olhos fantasmas se movendo quando passarmos por cima. Quero dizer, isso é um pouco de movimento demais. Mas agora temos o fantasma a piscar, por isso podemos pô-lo. Podemos configurá-lo para remover daqueles olhos se movendo, se quisermos. Isso é oh, talvez isso seja um pouco rápido demais também nós. Talvez não queiramos fazer isso necessariamente. Eso A outra opção aqui é ver se ele está ligado e, em seguida, dependendo do que o power up é, então podemos mudar para frente e para trás. Então vamos. Ou podemos adicionar isto dentro da nossa contagem regressiva. E, hum porque nós temos uma contagem regressiva lá que nós vamos estar em contagem regressiva. Então talvez possamos adicionar isso dentro da contagem decrescente. E quando a contagem regressiva terminar, não vamos mais trocar entre os dois, então vamos fazer assim. Então eu vou adicionar nesta contagem regressiva uma verificação da contagem lá em baixo e ver se é maior que zero. E se for, então vamos continuar com a contagem regressiva para chegar a zero. E vou acrescentar outro valor aqui no inimigo e vou chamá-lo de “Come Fantasma”. E eu vou definir isso muito falso e indo para aqui sempre que tivermos nossa detecção de colisão , eu vou definir pontos de energia. O calor fantasma é igual a verdadeiro. Enquanto o tempo estiver ligado, vamos ter como verdade. E a razão pela qual não podemos realmente usar a contagem regressiva é porque precisamos ser capazes diminuir isso. E nós precisamos ter algo para acontecer uma vez que ele atinge zero eso provavelmente algumas maneiras diferentes de alcançar isso. Mas por enquanto, o que vamos fazer é dizer que se este for verdade, então vamos continuar com a contagem regressiva até que o que vamos fazer é dizer que se este for verdade, então vamos continuar com a contagem regressiva até que a contagem regressiva chegue a menos de zero. E uma vez que atinge menos de zero, e então é aqui que vamos redefinir tudo. Então vamos mudar este para igual falso. Vamos mudar o número do fantasma de volta para o original que tínhamos definido. Então, um número de fantasma. Então isso vai mudar sua cor de volta e precisamos adicionar mais uma coisa aqui que precisamos verificar se isso existe e nós temos dedo do pé tem para que não estamos definindo esse ponto Você acabou de colocar isso menos ou menos de cinco. Então, agora, quando eu comer o ponto, deve haver uma contagem regressiva e eventualmente ele deve voltar à sua cor normal. E depois recuperamos a nossa filha. Então agora temos nossa funcionalidade básica do jogo. Precisamos adicionar a detecção de colisão com o fantasma, e também precisamos adicionar a habilidade de o fantasma fugir de mim assim que eu comer o DOT. Então isso é Ah, isso está chegando na próxima lição. 19. Fantasma de fuga de jogo HTML5: Então o que eu quero definir nesta lição é que eu quero que aquele fantasma realmente mude de direção quando foram comidos o ponto quando a colisão foi detectada, queremos que o fantasma mude de direção, e isso vai ser relativamente fácil de fazer. Eso Nós vamos fazer isso aqui onde nós estamos realmente definindo os valores e nós podemos fazer algo simples aqui onde nós vamos realmente apenas multiplicar a velocidade inimiga por um negativo. Se isso for verdade, então voltando aqui, vamos verificar se então voltando aqui, vamos verificar se o Power Dot Ghost come é verdade. E se for verdade, então vamos tomar a nossa velocidade. Vamos igualá-lo pela velocidade, mas multiplicado por um negativo, e isso nos dará o valor oposto do que tínhamos aqui. Então isso nos dá o valor oposto do que estava acontecendo aqui por padrão em. Isso é exatamente o que queremos. Então quero que ele vá na direção oposta. Assim que eu comer isso, ele deve começar a se afastar de mim, que é exatamente o que está acontecendo. Então é exatamente isso que queremos porque queremos ser capazes de persegui-lo e agora queremos ter uma detecção de colisão para verificar. Se estamos correndo para o fantasma eso, está chegando na próxima lição. 20. HTML5 jogo acertar o fantasma de teste: Como se tivéssemos a nossa detecção de colisão com o ponto de energia, precisamos de ter uma detecção de colisão com o fantasma também. Então essa foi a detecção de colisão de energia. E esta vai ser a detecção de colisão de fantasmas. E então nós só temos que fazer algumas atualizações, e nós provavelmente vamos ter que fazer alguns cálculos re também. Por isto. Isso pode não ser exatamente os mesmos valores. Foi um sucesso ali. E talvez, por agora, não nos mudemos. Mova o fantasma ao redor eso apenas em um comentário para usar haute para remover o seu movimento. Refresque-o. E agora devemos ser capazes Teoh. E esta é obviamente uma maneira melhor de detectar as colisões só para ter certeza de que tudo está exatamente onde precisamos que ele esteja. E parece que está. Vai estar desligado de novo. Então estamos pairando por aqui. Estamos vendo que não estamos recebendo, ah, as colisões que precisamos. As colisões estão ligeiramente fora e para cima, então há alguns pequenos ajustes. Temos que fazer uma colisão mover-se ligeiramente, e é só que não é um espaço grande o suficiente que estamos ocupando eso Temos que fazer alguns ajustes nisso. Então eu fiz alguns ajustes para ele e ele realmente parece que ele está funcionando muito melhor, alguns vindo da esquerda e da direita e, em seguida, do fundo. Eu ainda preciso fazer um ajuste na parte inferior em seguida, bem para o topo. Então isso parece mais ou menos correto. Há então eu tenho que tomar este mesmo ajuste que eu fiz e ajustar este aqui, ter um valores maiores que temos uma área maior hit. Então eu vou fazer o mesmo valor lá de 26. Volte para baixo. E agora, quando eu entrar de baixo, devo acertar o fantasma assim que eu tocar nele. Então tudo parece muito bom com a detecção de colisão s agora, ele pode criar algumas funcionalidades adicionais sobre o que vai acontecer quando detectarmos a colisão. Eso Uma das coisas que queremos fazer é verificar se é realmente o jogador que vai ganhar ou se é o fantasma que vai ganhar e a maneira que vamos fazer isso é se isso for verdade, então nós sabemos o jogador marca e então nós sabemos que o inimigo marca. E assim tivemos as pontuações que fizemos no início. A pontuação G é para o fantasma. A pontuação é para o jogador, então voltando para onde eu adicionei isso. Então eu vou incrementar a pontuação g. Se é o fantasma e o placar, se é o jogador que deve ganhar os pontos. Então agora devemos ver algo acontecer com os pontos. E então se eu comer o ponto e se eu for em cima dele, eu deveria ver um aumento na minha pontuação. Eso Isso está funcionando exatamente da maneira que precisamos que ele funcione. Agora vou sair daqui antes que eu faça o fantasma se mexer de novo. Eu preciso adicionar mais algumas coisas aqui porque, como vimos, não é exatamente o ideal que a pontuação continue subindo. Nós temos que realmente redefinir tudo eso que podemos adicionar em outra nova função que poderia fazer a redefinição dos valores para o jogador e uh, e assim por diante. Ou podemos simplesmente adicioná-los aqui porque sabemos que temos detecção de colisão acontecendo eso De qualquer maneira, que queremos fazer é redefinir os locais, então eu vou apenas adicionar isso aqui no fundo. E novamente, isso depende do quê? Suas preferências. Quando essa ação em particular acontece, tudo o que estou fazendo aqui é aumentar a pontuação. O que vou fazer é simplesmente redefinir as posições deles. Então vai reiniciá-lo, Teoh o jogador para 10 e 100 e então eu tenho que reiniciar. O inimigo é X, então vou colocá-lo na mira para 300 e o inimigo. Por quê? Eu vou tocar alguns em 200 e talvez eu possa até definir isso para falso. E então eu tenho que lembrar também que eu preciso redefinir alguns desses valores aqui. Então talvez o que eu possa fazer é que eu possa definir aquele zero deixar aquele um e deixar esta função em particular lidar com isso. Então, voltando para trás, para que nos redefina automaticamente quando a colisão é detectada. E, claro, isso ficará muito melhor quando o fantasma estiver se movendo novamente. Vai fazer muito mais sentido. Então parece que tudo está funcionando como precisamos. E agora podemos remover as amarras do fantasma e deixá-lo realmente se mover . Então, haverá liberdade para se movimentar. Eso, estamos fugindo dele, então o fantasma marca. E então, claro, quando eu comer o ponto, então ele vai fugir de mim, tentar fugir e então há algumas outras coisas eso Talvez eu possa ajustar minha velocidade onde eu posso acelerar meu cara uma vez Eu como o ponto power-up Então nós vamos apenas fazer alguns pequenos ajustes e ajustes nas próximas lições, bem como, para tornar o jogo um pouco mais fácil de jogar. 21. Jogo HTML5 ajustando o jogo: então alguns pequenos ajustes que ainda precisamos cuidar dentro do jogo. E um deles é um piscar de olhos. Então, queremos remover um pouco desse piscar de olhos e queremos manter o piscar de branco e azul quando estamos realmente perseguindo eso. Há algumas maneiras diferentes de fazer isso. Podemos fazê-lo piscar e podemos fazer com que os olhos se movam mais devagar se quisermos. Então poderíamos fazer algum tipo de contagem decrescente aqui. Ah, e sempre que contar até zero, podemos definir isso. Então eu vou simplesmente adicionar em outro valor aqui. Chamo-lhe contagem de piscar e vou dar-lhe um valor de 10 e depois mudar-me para cá . E se a contagem piscar for maior que zero. E agora vou incrementar isso ou diminuir isso. E então aqui eu posso colocar em outra coisa. E também posso redefinir isso para ser 10 novamente ou qualquer valor que quisermos definir. Isto está a fazer com que os olhos se movam mais devagar. E então, é claro, o piscar também é mais lento. Então até disse que pode ser para 20. Então isso tem um movimento mais lento dos olhos. E também, quando chegarmos ao nosso poder do botão, será mais lento também. Então parece muito mais natural que diminuímos a velocidade. E outra coisa que só para ajustar que eu quero aumentar a velocidade de. Quero aumentar a velocidade do jogador uma vez que tenha havido um power up. Então, indo todo o caminho até aqui. Alguns têm uma detecção de colisão que estamos fazendo velocidade de jogador igual a 10 e então aqui vamos trazê-lo de volta para 5. Claro, há maneiras diferentes de ajustar isso. Então, agora, quando comemos isso, remover muito mais rápido e nos dá a possibilidade de pegar o fantasma muito mais fácil e novamente , um monte desses ajustes seu ah, para a capacidade de jogabilidade. Então, em cada jogo criado, você deve testá-lo para ter certeza de que ele está funcionando da maneira que você precisa para funcionar . Então, novamente, esses pontos de poder parecem estar aparecendo um pouco alto demais. Então eu tenho que ir até o ponto onde criá-los verificar sua na tela, e este foi o problema lá que eu precisava adicionar em que mais 30. Então agora eles devem aparecer abaixo desse espaço que não deve mais aparecer acima. E até mesmo para atualizar o jogo, você não em vários fantasmas em, eles poderiam operar independentemente uns dos outros em. Então novamente, uma vez que eles pegarem o botão liga/desliga, então você pode perseguir qualquer um desses. 22. Jogo HTML5 adicionar um segundo inimigo: Então, agora dentro do jogo, vamos realmente adicionar um segundo fantasma. Então, vamos ligar para o inimigo também, também, para tornar isso muito simples. E podemos usar a maioria dos mesmos valores lá. E agora, quando estamos nos referindo a ele. Então aqui estamos verificando para ver se ele existe. Então eu preciso voltar aqui e fazer algo assim. Então tudo o que fizemos precisa ser reproduzido para o segundo inimigo. E você pode até mesmo criar loops e um aumento se você quiser, a fim de realmente construir vários inimigos. Mas, para os propósitos, a lição estava tentando mantê-lo simples, e vamos ver se este existe. E então, é claro, temos toe duplicar tudo isso e também duplicar a imagem. E um pouco disso não precisamos duplicar. Nós podemos apenas fazer. E não precisamos duplicar esse cheque porque isso vai ser universal para ambos. E claro, Ah, por aqui também. Então, onde quer que estejamos mencionando isso, só precisamos duplicar isso. E este, nós provavelmente temos que adicionar um segundo valor lá. Então, um esquilo de volta lá antes de esquecer e adicionar e ver o que é Ah, Isso parece até agora. Então, há nosso segundo inimigo Eso. Ele ainda não está se movendo. Mas quando comemos os pontos de algo deu errado lá também. Então, voltando lá para fora, então refresque isso. E espero que desta vez ambos se mudem. Então, ambas as casas ficaram azuis, então não temos a detecção de colisão ainda disponível. Então precisamos que ele se mova. Então, novamente, é ah blotter duplicando aqui. E, claro, há outras maneiras de fazer isso aqui. Então, na verdade, este não precisamos necessariamente duplicar porque precisamos de Teoh duplicar toda a detecção de colisão. Portanto, não se aplicará necessariamente a ambos. Isso foi um exemplo em que diferenciamos entre os dois, mas aqui, vai ser a mesma coisa aqui que vai acontecer. E agora para acrescentar esse movimento, é um movimento de novo. E agora para acrescentar esse movimento, Há um pouco no movimento. haver “O “talvez uma maneira melhor. Se estávamos criando vários inimigos, criar algum tipo de função em torno deles, mas, novamente , por enquanto, vamos simplesmente duplicar isso. Então, apenas tentando adicionar o segundo inimigo rapidamente, eso vai certificar-se de que ele não corre para fora da tela. Isso vai mantê-lo se movendo de novo. Isso foi S O. Esta é a direção que eles vão estar indo e o inimigo se movendo vai ser a contagem regressiva. E logo que todas as mesmas propriedades que aquela anterior, onde temos a direção, temos velocidade para que eles possam ter velocidades diferentes e operar independentemente um do outro. Eu posso ter perdido algumas coisas, então eu vou rapidamente passar por aqui e depois fazer uma verificação só para ter certeza de que está funcionando. Não tenho certeza, exatamente. Claro que vou saber qual é qual. Então eu penso o que eu preciso fazer. Eu tenho que abrandar o movimento deles porque eles são bastante rápidos, e é muito difícil pegá-los de fato. Então isso é outra coisa que eu deveria ajustar com ele. E, claro, quando você está fazendo o jogo, você não quer torná-lo muito fácil, mas você não quer torná-lo muito difícil também. Então, indo lá fora, eu vou atrasá-los. Só um toque. E também, você poderia fazer algo onde ele está subindo de nível. Então, dependendo Então quão maney, quantos o placar é, isso pode mudar. E esse tipo de coisa pode ser dinâmico. Um grande número de fantasmas também pode ser dinâmico. Eso você poderia realmente construir um monte de funcionalidade aqui. Outra coisa que eu poderia fazer é, uh, sempre que nós ligamos que talvez eu poderia fazer com que eles até mesmo abrandar um pouco que eles possam ser mais fáceis de pegar. Então, dentro da próxima palestra, eu vou incluir todo o código-fonte para isso. É tudo baseado em javascript. Todo o tribunal é javascript. Eso você poderia trazer esse código JavaScript e até mesmo criar sua própria imagem com um detalhamento de diferentes inimigos e, em seguida, Pacman eso os que estamos usando agora são os primeiros para os fantasmas e, em seguida, todos os movimentos Pac Man e todos apenas o para o azul e o branco para os fantasmas aqui quando ele está ligado. Então, novamente, há um monte de opções diferentes aqui que estão disponíveis para nós, e você é bem-vindo para construir o código como você precisa e criar sua própria versão do mesmo jogo, usando isso como uma base za para construir sua própria versão do este jogo.