https://github.com/than-dev/collision-in-js
Collision detector made with javascript, webpack and babel to development environment and canvas API + analytical math to the app implementation.
https://github.com/than-dev/collision-in-js
algorithm babel data-structures development es6 javascript webpack
Last synced: 5 months ago
JSON representation
Collision detector made with javascript, webpack and babel to development environment and canvas API + analytical math to the app implementation.
- Host: GitHub
- URL: https://github.com/than-dev/collision-in-js
- Owner: than-dev
- Created: 2021-10-28T16:43:45.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-02T13:30:50.000Z (almost 4 years ago)
- Last Synced: 2025-07-03T20:49:52.998Z (5 months ago)
- Topics: algorithm, babel, data-structures, development, es6, javascript, webpack
- Language: JavaScript
- Homepage:
- Size: 75.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### 🐍 Description
It's a simple javascript app, that identify collisions beetween circles.
### 💮 Usage
just run:
```
yarn start
```
- The static files (index.html and main.css) are fixed at dist, we just generate the bundle with webpack and babel, that out in main.js (build script);
- The script start serve the webpack, that we can access from localhost:8080.
### 🏺 See It
https://user-images.githubusercontent.com/82950902/147786012-43b0c309-7274-4f5f-a6c0-aba04073f787.mp4
### 🛰️ How does it works
Basically we render the screen again on all mouse move with the same generated circles positions and the same background, just updating the cursor circle acordding the mouse coordenates!
The math executed to verify collision basically is: We get the main circle positions (x, y) and remove from each one the related positions (x, y) from the circle that is verifying the collision, after it, we get this results, calc the square root from they^2 and compare if it is less or equal the current circle radius + the main circle radius, visualize:
```
isOverlaped(circle) {
const dx = circle.positions.x - this.positions.x;
const dy = circle.positions.y - this.positions.y;
return Math.sqrt(dx * dx + dy * dy) <= this.radius + circle.radius;
}
```
### 🫀 Author
Nathan Cotrim - MIT