Skip to content

Raywizzy/DOM-Tennis

 
 

Repository files navigation

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.

About

HTML + CSS + JavaScript tennis game

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • JavaScript 70.2%
  • CSS 22.5%
  • HTML 7.3%