Commentaire: Il s'agit d'un jeu de ping-pong avec 2 joueurs utilisant une compétition de clavier; Dans ce chapitre, nous allons: 1. Préparer l'outil de développement 2. Construisez notre premier jeu - Ping Pong 3. Apprenez à utiliser la bibliothèque JavaScript JQuery pour le positionnement de base 4. Obtenez la saisie du clavier
Dans ce chapitre, nous allons:
Préparer des outils de développement
Construisez notre premier jeu - ping-pong
Apprenez à utiliser la bibliothèque JavaScript JQuery pour le positionnement de base
Obtenez la saisie du clavier
Créer le jeu de ping-pong avec un score
Les captures d'écran suivantes du jeu sont les résultats de notre étude dans ce chapitre. C'est un jeu de ping-pong avec 2 joueurs jouant sur un clavier.
Alors, commençons à créer notre jeu maintenant.
Préparez-vous à l'environnement de développement
Le développement du jeu HTML5 et le développement de sites Web sont similaires. Nous avons besoin d'un navigateur Web et d'un excellent outil d'édition de texte.
De nombreux outils d'édition de texte sont excellents, utilisez simplement ce que vous aimez. Si vous n'en avez pas, je vous recommande d'utiliser Notepad ++, un petit outil d'édition rapide. En ce qui concerne les navigateurs, nous avons besoin d'un navigateur qui prend en charge les fonctionnalités HTML5, CSS3 et peut être fourni avec des outils de débogage.
Il existe plusieurs navigateurs parmi lesquels choisir: Apple Safari (), Google Chrome (), Mozilla Firefox () et Opera (), qui prennent tous en charge les fonctionnalités dont nous avons besoin.
Préparer des documents HTML
Chaque site Web, page et jeu HTML5 commence par le document HTML par défaut. Et ce document HTML commence par le code HTML de base. Nous commencerons également notre développement de jeux HTML5 avec index.html.
Temps d'action
Nous allons créer notre jeu HTML5 Ping Pong à partir de zéro. Il semble que nous devons tout préparer nous-mêmes, et heureusement, au moins, nous avons pu nous aider avec la bibliothèque JavaScript. JQuery est une bibliothèque JavaScript que nous l'utiliserons dans tous nos exemples. Cela aidera à simplifier notre logique JavaScript:
1. Créez un nouveau dossier appelé Pingpong
2. Créez un autre dossier appelé JS dans le dossier
3. Téléchargez jQuery.
4. Sélectionnez la production et cliquez sur Télécharger JQuery.
5. Enregistrer jQuery-1.7.1.min.js dans le dossier que nous avons créé 2
6. Créez un nouveau fichier nommé index.html et enregistrez-le dans le dossier créé par 1.
7. Ouvrez le fichier index.html avec un éditeur de texte et insérez un modèle HTML vide:
<! Doctype html>
<html lang = "en">
<adal>
<meta charset = "utf-8">
<Title> Ping Pong </Title>
</ head>
<body>
<dique>
<h1> ping pong </h1>
</-header>
<foomer>
Ceci est un exemple de création d'un jeu de ping-pong.
</fooder>
</docy>
</html>
8. Reportez-vous au fichier jQuery avant la balise de fin du corps
<script src = js / jQuery-1.7.1.min.js> </ script>
9. Enfin, nous voulons nous assurer que JQuery est chargé avec succès. Nous plaçons généralement le code suivant pour vérifier après le fichier jQuery avant la balise de fin du corps:
<cript>
$ (function () {
alerte (bienvenue à la bataille de ping-pong.);
});
</cript>
10. Enregistrer index.html et ouvrez-le avec votre navigateur. Nous devrions voir la fenêtre d'invite suivante. Cela signifie que notre jQuery est réglée correctement:
ce qui s'est passé?
Nous avons juste créé une page HTML5 de base avec jQuery et nous nous sommes assurés que jQuery est chargé correctement.
Nouveau doctype html5
Les balises Doctype et Meta sont simplifiées dans HTML5.
Dans HTML4.01, nous déclarons que Doctype nécessite le code suivant:
<! Doctype html public "- // w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd">
C'est long, non? Cependant, dans HTML5, la déclaration de DocTyp est beaucoup plus simple:
<! Doctype html>
Nous n'avons même pas déclaré la version HTML, ce qui signifie que HTML5 sera compatible avec les versions HTML précédentes et que les versions HTML futures prendront également en charge les versions HTML5.
Les étiquettes de méta ont également été simplifiées. Nous utilisons maintenant le code suivant pour définir le jeu de caractères HTML:
<Meta Charset = UTF-8>