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

제6강: 게임 로직의 기본 - 아이템과 목적지 설정

---

학습 목표:

이번 강의에서는 "BrainBox Delivery" 게임에서 플레이어가 배달할 아이템과 그 목적지를 설정하고, 이를 관리하는 게임 로직을 구현하는 방법을 학습합니다. 여러분은 아이템과 목적지 데이터를 정의하는 클래스/모델을 생성하고, 간단한 리스트(List) 컴포넌트를 사용해 아이템과 목적지를 화면에 표시할 것입니다. 또한, 게임 상태 관리(State Management)의 기초를 다져 나가게 됩니다.

---

1. 아이템과 목적지 데이터를 정의하는 클래스/모델 생성

게임의 핵심 로직을 구현하기 위해서는 먼저 아이템과 목적지에 대한 데이터를 정의해야 합니다. 이 데이터는 게임 내에서 관리되고, 플레이어의 행동에 따라 상태가 변경됩니다.

1.1 React Native - 클래스/모델 생성

React Native에서는 클래스를 사용하여 아이템과 목적지의 데이터를 정의할 수 있습니다. ES6 문법을 사용하여 클래스를 생성하고, 이 클래스는 게임 내에서 다양한 아이템과 목적지를 관리하는 데 사용됩니다.

class Item {
  constructor(id, name, destination) {
    this.id = id;
    this.name = name;
    this.destination = destination;
  }
}

class Destination {
  constructor(id, name) {
    this.id = id;
    this.name = name;
  }
}

// 예시 데이터
const items = [
  new Item(1, 'Box', 'Location A'),
  new Item(2, 'Bag', 'Location B'),
];

const destinations = [
  new Destination(1, 'Location A'),
  new Destination(2, 'Location B'),
];

 

이 코드는 게임에서 사용할 아이템과 목적지에 대한 기본 데이터를 정의하는 클래스입니다. Item 클래스는 각 아이템의 id, name, destination 속성을 가지고 있으며, Destination 클래스는 목적지의 id와 name 속성을 가집니다.

1.2 Flutter - 클래스/모델 생성

Flutter에서는 Dart 언어를 사용하여 클래스를 정의합니다. 다음은 아이템과 목적지를 관리하는 클래스를 생성하는 예제입니다.

class Item {
  final int id;
  final String name;
  final String destination;

  Item({required this.id, required this.name, required this.destination});
}

class Destination {
  final int id;
  final String name;

  Destination({required this.id, required this.name});
}

// 예시 데이터
final List<Item> items = [
  Item(id: 1, name: 'Box', destination: 'Location A'),
  Item(id: 2, name: 'Bag', destination: 'Location B'),
];

final List<Destination> destinations = [
  Destination(id: 1, name: 'Location A'),
  Destination(id: 2, name: 'Location B'),
];

 

이 Dart 코드는 아이템과 목적지에 대한 모델을 정의하며, 각 아이템과 목적지의 속성을 초기화하는 생성자를 포함하고 있습니다.

---

2. 간단한 리스트(List) 컴포넌트를 사용해 아이템과 목적지 표시

아이템과 목적지를 화면에 표시하기 위해 리스트(List) 컴포넌트를 사용할 수 있습니다. 이 컴포넌트는 정의된 데이터를 기반으로 아이템과 목적지를 화면에 렌더링합니다.

2.1 React Native - FlatList를 사용한 아이템과 목적지 표시

React Native에서는 FlatList 컴포넌트를 사용하여 리스트 형태로 데이터를 표시할 수 있습니다.

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

const ItemList = () => {
  const renderItem = ({ item }) => (
    <View>
      <Text>{item.name} -> {item.destination}</Text>
    </View>
  );

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={item => item.id.toString()}
    />
  );
};

export default ItemList;

 

2.2 Flutter - ListView를 사용한 아이템과 목적지 표시

Flutter에서는 ListView 위젯을 사용하여 리스트 형태로 데이터를 표시할 수 있습니다.

dart

코드 복사

import 'package:flutter/material.dart';

class ItemList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];
        return ListTile(
          title: Text('${item.name} -> ${item.destination}'),
        );
      },
    );
  }
}

 

이 Flutter 예제에서는 ListView.builder를 사용하여 아이템 목록을 렌더링합니다. 각 리스트 아이템에는 이름과 목적지가 표시됩니다.

---

3. 게임 상태 관리(State Management) 기초

게임 내에서 상태 관리(State Management)는 매우 중요합니다. 상태는 게임의 현재 상황을 반영하며, 플레이어의 행동에 따라 실시간으로 변경됩니다. 이 섹션에서는 기본적인 상태 관리 방법을 소개합니다.

3.1 React Native - useState 훅을 사용한 상태 관리

React Native에서는 useState 훅을 사용하여 간단한 상태 관리를 할 수 있습니다.

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

const GameStatus = () => {
  const [score, setScore] = useState(0);

  return (
    <View>
      <Text>Score: {score}</Text>
      <Button title="Increase Score" onPress={() => setScore(score + 1)} />
    </View>
  );
};

export default GameStatus;

 

이 예제에서는 useState 훅을 사용하여 점수를 관리하고, 버튼 클릭 시 점수를 증가시키는 로직을 구현합니다.

3.2 Flutter - StatefulWidget을 사용한 상태 관리

Flutter에서는 StatefulWidget을 사용하여 상태를 관리할 수 있습니다.

import 'package:flutter/material.dart';

class GameStatus extends StatefulWidget {
  @override
  _GameStatusState createState() => _GameStatusState();
}

class _GameStatusState extends State<GameStatus> {
  int _score = 0;

  void _increaseScore() {
    setState(() {
      _score++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Score: $_score'),
        ElevatedButton(
          onPressed: _increaseScore,
          child: Text('Increase Score'),
        ),
      ],
    );
  }
}

 

이 Flutter 예제에서는 StatefulWidget을 사용하여 점수를 관리하고, 버튼 클릭 시 점수를 증가시키는 로직을 구현합니다.

 

 

---

이 강의를 통해 여러분은 "BrainBox Delivery" 게임의 핵심 로직을 구현하는 데 필요한 기술을 습득하게 되었습니다. 앞으로의 강의에서는 이러한 기초를 바탕으로 게임을 더욱 발전시켜 나갈 것입니다.