2주차 내일배움캠프 개발일지

2주차 리뷰를 시작하려 합니다.

 

 

1. updown 게임 중 try-except 구문과 for, if를 사용한 부분

try:
    for num in range(5):
        player_num = int(input("1~100 사이의 수를 입력해주세요 >"))
        if player_num > 100 or player_num < 0:
            raise Exception
        elif player_num < computer_num:
            print("up")
            try_count += 1
        elif player_num > computer_num:
            print("down")
            try_count += 1
        elif player_num == computer_num:
            print("성공~! 정답입니다.")
            print("{0}번 만에 맞췄습니다.".format(str(try_count)))
            try_count += 1
except Exception as player_num:
    print("{player_num}은 숫자가 아니거나 1~100 사이의 수가 아닙니다.")

1~100 수를 input으로 받아 for 문에서 5번 돌린다. try_count의 경우 여기선 보이진 않지만 초기값을 0으로 지정했다.

그래서 초기 random으로 지정한 컴퓨터의 수를 맞출 때마다 count가 올라가도록 한다.

 

2. updown ai 구현

num = int(input("1~100 사이의 수를 입력하세요"))

first = 25
last = 100
print(first)
val = input("up, down, answer 중 알맞은 값 하나를 입력하시오.")

while True:
    for j in range(5):
        median = int((first+last)/2)
        print(median)
        val = input("up, down, answer 중 알맞은 값 하나를 입력하시오.")

        if(val == "up"):
            first = median
        elif(val == "down"):
            last = median
        elif(val == "answer"):
            print("정답입니다")
            print("게임이 끝났습니다")
            quit()
        else:
            print("다시 입력해주세요.")
            break

이번에는 컴퓨터가 내가 지정한 수를 맞추는 것이다. 왜 first를 25로 했는지는 TIL에 적어놨다. 원래 정석은 가운데 수를 부르도록 하는게 컴퓨터의 승률을 높이는데 도움을 준다. 이번에는 반복문 while을 사용했다. 

for 반복문과 달리 while 반복문의 경우 True를 주게 되면 무한 loop를 만드는 것이 가능하다. break를 함으로써

무한 loop를 빠져나가도록 하자.

 

3. baskinrobbins 31 게임 만들기

import random
print("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n!!!!!!!!!!  GAME START  !!!!!!!!!!\n!!!!!!!! Baskinrobbins 31 !!!!!!!!\n!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n게임은 간단합니다.\n플레이어와 컴퓨터 선공은 랜덤으로 정해집니다.\n플레이어와 컴퓨터는 연속하여 3개 숫자까지 말할 수 있습니다.\n즉 플레이어가 선공일 때 1,2를 말했다면 컴퓨터는 3 또는 3,4 또는 3,4,5를 말할 수 있는 것입니다.\n이후 31을 입력하게 되는 쪽이 지게 됩니다.\n그럼 준비 되셨나요~?")
print('ㅡ' * 60)
num = 0
attack = random.randrange(1, 100)
if attack <= 50:
    cpu = list()
    remain_num = 31 - num
    cpu_num = random.randint(1, 3)
    for value in range(cpu_num):
        num += 1
        cpu.append(num)
        if num <= 3:
            print(f"상대방 숫자 {num} 이에요.")


while True:
    player = list(map(int, input("플레이어는 숫자를 입력하세요: ").split(",")))

    if len(player) > 3:
        print("숫자는 3개까지만 입력해주세요.ex)1,2,3")
        continue
    if player[0] != num + 1:
        print("상대방이 마지막에 부른 숫자보다 1만큼 큰 숫자로 시작하세요.")
        continue
    if len(player) == 3:
        if player[2] - player[1] != 1 or player[1] - player[0] != 1:
            print("숫자는 연속적으로 입력해주세요.ex)4,5 or 1,2,3")
            continue
        else:
            num = player[2]
    elif len(player) == 2:
        if player[1] - player[0] != 1:
            print("숫자는 콤마(,)로 구분해요. 또한 연속된 숫자가 입력되어야 해요.")
            continue
        else:
            num = player[1]
    elif len(player) == 1:
        num = player[0]

    if num >= 31:
        print("실패했어요.")
        break
    cpu = list()
    remain_num = 31 - num
    cpu_num = random.randint(1, 3)
    for value in range(cpu_num):
        num += 1
        cpu.append(num)
        if num >= 31:
            break
        if cpu_num <= remain_num:
            print(f"상대방 숫자 {num} 이에요.")
            continue
if cpu[-1] == 31:
    print("플레이어가 승리했어요.")

 

 

예외처리는 전부하진 않았다. 숫자가 아닌 글자를 입력한다거나 예외처리에서 벗어나는 숫자 등을 입력하게 되면

Error가 나오게 된다. 복사해서 붙여넣어서 굳이 오류가 나오는지 실행해보지는 않도록 하자.

 

4. 턴제 rpg 게임 만들기

class Object:
    def __init__(self, name, hp, power):
        self.name = name
        self.hp = hp
        self.power = power
    def attack(self, target):
        print(f"{self.name}이(가) {target.name}을(를) 공격!")
        print(f"{target.name}에게 {self.power}만큼의 데미지!")
        target.hp = target.hp - self.power
        if (target.hp <= 0):
            print(f"{target.name}을(를) 죽였습니다!")
        else:
            print(f"{target.name}의 HP가 {target.hp}이 되었습니다")

class Player(Object):
    def magic(self, target):
        print(f"{self.name}이(가) {target.name}에게 마법을 사용!")
        print(f"{target.name}에게 50만큼의 데미지!")
        target.hp = target.hp - 50
        if (target.hp <= 0):
            print(f"{target.name}을(를) 죽였습니다!")
        else:
            print(f"{target.name}의 HP가 {target.hp}이 되었습니다")

