What is HitboxJS ?

HitboxJS is a JS library that can help you detect collisions or intersections between elements in your DOM.

It can be used if your are building complex interfaces with, for example, rectangle selection, or if you're building a game*.

*If you are building a game, you are probably using a canvas so this library is not for you (and if not, maybe you should consider switching to canvas for performance reasons). HitboxJS only detects collisions and intersection between DOM Elements.

‌

HitboxJS watches your elements and fires an event when two elements collide.

Learn to use HitboxJS by reading the documentation.

Installation

In the browser

To import HitboxJS, simply place this tag before your script.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/hitbox-js/dist/hitbox.dist.js"></script>  

<!-- Then you can import your script -->  
<script type="text/javascript" src="my.script.js"></script>  

With a module bundler

If you are using a module bundler like Webpack or Parcel, you need to add Hitbox as a dependency of your project.

npm install --save hitbox-js  

Then you need to import it in your JS file

import Hitbox from 'hitbox-js'