🌱 Digital garden
  • Welcome
  • Courses
    • Fundamentals of 2D Game Engines with C++ SDL and Lua
      • Dependencies and project structure
  • Computer science
    • Basic
  • Sound
    • FM synthesis
  • Development
    • Design system
    • Text editors
      • Vim
      • Emacs
      • VS Code
    • Databases
      • MongoDB
    • NES Development
    • Programming languages
      • Shell
      • Javascript
        • Arrays
        • JSDoc
    • UML
    • Web development
      • HTTP
      • GraphQL
      • PWA
      • CSS
      • REST
      • Web scrapping
      • React
        • React hooks
      • HTML5
        • Canvas
          • WebGL
          • Context2D
    • Game development
      • Pixel art
      • AABB collision
      • Sprite
      • Game loop
  • Education
    • Tools
      • Anki
  • Electronic
    • Components
      • Opto-isolator
  • Image quality
  • Languages
    • English
  • Utilities
    • Docker
    • SSH
  • Lifestyle
    • Minimalism
    • Reading
  • Science
    • Math
      • Fractions
  • Productivity
    • Bullet journaling
    • Typing
  • Operating system
    • Unix
    • Linux
    • MacOS
  • Learning resources
  • Research
Powered by GitBook
On this page
  • Notes
  • Rectangle collision
  • Links

Was this helpful?

  1. Development
  2. Game development

AABB collision

Algorithm to detect collision between two objects

Notes

Rectangle collision

var rect1 = {x: 5, y: 5, width: 50, height: 50}
var rect2 = {x: 20, y: 10, width: 10, height: 10}

if (rect1.x < rect2.x + rect2.width &&
   rect1.x + rect1.width > rect2.x &&
   rect1.y < rect2.y + rect2.height &&
   rect1.y + rect1.height > rect2.y) {
    // collision detected!
}

// filling in the values =>

if (5 < 30 &&
    55 > 20 &&
    5 < 20 &&
    55 > 10) {
    // collision detected!
}

Links

PreviousPixel artNextSprite

Last updated 4 years ago

Was this helpful?

http://pomle.github.io/aabb-collision/