SENĆOŦEN Salmon Quest

SENĆOŦEN Ice Fishing 🎣

Inspiration We wanted to create an engaging way to learn SENĆOŦEN vocabulary through gameplay. Traditional language learning can feel tedious, so we combined education with the nostalgic feel of classic fishing games. The concept of "catching" words seemed like a natural fit for both the coastal Indigenous culture and making vocabulary stick in players' minds. What it does

SENĆOŦEN Ice Fishing is an interactive vocabulary game where players control a fishing hook to catch salmon labeled with SENĆOŦEN words. Players must match the English translation displayed on screen with the correct fish. Lacrosse sticks drift across the water as obstacles - if they touch your fishing line, you lose a life. The game tracks score, lives, and displays caught words in a scoreboard. How we built it

Frontend: React with functional components and hooks for state management Backend: Node.js/Express API serving vocabulary data Styling: Tailwind CSS for responsive UI design Game mechanics: Custom collision detection using distance calculations for fish catching and line intersection detection for obstacles Data flow: RESTful API calls to fetch random vocabulary sets

The biggest challenge was implementing reliable collision detection. Initially, we struggled with:

Coordinate system mismatches (percentages vs pixels) UseEffect dependency loops causing performance issues Getting click-based fish catching to work instead of automatic collision Fine-tuning collision thresholds so gameplay felt fair but challenging Debugging the lacrosse stick line collision which required switching from interval-based checking to event-based detection

We went through multiple iterations of the collision system before finding a solution that worked smoothly.

Accomplishments that we're proud of

Successfully implemented a click-to-catch mechanic that feels responsive Created smooth animations for fish and obstacles moving across the screen Built a clean, intuitive UI that doesn't distract from gameplay Integrated real SENĆOŦEN vocabulary in a fun, memorable way Solved complex collision detection problems through persistence

What we learned

React state management can be tricky with game loops - sometimes event-based logic works better than useEffect intervals Collision detection requires careful consideration of coordinate systems User feedback (visual and text) is crucial for game feel Balancing difficulty through collision thresholds makes a huge difference in player experience

What's next

Add difficulty levels with faster fish/more obstacles Expand vocabulary database with categories Add sound effects and background music Implement a high score leaderboard Add more detailed feedback on vocabulary learning progression

Built With

• node.js
• react
• tailwind