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

제9강: 난이도 조정 및 타이머 추가

---

학습 목표:

이번 강의에서는 "BrainBox Delivery" 게임에서 난이도를 점진적으로 증가시키고, 제한 시간을 설정하는 타이머 기능을 추가하는 방법을 학습합니다. 게임의 난이도를 조정하는 매개변수를 설정하고, 타이머 컴포넌트를 구현하여 게임 매니저와 연동하며, 타이머 기반으로 게임 오버 로직을 처리하는 과정을 익히게 됩니다.

---

1. 난이도 조정 매개변수 설정 및 로직 구현

게임의 난이도를 조정하는 것은 플레이어의 도전 의식을 자극하고, 게임의 흥미를 유지하는 데 매우 중요합니다. 난이도 조정을 위해 다양한 매개변수를 설정하고, 이에 따른 로직을 구현해야 합니다.

1.1 난이도 조정 매개변수 설정

난이도를 조정하기 위해 게임 내에서 여러 매개변수를 설정할 수 있습니다. 예를 들어, 배달해야 할 아이템의 수, 목적지의 복잡성, 제한 시간 등을 조절할 수 있습니다.

React Native - 난이도 매개변수 설정

class GameManager {
  constructor() {
    this.currentLevel = 1;
    this.currentRound = 1;
    this.isPaused = false;
    this.itemCount = 5; // 난이도에 따른 아이템 수
    this.timeLimit = 60; // 제한 시간 (초)
  }

  increaseDifficulty() {
    this.itemCount += 2; // 레벨이 올라갈 때마다 아이템 수 증가
    this.timeLimit -= 5; // 레벨이 올라갈 때마다 제한 시간 감소
    console.log('Difficulty increased');
  }
}

 

Flutter - 난이도 매개변수 설정

class GameManager {
  int currentLevel = 1;
  int currentRound = 1;
  bool isPaused = false;
  int itemCount = 5; // 난이도에 따른 아이템 수
  int timeLimit = 60; // 제한 시간 (초)

  void increaseDifficulty() {
    itemCount += 2; // 레벨이 올라갈 때마다 아이템 수 증가
    timeLimit -= 5; // 레벨이 올라갈 때마다 제한 시간 감소
    print('Difficulty increased');
  }
}

 

이 코드는 난이도를 조절하기 위해 아이템 수와 제한 시간을 매개변수로 설정하고, 레벨이 올라갈 때마다 난이도를 높이는 로직을 구현합니다.

---

2. 타이머 컴포넌트 구현 및 게임 매니저와 연동

게임 내 타이머는 제한 시간 내에 플레이어가 과제를 완료하도록 유도하는 중요한 요소입니다. 타이머 컴포넌트를 구현하고 이를 게임 매니저와 연동하여 게임의 흐름을 제어합니다.

2.1 React Native - 타이머 컴포넌트 구현

React Native에서는 setInterval과 clearInterval을 사용하여 타이머를 구현할 수 있습니다.

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

const Timer = ({ timeLimit, onTimeUp }) => {
  const [timeLeft, setTimeLeft] = useState(timeLimit);

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft((prevTime) => {
        if (prevTime <= 1) {
          clearInterval(timer);
          onTimeUp();
          return 0;
        }
        return prevTime - 1;
      });
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <View>
      <Text>Time Left: {timeLeft} seconds</Text>
    </View>
  );
};

export default Timer;

 

이 코드는 setInterval을 사용하여 매초 타이머를 업데이트하며, 시간이 다 되면 onTimeUp 콜백을 호출합니다.

2.2 Flutter - 타이머 컴포넌트 구현

Flutter에서는 Timer 클래스를 사용하여 타이머를 구현할 수 있습니다.

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

class TimerWidget extends StatefulWidget {
  final int timeLimit;
  final Function onTimeUp;

  TimerWidget({required this.timeLimit, required this.onTimeUp});

  @override
  _TimerWidgetState createState() => _TimerWidgetState();
}

class _TimerWidgetState extends State<TimerWidget> {
  late int timeLeft;
  late Timer timer;

  @override
  void initState() {
    super.initState();
    timeLeft = widget.timeLimit;

    timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (timeLeft <= 1) {
        timer.cancel();
        widget.onTimeUp();
      } else {
        setState(() {
          timeLeft--;
        });
      }
    });
  }

  @override
  void dispose() {
    timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text('Time Left: $timeLeft seconds');
  }
}

 

이 코드는 Timer.periodic을 사용하여 매초 타이머를 업데이트하며, 시간이 다 되면 onTimeUp 콜백을 호출합니다.

---

3. 타이머 기반 게임 오버 로직 처리

타이머가 0에 도달하면 게임이 종료되는 로직을 구현합니다. 이 로직은 게임의 긴장감을 높이고, 플레이어에게 도전 의식을 부여하는 요소로 작용합니다.

3.1 React Native - 게임 오버 로직 처리

React Native에서 타이머가 끝났을 때 게임 오버를 처리하는 로직을 추가합니다.

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

const gameManager = new GameManager();

const GameScreen = () => {
  const handleTimeUp = () => {
    gameManager.endGame();
    alert('Game Over!');
  };

  return (
    <View>
      <Timer timeLimit={gameManager.timeLimit} onTimeUp={handleTimeUp} />
      <Text>Level: {gameManager.currentLevel}</Text>
      <Text>Round: {gameManager.currentRound}</Text>
    </View>
  );
};

export default GameScreen;

이 코드는 타이머가 종료될 때 handleTimeUp 함수를 호출하여 게임 오버 메시지를 표시합니다.

3.2 Flutter - 게임 오버 로직 처리

Flutter에서도 비슷한 방식으로 타이머가 끝났을 때 게임 오버를 처리하는 로직을 추가합니다.

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

final GameManager gameManager = GameManager();

class GameScreen extends StatelessWidget {
  void handleTimeUp() {
    gameManager.endGame();
    print('Game Over!');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BrainBox Delivery'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TimerWidget(timeLimit: gameManager.timeLimit, onTimeUp: handleTimeUp),
            Text('Level: ${gameManager.currentLevel}'),
            Text('Round: ${gameManager.currentRound}'),
          ],
        ),
      ),
    );
  }
}

 

이 Flutter 코드는 타이머가 종료될 때 handleTimeUp 함수를 호출하여 게임 오버를 처리합니다.

---

이 강의를 통해 여러분은 "BrainBox Delivery" 게임의 난이도를 조정하고 타이머 기능을 추가하여 게임을 더욱 흥미롭게 만들 수 있는 기술을 습득하게 되었습니다. 앞으로의 강의에서는 이러한 기초를 바탕으로 게임을 더욱 발전시켜 나갈 것입니다.