아토믹데브_11_취업 준비생을 위한 모바일 게임 개발 여정

제11강: 점수 시스템 및 리더보드 구현

---

학습 목표:

이번 강의에서는 "BrainBox Delivery" 게임에서 점수 시스템을 구축하고, 플레이어 간의 경쟁을 위한 리더보드를 구현하는 방법을 학습합니다. 점수 계산 로직을 구현하고, 이를 화면에 표시하는 UI를 추가하며, 간단한 리더보드를 만들어 점수를 정렬하여 보여주는 기능을 구현하게 됩니다.

---

1. 점수 계산 로직 구현

점수 시스템은 게임의 중요한 요소 중 하나로, 플레이어의 성과를 측정하고 이를 바탕으로 경쟁을 유도하는 역할을 합니다. 점수는 플레이어가 게임 내에서 수행한 행동에 따라 계산됩니다.

1.1 점수 계산 로직 설정

점수는 배달된 아이템의 수, 정확성, 배달 속도 등을 기준으로 계산될 수 있습니다. 예를 들어, 각 아이템 배달 시 기본 점수를 부여하고, 추가적으로 배달 시간에 따라 보너스 점수를 적용할 수 있습니다.

React Native - 점수 계산 로직

class GameManager {
  constructor() {
    this.score = 0;
  }

  addScore(basePoints, timeBonus) {
    const totalPoints = basePoints + timeBonus;
    this.score += totalPoints;
    console.log(`Score added: ${totalPoints}, Total score: ${this.score}`);
  }

  resetScore() {
    this.score = 0;
  }
}

 

이 코드는 addScore 메서드를 통해 점수를 계산하고, 총 점수에 추가하는 로직을 구현합니다. resetScore 메서드는 게임 시작 시 점수를 초기화하는 데 사용됩니다.

Flutter - 점수 계산 로직

class GameManager {
  int score = 0;

  void addScore(int basePoints, int timeBonus) {
    int totalPoints = basePoints + timeBonus;
    score += totalPoints;
    print('Score added: $totalPoints, Total score: $score');
  }

  void resetScore() {
    score = 0;
  }
}

 

이 Flutter 코드는 React Native와 동일한 점수 계산 로직을 구현합니다.

---

2. 점수 표시 UI 추가

플레이어가 현재 점수를 실시간으로 확인할 수 있도록 UI에 점수를 표시하는 요소를 추가합니다.

2.1 React Native - 점수 표시 UI

React Native에서는 Text 컴포넌트를 사용해 점수를 표시할 수 있습니다.

import React from 'react';
import { View, Text } from 'react-native';
import GameManager from './GameManager';

const gameManager = new GameManager();

const ScoreDisplay = () => {
  return (
    <View>
      <Text>Score: {gameManager.score}</Text>
    </View>
  );
};

export default ScoreDisplay;

 

이 코드는 Text 컴포넌트를 사용해 현재 점수를 화면에 표시합니다.

2.2 Flutter - 점수 표시 UI

Flutter에서는 Text 위젯을 사용해 점수를 표시할 수 있습니다.

import 'package:flutter/material.dart';
import 'game_manager.dart';

final GameManager gameManager = GameManager();

class ScoreDisplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Score: ${gameManager.score}');
  }
}

 

이 Flutter 코드는 Text 위젯을 사용해 현재 점수를 화면에 표시합니다.

---

3. 간단한 리더보드 구현 및 정렬 기능 처리

리더보드는 여러 플레이어의 점수를 비교하여 순위를 매기는 중요한 요소입니다. 리더보드는 점수를 기준으로 정렬되어야 하며, 이를 통해 플레이어 간의 경쟁을 유도할 수 있습니다.

3.1 React Native - 리더보드 구현

React Native에서는 간단한 배열을 사용해 리더보드를 구현하고, 점수를 기준으로 정렬할 수 있습니다.

const leaderboard = [];

const addToLeaderboard = (playerName, score) => {
  leaderboard.push({ player: playerName, score: score });
  leaderboard.sort((a, b) => b.score - a.score);
  console.log('Leaderboard:', leaderboard);
};

 

이 코드는 새로운 점수를 리더보드에 추가하고, 점수를 기준으로 내림차순 정렬하여 표시합니다.

3.2 Flutter - 리더보드 구현

Flutter에서도 유사한 방식으로 리더보드를 구현할 수 있습니다.

List<Map<String, dynamic>> leaderboard = [];

void addToLeaderboard(String playerName, int score) {
  leaderboard.add({'player': playerName, 'score': score});
  leaderboard.sort((a, b) => b['score'].compareTo(a['score']));
  print('Leaderboard: $leaderboard');
}

이 Flutter 코드는 새로운 점수를 리더보드에 추가하고, 점수를 기준으로 정렬하여 표시합니다.

---

이 강의를 통해 여러분은 "BrainBox Delivery" 게임의 점수 시스템과 리더보드를 구축하여 플레이어 간의 경쟁을 유도할 수 있는 기능을 구현하게 되었습니다. 앞으로의 강의에서는 이러한 기초를 바탕으로 게임을 더욱 발전시켜 나갈 것입니다.