*** DISCLAIMER OF USE: You do NOT have permission to put this code on your site ***
... Basketball Shot Chart. This is my first project that I utilized (and truly needed) JS Objects. I'm speechless on how well this turned out. Use on gameday or watching replays. Feel free to upload your charts to social media (you'll have to screenshot it).
Keyboard Controls:
- 'M': Toggles Miss Mode; add missed shots
- 'S': Toggles Score Mode; add made shots
- 'E': Toggles Erase Mode; click scored FG's or misses to delete. Will NOT work while looking at the full game shot chart
I worked on this project for quite a while (relatively small amount, in terms of days, but a lot of hours). The project idea was sparked when I was trying to learn some more about HTML5 canvas. I did spend a lot of time tweaking the court design. Originally I was just making individual courts to upload but then decided to make transparent parts on the court so background colors could show the paint colors I wanted and meant I only had to upload 1 image file (and no image name arrays). Nearly 100 lines of code (and over 8,000 characters) were devoted to simply updating the statbox, which I never anticipated. For 3-ptrs, I designed a function that determined the distance from the basket. I knew the x,y point of the center of the hoop. Then I used the pythagorean theorem to get the distance. If the shot distance is >= 220 (22ft+), it's a 3ptr. The conversion factor I used when making the image was 10px = 1ft. Future updates could include average shot distance or even player entries. Thanks for checking it out.
On-Court Font Used:
"College" by Matthew Welch. To make the court image,
Inkscape was used.
