Comentário: É um jogo de pingue-pongue com 2 jogadores usando uma competição de teclado; Neste capítulo, faremos: 1. Prepare a ferramenta de desenvolvimento 2. Construa nosso primeiro jogo - Ping Pong 3. Aprenda a usar a biblioteca JQuery JavaScript para o posicionamento básico 4. Obtenha a entrada do teclado
Neste capítulo, iremos:
Prepare ferramentas de desenvolvimento
Construa nosso primeiro jogo - pingue -pongue
Aprenda a usar a biblioteca JQuery JavaScript para posicionamento básico
Obtenha entrada do teclado
Criando o jogo de pingue -pongue com pontuação
As capturas de tela a seguir do jogo são os resultados do nosso estudo neste capítulo. É um jogo de pingue -pongue com 2 jogadores jogando em um teclado.
Então, vamos começar a criar nosso jogo agora.
Prepare -se para o ambiente de desenvolvimento
O desenvolvimento de jogos HTML5 e o desenvolvimento de sites são semelhantes. Precisamos de um navegador da Web e uma excelente ferramenta de edição de texto.
Muitas ferramentas de edição de texto são excelentes, basta usar o que você gosta. Se você não tiver um, recomendo que você use o Notepad ++, uma pequena e rápida ferramenta de edição. Em relação aos navegadores, precisamos de um navegador que suporta recursos HTML5, CSS3 e pode receber ferramentas de depuração.
Existem vários navegadores para escolher: Apple Safari (), Google Chrome (), Mozilla Firefox () e Opera (), que suportam os recursos de que precisamos.
Prepare documentos HTML
Todo site, página e jogo HTML5 começa com o documento HTML padrão. E este documento HTML começa com o código HTML básico. Também iniciaremos nosso desenvolvimento de jogos HTML5 com index.html.
Tempo de ação
Criaremos nosso jogo HTML5 Ping Pong do zero. Parece que temos que preparar tudo nós mesmos e, felizmente, pelo menos fomos capazes de nos ajudar com a biblioteca JavaScript. JQuery é uma biblioteca JavaScript que a usaremos em todos os nossos exemplos. Isso ajudará a simplificar nossa lógica JavaScript:
1. Crie uma nova pasta chamada pingpong
2. Crie outra pasta chamada JS na pasta
3. Baixe o jQuery.
4. Selecione Produção e clique em DownloadJQuery.
5. Salvar jQuery-1.7.1.min.js na pasta que criamos 2
6. Crie um novo arquivo chamado index.html e salve -o na pasta criada por 1.
7. Abra o arquivo index.html com um editor de texto e insira um modelo HTML vazio:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> ping pong </title>
</head>
<Body>
<header>
<H1> ping pong </h1>
</header>
<wower>
Este é um exemplo de criação de um jogo de pingue -pongue.
</rodapé>
</body>
</html>
8. Consulte o arquivo jQuery antes da etiqueta final do corpo
<script src = js/jQuery-1.7.1.min.js> </script>
9. Finalmente, queremos garantir que o jQuery seja carregado com sucesso. Geralmente colocamos o código a seguir para verificar após o arquivo jQuery antes da etiqueta final do corpo:
<Cript>
$ (function () {
alerta (bem -vindo à batalha de pingue -pongue.);
});
</script>
10. Salvar index.html e abra -o com seu navegador. Devemos ver a seguinte janela rápida. Isso significa que nosso jQuery está definido corretamente:
o que aconteceu?
Acabamos de criar uma página básica HTML5 com jQuery e garantimos que o jQuery seja carregado corretamente.
Novo Html5 Doctype
As tags Doctype e Meta são simplificadas no HTML5.
No HTML4.01, declaramos que a Doctype exige o seguinte código:
<! Doctype html public "-// w3c // dtd html 4.01 // pt" "http://www.w3.org/tr/html4/stritt.dtd">
É longo, certo? No entanto, no HTML5, a declaração de Doctyp é muito mais simples:
<! Doctype html>
Nem declaramos a versão HTML, o que significa que o HTML5 será compatível com as versões HTML anteriores e as futuras versões HTML também suportarão versões HTML5.
As metatags também foram simplificadas. Agora usamos o código a seguir para definir o conjunto de caracteres HTML:
<meta charset = utf-8>