I’ve been working on this project with my students in Web Devleopment 2 this semester. And it’s time to see if it makes sense or is at all fun and note tons of obvious bugs! “Bevin Kacon” as I’m snarkily calling it, is a movie trivia game based on Six Degrees of Kevin Bacon – just find the shortest path between two actors through their film and television roles. Try it out and let me know what you think. Below is an animation that shows the basics:
- Two random actors are picked
- Use credits for the actor on the left and find a path to the finish actor on your right.
- Select one of the start actor’s movie or tv credits. If the finish actor on the right appeared in the same credit you’re made a match!
- If no match, the movie or tv credit will show its main cast. Pick a new actor to try and connect that actor to your finish actor.
- New movie and tv credits are displayed, try again to match a credit to your finish actor!
- You have up to
sixunlimited movie or tv credits to make your match.Or you have to make your match within six degrees of separation. - Track your path taken at anytime by selecting the “Degree Count” tab.
- Get hints by seeing three movie/tv credits of the finish actor at a time with the “Get a Hint” tab.
Issues
cast/credits nav trade innerTextfinish show start Actor in the top boxdegree count and hint count at the topfix the sticky headermake sure the more button counts the length of the credits array- better set of cast members for tv show. Notice that Game of Thrones doesn’t return the Dothraki king as a main cast member. How to combine main cast members across seasons.
- vote count multiplier for tv shows to rank them higher?
- Jackie Cruz gave two tiles for orange is the new black and pushed two tiles to the degree count as well. Means it might be good to fix the data structure???
- Disable the credits and get a hint links when game is over
- Limit the number of guesses to six
- Shortest path problem (this is the biggy and is going to take awhile)
- Fix really small width screens. Consider rebuilding CSS with bootstrap or just from scratch.
- Check start and finish actors don’t match at
startGame()
- fix the create tile methods
- rename the mainTile methods for the two types
- startTiles should just replace the img src attribute value and the textContent innerHTML
- there’s a lot of redundancy in the tile creation methods. This could be simplified.
add character names to castmember credit tiles- stop listening to clicks on the get more hints once the game is over
Resources
- to return two fetch calls of actor data for comparison –
Promise.all
- comparing elements in two arrays to find matches, and not matched
- apparently defunct site which found the shortest path between two actors – Cinema Freenet Movie Connector
- Recognizing this is a “shortest path problem” and needing to follow one of the possible algorithm methods described – Dijkstra’s Algorithm,
- Some possible DOM manipulators/listeners –
insertAdjacentHTML
, onscroll events, - The developer movie DB get person details
- Attaching event handlers to dynamically created JS elements – todd motto
- remove all child elements from a node – stackoverflow
- how with anonymous functions you cannot remove an event handler -stackoverflow
- MDN of
.addEventListener()
and.removeEventListener()
- Maybe still need to make sense of useCapture parameter of an event handler – stackoverflow
Comments
One response to “Bevin Kacon Alpha a Movie Trivia Game”
[…] are other bigger stretch goals that I’ve tracked on my own blog. Some have been solved like the more complete tv show cast by generating a combined list actors […]