Features A few words about structure of game

Algorithm and idea was taken from article Canvas шаг за шагом: ПОНГ. The game is implemented using the new HTML5-element Canvas, which can be used to draw graphics using JavaScript. User interface realized on css-framework Rainbow for Lana v0.1.0.

What is Ping-Pong?

Ping-Pong - is a sport in which two or four players hit a lightweight ball back and forth using a table tennis racket. The game takes place on a hard table divided by a net. Except for the initial serve, players must allow a ball played toward them only one bounce on their side of the table and must return it so that it bounces on the opposite side. Points are scored when a player fails to return the ball within the rules. Play is fast and demands quick reactions. Spinning the ball alters its trajectory and limits an opponent's options, giving the hitter a great advantage. When doing so the hitter has a good chance of scoring if the spin is successful.

from Wikipedia

HTML Basic markup

The basis of markup is only one tag canvas with attribute #game.

JavaScript Application core

Base script contains a set of methods for draw and reload, cursor position tracking, object interaction during collisions. List of methods:

• init() - method for initializing variables and parameters. Run method play() and sets to him update interval.
• draw() - method for drawing playing field and game objects.
• rect() - class for creating and drawing game objects.
• playerMove() - method that monitors cursor and controls position racket player.
• update() - method movement game objects and update playing field.
• play() - method that run methods draw() and uptade()
• collision() - method that analyzes the collision objects.
• aiMove() - AI method, which is responsible for logic of movement rackets computer.

Details, see comments in the code.

Author

Made with love in Ukraine. Follow me on GitHub: