DEV Community

Cover image for Building a Geographic Distance and Direction Calculator for Flag-based Geography Games
horus he
horus he

Posted on

Building a Geographic Distance and Direction Calculator for Flag-based Geography Games

As a developer working on geography education games, I recently faced an interesting challenge: how to make learning world geography more engaging and interactive. This led me to develop a comprehensive geographic calculation system for Flagle Explorer, a flag-guessing game that provides real-time feedback based on players' guesses.

The Challenge

Traditional geography games often rely on simple "right or wrong" feedback. However, research from the Journal of Geography in Higher Education shows that interactive learning methods can improve geographic knowledge retention by up to 40%. This inspired us to create a more nuanced feedback system that would guide players toward the correct answer while teaching them about global geography.

Research and Requirements

Our key requirements were:

  1. Calculate accurate distances between any two points on Earth
  2. Determine directional relationships between locations
  3. Provide a meaningful "closeness" percentage
  4. Support emoji-based direction indicators for better UX

The Solution

Let's break down the key components of our geographic calculation system:

1. Distance Calculation

We implemented the Haversine formula to calculate the great-circle distance between two points:

export function calculateDistance(point1: GeoPoint, point2: GeoPoint): number {
  // Quick return for identical points
  if (point1.lat === point2.lat && point1.lon === point2.lon) {
    return 0;
  }

  // Earth's radius in meters
  const R = 6371000;

  // Convert latitude/longitude differences to radians
  const dLat = (point2.lat - point1.lat) * Math.PI / 180;
  const dLon = (point2.lon - point1.lon) * Math.PI / 180;

  // Haversine formula
  const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(point1.lat * Math.PI / 180) * Math.cos(point2.lat * Math.PI / 180) *
    Math.sin(dLon / 2) * Math.sin(dLon / 2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

  // Convert to kilometers
  return R * c / 1000;
}
Enter fullscreen mode Exit fullscreen mode

2. Direction Calculation

We developed a bearing calculation system that converts complex angular mathematics into user-friendly directional indicators:

export function calculateOrientationEmoji(point1: GeoPoint, point2: GeoPoint): string {
  const orientation = calculateOrientation(point1, point2);

  // Handle identical points
  if (orientation === 0 || (point1.lat === point2.lat && point1.lon === point2.lon)) {
    return '🟢';
  }

  // Convert bearing to 8-direction compass
  if (orientation >= 337.5 || orientation < 22.5) return '⬆️';  // North
  if (orientation >= 22.5 && orientation < 67.5) return '↗️';   // Northeast
  if (orientation >= 67.5 && orientation < 112.5) return '➡️';  // East
  if (orientation >= 112.5 && orientation < 157.5) return '↘️'; // Southeast
  if (orientation >= 157.5 && orientation < 202.5) return '⬇️'; // South
  if (orientation >= 202.5 && orientation < 247.5) return '↙️'; // Southwest
  if (orientation >= 247.5 && orientation < 292.5) return '⬅️'; // West
  return '↖️'; // Northwest
}
Enter fullscreen mode Exit fullscreen mode

3. Proximity Percentage

To provide intuitive feedback about how close a guess is, we implemented a percentage-based system:

export function calculateGeoClosingPercent(point1: GeoPoint, point2: GeoPoint): number {
  const distance = calculateDistance(point1, point2);
  const MAX_DISTANCE = 20000; // Maximum reference distance in km

  if (distance >= MAX_DISTANCE) return 1;
  if (distance === 0) return 100;

  // Linear interpolation for percentage calculation
  const percent = ((MAX_DISTANCE - distance) / MAX_DISTANCE) * 100;
  return Math.max(0, Math.min(100, Number(percent.toFixed(2))));
}
Enter fullscreen mode Exit fullscreen mode

Real-world Application

Flagle Explorer Feedback System

This system has been successfully implemented in Flagle Explorer, where it provides players with three key pieces of feedback after each guess:

  • Exact distance to the target in kilometers
  • Directional guidance using intuitive emoji arrows
  • A percentage indicating how close they are to the correct answer

The feedback system has proven particularly effective in educational settings, where teachers report increased student engagement and better retention of geographical concepts.

Future Optimizations

We're currently exploring several improvements:

  1. Adding terrain and geographical features to distance calculations
  2. Implementing regional proximity bonuses
  3. Developing a difficulty-based scoring system
  4. Adding support for historical border changes

Want to see these geographic calculations in action? Try solving today's flag puzzle at Flagle Explorer and watch as the distance and direction indicators guide you around the globe!

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay