Search the Community

I have no idea how to check for collision on only a small part of an image or sprite. For example, in the Image below, how would I detect collision with the sword in the red circle, but not detect collision with anything else in the blue square. I just want the sword to kill enemies and not the rest of his body or the white space above and below the sword. Another example, if my character is standing over a gap, my code sees his width as the width of his whole image (from his sword to the other arm) , and so he doesn't fall in the gap. How could I do collision detection with only a small part of the image? Could someone tell me what the technique is called or send me to an article to read. I don't even know where to begin looking. Thanks! PS. I am learning WITHOUT frameworks or libraries. I would like any help with just vanillaJS and later I'll learn a library.