Skip to content

Gehm-Nicolas/bouncingBalls

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

bouncingBalls

Simple example of bouncing balls on a web browser, based on a tutorial from MDN web docs.

bouncing balls

Built With:

  • yarn - Package manager
  • Node.js® - JavaScript runtime platform
  • babel - JavaScript compiler mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments
  • webpack - Static module bundler

Getting Started

In order to get your project development dependencies setup, follow the steps

Download Node.js and yarn

Download and install Node.js from here.

Install yarn package manager:

npm install -g yarn

Setting our development environment

Yarn

Access your project's root folder and run the following commands in a terminal in order to setup and install all project's dependencies:

yarn init

You can just hit enter to answear all the questions. It will fill the fields automatically with default values. This command will create "package.json", in which there wiil be stored all dependencies of the project.

Babel

Add babel command line interface:

yarn add @babel/cli

This command will generate "yarn.lock" file and "node_modules" file.

Add a babel preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s)

yarn add @babel/preset-env
yarn add @babel/core

Create ".babelrc" file in your project's root folder with the following code inside:

{
    "presets": ["@babel/preset-env"]
}

Webpack

Add webpack:

yarn add webpack webpack-cli -D
yarn add babel-loader -D

Webpack devServer

In order to get a server running:

yarn add webpack-dev-server -D

Running the project

In order to run the project just execute the following command in the terminal:

yarn dev

Then access in your browser this server, as shown at the terminal messages generated with the previous command:

http://localhost:8080/

Acknowledgments

This project was made in order to provide personal experience with frontend development and learn how to use yarn, Node.js®, babel, and webpack tools.

To-do list:

  • Collision detection
  • Implement the score counter
  • Understand why collision detection doesn't work with multiple balls (Does it need threads?)
  • Change ball's directions when a collision is detected
  • Update canvas width and height parameters when window resize event occurs

About

bouncing balls web application example

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published