클래식 게임
6개 챌린지~60분가위바위보, 주사위, 틱택토 같은 누구나 아는 클래식 게임을 만들어 봅니다.
가위바위보
가위바위보로 컴퓨터와 겨루는 게임 화면을 만들어 보세요. 페이지 배경은 연보라에서 연분홍으로 번지는 대각선 그라데이션이고, 그 한가운데에 모서리가 크게 둥근 흰색 카드가 보랏빛 그림자를 깔고 놓입니다. 카드 속 내용은 모두 가운데 정렬이고 위에서부터 진한 남보라색 굵은 제목, 작고 연한 회색 부제 한 줄, 대결 구역, 결과 문구, 점수판, 버튼 줄 순서로 쌓여요. 대결 구역에는 큼직한 둥근 사각 타일 두 개가 나란히 놓이고 그 사이에는 대결을 뜻하는 짧은 영문 글자가 연회색으로 들어가는데, 왼쪽 타일은 연보라 배경에 내가 낸 손을, 오른쪽 타일은 연분홍 배경에 컴퓨터가 낸 손을 큰 이모지로 보여 줍니다. 아직 한 판도 하지 않았을 때는 손 대신 사람 이모지와 로봇 이모지가 자리를 지키고, 두 타일 아래에는 나와 컴퓨터를 알려 주는 작은 회색 캡션이 각각 붙습니다. 그 아래 결과 문구는 굵은 한 줄짜리 자리이고, 처음에는 셋 중 하나를 고르라는 안내가 들어가요. 점수판은 아주 연한 회색 바탕의 모서리가 둥근 칩 하나로, 내 이름표·내 점수·가운데 콜론·컴퓨터 점수·컴퓨터 이름표가 가로로 이어지며 내 숫자는 남보라, 컴퓨터 숫자는 진분홍으로 색이 다릅니다. 맨 아래에는 폭이 똑같은 흰색 버튼 세 개가 한 줄로 놓이는데 왼쪽부터 바위·가위·보 순서이고, 버튼마다 큰 이모지가 위에 이름이 아래에 쌓여 있으며 연회색 테두리와 옅은 그림자를 두릅니다. 버튼에 마우스를 올리면 살짝 위로 떠오르면서 테두리가 연보라로 물들고 그림자가 짙어져요. 버튼을 누르면 컴퓨터가 무작위로 하나를 내서 두 타일의 이모지가 이번 판에 낸 손으로 바뀌고, 결과 문구에는 컴퓨터가 무엇을 냈는지와 이번 판을 이겼는지 졌는지 비겼는지가 한 줄로 함께 나오며 글자색도 각각 초록·빨강·노랑으로 달라집니다. 이긴 쪽 점수만 1 올라가고 비기면 그대로이며, 마지막 판의 손과 결과는 다음 판을 누를 때까지 남아 있어요. 초기화 버튼이나 라운드 제한 같은 추가 장치는 없습니다.
동전 던지기
연보라에서 연분홍으로 번지는 그라데이션 배경 한가운데에 모서리가 둥근 흰색 카드 하나가 놓여 있고, 카드 안에는 위에서부터 진한 보라색 제목 한 줄, 글자 하나가 큼직하게 들어간 금색 원형 동전, 회색 안내 문구 한 줄, 보라색 그라데이션 버튼 하나가 세로로 이어집니다. 버튼 아래 카드 안쪽에는 동전의 양면이 몇 번씩 나왔는지 세는 둥근 상자 두 개가 나란히 놓여 있고, 각각 연노랑과 연파랑 배경에 작은 회색 라벨과 0에서 시작하는 큰 숫자가 들어 있습니다. 버튼을 누르면 동전이 잠깐 회전한 뒤 무작위로 한쪽 면으로 정해지고, 그쪽 상자의 숫자가 하나 올라가면서 안내 문구가 결과를 알려 주는 문구로 바뀝니다.
주사위 굴리기
연한 보랏빛 그라데이션 배경 한가운데에 모서리가 크게 둥근 흰색 카드가 하나 놓여 있고, 카드 안에는 보라색 굵은 제목 한 줄, 작은 회색 안내 문구 한 줄, 카드에서 가장 크게 보이는 보라색 주사위 한 개, 숫자를 보여 주는 결과 줄 하나, 흰 글씨가 들어간 보라색 그라데이션 버튼 한 개가 위에서 아래로 가운데 정렬되어 있습니다. 버튼에 마우스를 올리면 살짝 위로 떠오르고, 그 버튼을 누르면 주사위가 잠깐 흔들리면서 무작위 눈으로 바뀌고 결과 줄의 숫자도 함께 바뀝니다.
숫자 맞히기
연한 하늘색 그라데이션 배경 한가운데에 모서리가 크게 둥글고 푸른 그림자가 드리운 흰색 카드가 놓여 있고, 카드 안에는 위에서부터 큼직한 숫자 이모지 하나, 맞혀야 할 수의 범위가 괄호로 붙은 진한 남색 굵은 제목 한 줄, 가로로 나란히 놓인 숫자 입력칸과 파란 그라데이션 버튼, 힌트 한 줄이 굵게 들어가는 카드 폭을 꽉 채우는 옅은 파란색 둥근 상자, 마지막으로 부른 수를 알려 주는 작은 회색 글씨 한 줄, 시도 횟수 한 줄이 가운데 정렬로 이어집니다. 입력칸은 남는 폭을 모두 차지하고 숫자가 크게 가운데로 들어가며 범위를 알려 주는 흐린 안내 문구가 있고 클릭하면 테두리가 파랗게 밝아지며, 오른쪽 버튼은 글자 폭만큼만 좁고 마우스를 올리면 살짝 위로 떠오릅니다. 힌트 상자는 높이가 넉넉히 고정되어 있어 문구가 바뀌어도 아래 줄이 밀리지 않습니다. 1부터 100 사이의 수를 넣고 버튼을 누르거나 엔터를 치면 정답보다 작을 때는 주황빛, 클 때는 파란빛, 맞았을 때는 초록빛으로 상자의 배경색과 글자색이 함께 바뀌고, 시도 횟수의 숫자만 진한 남색으로 강조됩니다.
반응 속도 테스트
연한 보라빛 그라데이션 배경 한가운데에 은은한 그림자를 두른 흰색 둥근 카드가 하나 있고, 카드 안에는 굵은 제목 한 줄, 회색 안내 문구 한 줄, 카드에서 가장 큰 자리를 차지하는 둥근 사각형 패널, 맨 아래에 가장 빠른 기록을 보여 주는 작은 회색 글씨 한 줄이 위에서 아래로 가운데 정렬되어 있습니다. 패널은 처음에 연한 남보라색 바탕에 진한 보라색 글씨가 두 줄 적혀 있고, 시작 버튼은 따로 없어서 이 패널을 직접 클릭해 시작합니다. 클릭하면 패널이 부드럽게 연한 빨간색으로 바뀌어 무작위로 잠시 기다리다가 갑자기 진한 초록색으로 채워지고, 이때는 작은 줄이 사라져 큰 글씨 한 줄만 보입니다. 초록색일 때 다시 클릭하면 패널이 아주 연한 초록색 바탕에 진한 초록색 글씨로 바뀌면서 걸린 시간이 밀리초 단위로 나오고 다시 해 보라는 안내가 함께 뜹니다. 초록색이 되기 전에 누르면 패널이 연한 주황색으로 바뀌면서 다시 시작하라고 알려 줍니다. 맨 아래 기록은 이전보다 빠를 때만 바뀌고 여러 번 해도 사라지지 않습니다.