How to develop ping-pong Ping Pong games by Html5
This article introduces Html5 how to develop ping-pong Ping Pong games, the content is very detailed, interested friends can refer to, hope to be helpful to you.
In this chapter we will:
Prepare development tools
Build our first game-Ping Pong
Learn to use the Jquery JavaScript library for basic positioning
Get keyboard input
Creating the Ping Pong game with scoring
What we are learning is a ping-pong game in which two players play a keyboard game.
So, let's start creating our game now.
Prepare the development environment
HTML5 game development is similar to website development. We need a web browser and a good text editing tool.
Many text editing tools are excellent, just use what you like. If you don't, I recommend that you use Notepad++, a small and fast editing tool. With regard to browsers, we need a browser that supports HTML5,CSS3 features and provides us with debugging tools.
There are several browsers to choose from: Apple Safari (http://apple.com/safari/), Google Chrome (http://www.google.com/chrome/),Mozilla Firefox (http://mozilla.com/firefox/), and Opera (http://opera.com), all of which support the features we need.
Prepare the HTML document
Every website, page, and Html5 game starts with the default HTML document. This HTML document starts with the basic HTML code. We will also start our HTML5 game development from index.html.
Action time
We will create our HTML5 ping-pong game from scratch. It sounds like we have to prepare everything ourselves, but fortunately at least we can use the JavaScript library to help us. Jquery is such a JavaScript library and we will use it in all the examples. This will help simplify our JavaScript logic:
1. Create a new folder called pingpong
2. Create another folder called js in the folder
3. Download jQuery, https://www.yisu.com/jiaoben/58.html.
4. Select Production and click DownloadJquery.
5. Save jquery-1.7.1.min.js in our newly created 2 folder
6. Create a new file called index.html and save it to the folder created by 1.
7. Open the index.html file with a text editor and insert an empty HTML template:
The code is as follows:
Ping Pong
Ping Pong
This is an example of creating a Ping Pong Game.
8. Reference the jQuery file before the end tag of body
The code is as follows:
