Skip to content
HTML + CSS + JavaScript tennis game
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.editorconfig
.eslintignore
.eslintrc
.gitattributes
.gitignore
.htmlhintrc
.htmlminifierrc
.stylelintrc
LICENSE
README.md
package-lock.json
package.json
postcss.config.js

README.md

DOM Tennis

A browser game using HTML, CSS and vanilla JavaScript.
The goal of the game is to kick the ball with the cursor over and over without touching the floor.

The game is developed without using any game framework, nor using canvas neither WebGL, just for the sake of testing the performance with the DOM at 60 fps.

🎾 Play it now!

Getting Started

You will need node.js v6.9.2 or greater installed on your machine.

Clone the repository, open the folder in the terminal and run the following commands:

  • npm install (will install all dependencies listed at package.json.
  • npm run build (will generate game files at dist/ folder).

Development

The entry point of the game is the file src/index.html. There we found all the screens of the game.

Some "modern" features of CSS are used, such variables and nesting. With the help of PostCSS, compatible CSS is generated for old and current browsers.

JavaScript is written using features of ECMAScript 2015+ and transpiled with Babel. The game is rendered using the DOM and the HTML elements are animated using CSS.

Available NPM Commands

npm run build
Generate CSS files and copies HTML and JS files to dist/ folder.

npm run build:prod
Cleans dist/ folder, lints HTML, CSS and JS files, generate CSS files and minifies all files into dist/ folder.

npm run lint
Lints HTML, CSS and JS files.

npm run clean
Cleans dist/ folder.

npm run watch
Watches for changes in src/ folder and runs the appropriate task when a file is modified.

npm start
Starts a dev server at 127.0.0.1:8080 with path to dist/ folder.

A Note About the Sounds

The sounds effects are dynamically generated using the Web Audio API and an audio synthesizer library.

Browser Support

The game supports IE 11, Edge, Firefox 15+, Chrome 20+, Safari 8+. In order to support older browsers, you need polyfills for the following JavaScript features:

License

Released under the MIT license.

You can’t perform that action at this time.