기초

미니게임 (색상 스트룹 테스트)

글자의 색에 흔들리지 않고 화면에 제시된 색상과 같은 색 이름을 고르는 집중력 게임을 만듭니다.

동작

미니게임 (색상 스트룹 테스트) 실행 화면

게임 시작 전에는 색상 영역을 가리고 준비 상태만 표시합니다. 게임이 시작되면 화면에는 맞혀야 하는 색상이 크게 표시됩니다. 선택지는 색 이름 텍스트로 나오지만, 글자색은 다른 색으로 섞입니다. 게임 시작을 누르면 15초 제한 시간이 흐릅니다. 사용자는 글자색이 아니라 화면에 뜬 색상과 같은 색 이름을 골라 점수를 얻습니다.

예제 코드

색상 스트룹 테스트

색상 스트룹 테스트
점수 0 시간 15
게임 준비
글자색이 아니라 화면 색상과 같은 색 이름을 고르세요.

예제 코드 기능별 설명

코드를 나누어 읽기

import

dart:async은 15초 제한 시간을 세는 Timer에 필요하고, dart:math는 다음 화면 색상과 선택지 색을 무작위로 고르는 Random에 필요합니다. material.dart는 버튼, 텍스트, 색상 위젯을 만들기 위해 가져옵니다.

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

StatefulWidget 클래스

스트룹 테스트는 점수, 남은 시간, 현재 화면 색상이 계속 바뀌므로 StatefulWidget으로 만듭니다. 화면이 바뀌는 값은 State 클래스 안에 둡니다.

class StroopColorGame extends StatefulWidget {
  const StroopColorGame({super.key});
}

상태 변수

targetIndex는 현재 맞혀야 하는 색상, score는 점수, seconds는 남은 시간, playing은 게임 진행 여부입니다. started는 시작 전 준비 화면과 실제 문제 화면을 나누기 위해 사용합니다.

int targetIndex = 0;
int score = 0;
int seconds = 15;
bool playing = false;
bool started = false;
Timer? timer;

랜덤 색상 선택

색과 색 이름이 고정 순서로 반복되면 게임성이 약해지므로 Random으로 다음 targetIndex를 뽑습니다. 이전 문제와 같은 값은 다시 뽑아 변화가 느껴지게 합니다.

void pickNextColor() {
  var next = targetIndex;
  while (next == targetIndex) {
    next = random.nextInt(colors.length);
  }
  targetIndex = next;
}

정답 검사

사용자가 누른 버튼의 index와 현재 색상 index를 비교합니다. 정답일 때 점수를 올리고 다음 색과 색 이름을 새로 뽑습니다.

if (index == targetIndex) {
  score += 1;
  targetIndex = (targetIndex + 1) % colors.length;
}

색 데이터 묶기

이름과 실제 색 값을 한 목록에 묶어 두면 화면에는 색상 박스를, 버튼에는 색 이름을 같은 데이터에서 꺼내 쓸 수 있습니다.

final colors = [
  {'name': '파랑', 'color': Colors.blue},
  {'name': '초록', 'color': Colors.green},
];

준비 화면

게임 시작 전에는 색상 박스와 선택지를 숨기고 '게임 준비'만 보여줍니다. 시작 버튼을 누르면 started를 true로 바꾸고 색상 문제를 표시합니다.

if (!started) {
  return const Center(child: Text('게임 준비'));
}

15초 제한 시간

게임 시작 버튼을 눌렀을 때만 Timer.periodic을 만들고 1초마다 seconds를 줄입니다. seconds가 0이 되면 playing을 false로 바꿔 더 이상 정답을 받을 수 없게 합니다.

timer = Timer.periodic(const Duration(seconds: 1), (_) {
  if (seconds == 0) playing = false;
  seconds -= 1;
});

선택지 텍스트 색상

스트룹 테스트는 글자 의미와 글자색이 서로 다르게 섞여야 합니다. 사용자는 글자색이 아니라 화면에 제시된 색 이름을 선택해야 하므로, 선택지 텍스트 색상은 일부러 서로 다르게 표시합니다.

TextButton(
  style: TextButton.styleFrom(foregroundColor: optionTextColor),
  child: Text(colorNames[index]),
)

점수와 다음 문제

정답을 맞히면 score를 올리고 pickNextColor를 호출합니다. 오답일 때 점수를 깎지 않는 구조라면 초보자도 반복해서 색상-이름 매칭 규칙을 익힐 수 있습니다.

if (choice == targetIndex) {
  score += 1;
  pickNextColor();
}