클래스와 함수를 적절히 사용하는 법과 상속을 하는 방법을 배웠다. 또한 f-string을 사용했다. 처음에 클래스를 잘못

사용하여 생성자를 만들지 않았는데, 앞으로는 생성자, 매개변수(파라미터)를 잘 파악하고 코딩을 해야겠다 생각했다.

 

5. 카카오톡 프로필 화면 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Kakao Profile</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div id="main-container">
        <div id="text-wrapper">
            <div id="line">
            <hr>
            </div>
            <p>안녕하세요 저는 또치입니다! 저는 아프리카에서 온 암컷 타조예요. 원래는 라스베가스 서커스단에서 일했는데, 너무 힘들어서 관두고 둘리 일당에 합류했답니다!</p>
        </div>
        <div id="image-wrapper">
            <img id="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfX_g62mUIl9aR3nLRdX8Bgk-n3G1Alw-hePu-UWymRmqFXHZK">
            <p><strong>또치</strong></p>
        </div>
        <div id="icons-container">
            <div class="icon-wrapper">
                <img class="icon" src="나와의 채팅.png">
                <p class="small-text"><strong>나와의 채팅</strong></p>
            </div>
            <div class="icon-wrapper">
                <img class="icon" src="프로필관리.png">
                <p class="small-text"><strong>프로필 관리</strong></p>
            </div>
            <div class="icon-wrapper">
                <img class="icon" src="카스.png">
                <p class="small-text"><strong>카카오스토리</strong></p>
            </div>
        </div>
    </div>
</body>
</html>

처음 HTML을 생성할 때 div를 잘못 묶어서 고생했다. 또한 id, class 개념이 헷갈려서 css를 작성할 때 헤매기도 했다.

튜터님께선 해설을 해주실 때 css를 어떻게 구성했는지 주석으로 설명을 해준다면 다른 개발자들이 보기에도 좋다 

말씀해주셨다. 

#text-wrapper {
  width: 350px;
  margin: 0 auto;
  margin-top: 150px;
  color: white;
  font-size: 18px;
}

#line {
  width: 35px;
  margin: 0 auto;
}

#icons-container {
  width: 480px;
  height: 300px;
  background-color: rgba(255, 255, 255, 1);
  position: absolute;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

css의 일부분을 가져와봤다. HTML에서 class로 지정한 부분은 위 코드와 갗이 #으로 시작한다. id로 지정하면 @로 시작한다. css가 적용되지 않는다고 놀라지 말고 이런 부분을 한번 더 확인해보는 것이 필요해보인다.

css는 디자인이기 때문에 가로, 세로, 넓이 등의 크기와 오른쪽, 왼쪽, 위, 아래 등의 방향 또는 배치 위치를 지정할 수 있다. 색 지정도 가능한데, background 를 사용함으로써 가능하다.

완성본인 카카오톡 모습

6. 인스타그램 클론 코딩 전 연습하기

 

카카오톡을 완성하는 것도 조금 까다로웠다. 그런데 갑자기 난이도가 확 오른 느낌을 받았다.

어쩌면 스파르타 코딩클럽에서 크리스마스 선물을 준게 아닌가싶기도 하고...

프로젝트 완성본을 요새 제 시간에 못냈다. 이유는 완성하지 못했기 때문이다. 왜 완성하지 못했냐면

우선 실력이 아직 부족했고, 대학교 종강과 연휴와 연말의 분위기에 취해... 나른해졌다고 생각했다.

그리고 디스크로 인한 꾸준한 병원방문도 나를 힘들게 했다. 부모님껜 어영부영 넘겼지만

사실 신경주사가 생각보다 아팠고, 약을 복용하니 머리가 정말 어지러워서 집중하는게 쉽지 않았다.

그리고 한가지 변명을 더 하자면 자취를 하는 나에게 별로 좋지 않은 상황이 계속되어서

요즘 일거리를 찾는데 조금 신경을 쓴게 코딩에 소홀해진 원인이 되었다고 본다.

 

그래도 포기만 안 하면 된다

 

그래서 프로젝트 완성과 제출에 초점을 맞추기 보단 튜터님과 다른 교육생들이 어떻게 코드를 구성했는지를

열심히 봤다... 그리고 할 수 있는만큼 비슷하게 구성을 했다.

 

나름 비슷하게 만들려고 노력해본 인스타그램

그리고 인스타그램 스토리 부분을 스크롤로 넣고 싶어 구현을 했는데 원이 아닌 타원으로 형태가 나와 애를 먹었다.

그리고 그 해결 방법으로 같은 비율로 줄어들고 커지는 것이 구현 가능한 vw에 대해 알 수 있게 되었다.

/* story 가로 스크롤 입히기

 */
.story-wrap {
    margin-top: 30%;
    margin-bottom: 5%;

    width: 100%;
    height: 100%;
    overflow-x: auto;
    white-space: nowrap;
    justify-content: flex-start;
    text-align: center;
}
.story-wrap > ul {
    font-size: 0
}
.story-wrap > ul > li {
    display: inline-block;
    border-radius: 50%;
    font-size: 10px;
    width: 5vw;
    height: 5vw;
    background-color: aquamarine;
}
.story-wrap > ul > li:nth-child(odd) {
    background-color: peachpuff;
}

vw로 구성을 하니 원의 형태로 표현 가능했다.

 

다음주부터는 이제 팀별 프로젝트가 본격적으로 시작된다. 팀에 도움이 되어야 하는데, 폐를 끼칠까봐 걱정이 된다.

할 수 있는 최선을 다해서 모두 원하는 바를 이룰 수 있게 된다면 좋겠다.