(개인 과제) 가위 바위 보 게임 웹으로 만들기!

2번 과제에 해당하는 가위 바위 보 게임을 온라인에서 작동 할 수 있도록 해보자!

 

과제 내용:

1. 앞서 진행했던 가위 바위 보 게임 의 입출력을 Flask 와 HTML 을 이용하도록 변경하세요.
   • 과제2 에서는 가위 바위 보 게임 입출력을 콘솔(터미널)에서 진행했어요.
   • 이번 과제에서는 HTML form 을 통해서 입력을 받으세요.
   • Flask 내부에서 로직을 처리한 후 HTML 에 출력되도록 구성해보세요.

 

1.
먼저 2과제에서 사용했던 가위 바위 보의 로직을 그대로 가져와서 사용을 하고
결과의 표기 방법을 html로 만들어서 가져오는 걸로 해보자.

2.
먼저 서버를 만들어야 하는데 git을 이용해서 만드는 방법을 다시한번 찾아보도록 합시다!.

3.
그 다음으로 html으로 서버내에 표시를 하는 화면을 어떻게 구상을 할 것인지. 
짜 봅시다!.

먼저 게임 화면 이전에 메인 화면

 

인게임 페이지

대충 내가 그려보는 이미지는 이런 느낌이다.

 

html과 css를 오랜만에 하다 보니 어려운 것이 너무 많다....
하나하나 다시 차근 차근 해보고 있는데..

이런 형식을 자주 보게 된것 같다.

그리고 클래스 안에 빠르게 스타일을 적용을 시킬 수 있는 방법으로 부트스트랩 클래스인데

https://sjy1218vv.tistory.com/60

[CSS]부트스트랩 클래스 살펴보기

여기 블로에서 잘 설명이 되어 있습니다!

 

그렇게 해서 만들어진 html 가위바위보 화면이다.

문제점 발견...

내가 짠 로직에서 버튼의 입력 값을 받아서 그림으로 출력을 하고 컴퓨터의 값이랑 비교를 해서 

승부 결과를 알림으로 내보내는 것을 만들었는데 문제가 승부 결과랑 알림은 알맞게 나오는데 나의 손모양이

늦게 나오는 문제가 있었다.

튜터님과 의논을 해본 결과 사진을 받아서 변경을 해주어야 하는 시간동안 알람이 먼저 작용을 해버려서
순서가 꼬이게 된 것 같다고 하셨고 해결책으로 알람이 나오는 부분에 시간적인 딜레이를 주어서 사진이 변화 될 때까지 
기다려주는 방법으로 하였습니다.

 

 

자 이제 기본적인 html의 디자인은 끝이 났고

서버를 구축해서 연동을 시켜보자

과제에서는  Flask를 이용하여 서버를 구축 하라고 하였으므로 Flask 서버 구축 방법을 알아보자

https://velog.io/@mstar228/Flask-%EC%82%AC%EC%9A%A9%EB%B2%95

Flask 사용법

 

구글링 결과 이 블로그에서 사용방법이 아주 잘 설명이 되어 있었습니다.

 

로컬로 서버를 만들고 그 안에서 html을 구동하는 것 까지는 성공 했다..

자~!!~!이제 내가 해야 할 것을 정리 해보자.

지금 내가 해야 하는 기능

1.이번 과제에서는 HTML form 을 통해서 입력을 받으세요

지금은 그냥 html자체에서 입력을 받을 값을 바로 java script로 계산 해서 출력을 했지만 Flask를 이용하면서
html의 값을 받아들이는 방법을 알아보고

2. Flask 내부에서 로직을 처리한 후 HTML 에 출력되도록 구성해보세요.
html에서 받아들인 값을 Flask내부에서 계산을 하고 경우에 따라 나오는 값을 정해서 내보내는 값을 정해주어야 하고
내보낸 값을 다시 html에서 받아서 그림으로 나타낼 수 있게 해야 한다.

3. sqlite 로 가위바위보 게임 전적을 저장하세요.
그리고 이 모든 것 들이 정상적으로 작동을 할 때 서버에 데이터 배이스를 만들어서 기록을 할 수 있게 만들어야 한다.

 

다음날

 

오늘 구글링을 통해서 Flask를 이용해서 html에서 값을 받아들이고 반대로 다시 출력하는 것을 배워 보도록하자.

https://m.blog.naver.com/dsz08082/221804755045

[Python Flask] #04 파이썬 플라스크 GET POST

 

먼저 이 블로그를 참조 했다.

https://velog.io/@edwinstory/pythonflask04

서버의 GET 방식과 POST 방식 이해하기(python, flask)

여기 블로그도 설명이 잘되어 있다.

sqlite 데이터 베이스 설정

추가 프로그램과 pip설치 필요하다.

여기서 html화면상에서 내가 입력한 값을 Flask로 옴기는 것이 정말로 어려웠다...

그래도 튜터님들에게 의논하고 입력을 넣는것 까지는 가능하게 만들었다!!
console.log()를 활용해서 javascript에서 어디까지 입력이 되고 어디까지 입력이 안되고 있는지 
하나하나 알아보고면서 찾아가니 해결을 하는 방법을 찾게 되었습니다!!!

 

javascript

    // 내가 묵찌빠 버튼 눌렀을 때 인풋값 넣고 그 값이랑 컴퓨터 로테이션 값이랑 비교를 해서 승패 결과 나오게 하기
    document.querySelectorAll('.button_area input').forEach(function (button) {  // 내가 누르는 버튼 요소 가져오기
        button.addEventListener('click', function () { // 내가 클릭을 했을 때 작동
            var value = button.value;
            console.log(value)
            let data = {
                play_time,
                win_number,
                lose_number,
                draw_number,
                value
            }
            console.log(data)
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "{{ url_for('game_result')}}", true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send(JSON.stringify({ data }));
        });
    });

Flask

@app.route('/game/result', methods=['POST'])
def game_result():
    # html에서 json코드로 온것을 data에 딕셔너리 형식으로 저장
    data = request.json
    # 나의 선택 값을 변수에 저장 "가위=1", "바위=0", "보=-1"
    my_num = change_value(data["data"]["value"])
    # 컴퓨터의 선택값을 랜덤으로 저장
    computer_num = random.randint(-1, 1)
    # 컴퓨터의 값을 나의 값과 빼준다 이때 합이 0이 나오면 무승부, -1이나 2가 나오면 이기게 된다 그이외에는 패배
    score = my_num - computer_num
    
    # 승패무결과및 플레이 횟수를 기록해서 저장
    time = int(data["data"]["play_time"]) 
    draw = int(data["data"]["draw_number"])
    win = int(data["data"]["win_number"])
    lose = int(data["data"]["lose_number"])
    
    time += 1
    
    if (score == 0):
        draw += 1
    elif score == -1 or score == 2:
        win += 1 
    else: 
        lose += 1 
    
    print(time, draw, win, lose)
    
    data_return = {
        my_num,
        computer_num,
        time,
        draw,
        win,
        lose
    }
    
    return render_template("game.html", data = data_return)

print() 문으로 입력 값이 잘 오는지 찾아보면 아주 잘오는 것이 확인이 됩니다!!1

드디어....

하지만 이제는 반대로 Flask에서 html로 넘겨주는 방법을 찾아 보야야 합니다..

 

또 그 다음날

오늘은 플라스크에서 데이터를 전송하여 html에서 데이터를 받아 올 수 있도록 해보자.

html에서 name=""과 value=""의 차이를 알게 되었다...

딕셔너리에서 key에 해당하는 것이 name 
value는 value다 
즉 dictionary = { "name" : "value" }와 같다고 보면된다

html에서
<input type="text" name="text" id="text">

<input type="submit" value="upload" id="upload">

이렇게 두가지 유형이 있으면

위에는 입력창이며 입력창은 text라는 변수를 계속 가지고 있어야 하니
name=을 쓰고 안에는 필요한 값을 넣어주는 것이고

아래는 버튼 형식이며 클릭을 하면 입력이 되는 방식이랑 value의 값은 고정적으로 발생만 하게 되기에
미리 value="upload"라는 값을 넣어주고 클릭을 하면 값이 생성이 되는 방식을 사용해 주는 것 같다.

4시간을 투자한 뒤!

 

자자 이제 html과 flask를 완벽하게 데이터를 주고 받는 방법을 깨달았어요

내가 아주 어려운 방법으로 만들고 있었다는 것을 깨달았다.

처음에는 자바 스크립트에서 변수를 만들어서 값을 보내주는 방법으로 만들었지만 이방법 대신에 
body안에서 html의 데이터 전송 post방법으로 보내주는 방법이 더욱 쉽다는 것을 알았다.

    <form action="{{ url_for('game_result')}}" method="post">
        <div class="button_area">
            <input type="submit" id="scissors" name="user" value='가위'>
            <input type="submit" id="rock" name="user" value='바위'>
            <input type="submit" id="paper" name="user" value='보'>
        </div>
    </form>

이 form 이라는 방법을 써서 form안에서 일어나는 모든 자료를 Flask의 game_result라는 메소드에 넣어준다는 것이다.
이러면 바로 app.py로 가서 변수를 받아오는  my_num = request.form['user']문을 써서 변수에 값을 넣어줄 수 있다.....
이렇게 쉬운 방법이 있을 줄이야...

@app.route('/game', methods=['POST'])
def game_result():
    my_num = change_value(request.form['user'])
    print(my_num)

    computer_num = random.randint(-1, 1)
    # 컴퓨터의 값을 나의 값과 빼준다 이때 합이 0이 나오면 무승부, -1이나 2가 나오면 이기게 된다 그이외에는 패배
    score = my_num - computer_num
    print(score)
    # 승패무결과및 플레이 횟수를 기록해서 저장
    playtime = 0
    draw = 0
    win = 0
    lose = 0

    playtime += 1

    if (score == 0):
        draw += 1
    elif score == -1 or score == 2:
        win += 1
    else:
        lose += 1

    print(playtime, draw, win, lose)

    data_return = {
        "my_num": my_num,
        "computer_num": computer_num,
        "playtime": playtime,
        "draw": draw,
        "win": win,
        "lose": lose
    }

    print(data_return)

    return render_template("game.html", data=data_return)

그리고 찾아보면서 알게 된 정보로는 get 과 post의 차이인데.
내가 이해 한 것을 쉽게 풀어보자면 먼저 get의 방식은 주소창에 변수를 넣고 빼는 것 이라고 생각하면 될 것 같다.

이런 주소 처럼 만드는 형식인데 위에 주소의 변수는 type과 returnURL이 변수로 만들어진것이라고 볼 수있다.

그다음은 post인데.

post는 주소가 아닌 html 내부 body같은곳에 설정을 해서 거기서 나오는 value값을 가져오는 것이다.

그 다음으로는 내가 누른 값과 컴퓨터의 결과 값에 맞추어 값을 변경 시켜주는 것이다.

<script>
    // 내가 누를 버튼 값 가져와서 값 가져와서 변수화
    var userimage = "{{ data['my_num'] }}"
    var computerimage = "{{ data['computer_num'] }}"
    // 각 변수에 맞추어 이미지 위치 잡아주기
    imageplace_user = userimage === '1' ? '-190px' : (userimage === '0' ? '0' : '-390px');  // 내가 누른 버튼에 해당하는 값을 좌표값을 저장 가위면 -190px 바위면 0px 보면 -390px
    const UserImages = document.querySelectorAll(".user"); // user 이미지의 모든 요소 가져오기
    UserImages.forEach(function (UserImages) {
        UserImages.style.background =  // 설정 이미지 가져와서 반영하기
            'url(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbWw5ZI%2Fbtr97poHgiI%2FkAb5MSKujzs0i1y7imqQy0%2Fimg.jpg) ' + imageplace_user + ' 0';
    })

    imageplace_computer = computerimage === '1' ? '-190px' : (computerimage === '0' ? '0' : '-390px');  // 내가 누른 버튼에 해당하는 값을 좌표값을 저장 가위면 -190px 바위면 0px 보면 -390px
    const ComImages = document.querySelectorAll(".computer"); // user 이미지의 모든 요소 가져오기
    ComImages.forEach(function (ComImages) {
        ComImages.style.background =  // 설정 이미지 가져와서 반영하기
            'url(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbWw5ZI%2Fbtr97poHgiI%2FkAb5MSKujzs0i1y7imqQy0%2Fimg.jpg) ' + imageplace_computer + ' 0';
    })
</script>

이렇게 하면 내가 버튼을 누르고 Flask에서 계산을 하고 다시 값을 돌려주게 되면 그 값중에 
내가 선택한 값고 컴퓨터 랜덤 값이 나와서 거기에 맞는 이미지를 골라주면 된다

 

그 다음로 추가로 메인 화면에 배경음악을 넣어 보면 어떨까 싶어서 배경음악을 찾아서 넣는 방법을 알아보았는데.

처음에는 그냥 html안에 음악파일을 넣어주는 걸로 했지만 자동재생이 되지 않는 다는 것을 알았다.

크롬에서 광고등에 의해서 자동재생을 막아두었다는 것이다...

그래서 차선으로 플레이 버튼을 만들고 거기에 음악을 재생 할 수 있도록 만들었다.

    <!-- 배경음악 버튼 생성 -->
    <div id="btn_position">
        <button class="btn1">
            <img id="chocobo" src="{{ url_for('static', filename='photo/chocobo.jfif') }}">
        </button>
        <script src="index.js"></script>
    </div>

    // btn1을 눌렀을 때 sound1.mp3 재생
    document.querySelector(".btn1").addEventListener("click", function () {
        var audio1 = new Audio("{{ url_for('static', filename='music/main_bgm.mp3') }}");
        audio1.loop = true; // 반복재생
        audio1.volume = 0.5; // 음량 설정
        audio1.play(); // sound1.mp3 재생
    })

 

이제는 데이터베이스로 자료를 넣고 빼는 방법을 찾아보아야 한다.

먼저 데이터 베이스를 만는 명령어!

import sqlite3

# 데이터 베이스 생성
conn = sqlite3.connect('database.db')
print('create & connect database')
# 테이블 생성
try:
    conn.execute(
        '''
    create table users (user_id text, playtime INTEGER, draw INTEGER, win INTEGER, lose INTEGER)
    '''
    )
    print('create table')

    conn.close()
except sqlite3.OperationalError:
    pass

 

데이터 베이스는 찾아오거나 저장을 할 때 항상 연결을 해주고 해야하며
커서설정을 해주어야 한다.

    # 데이터베이스 연결
    with sqlite3.connect("database.db") as con:
        cur = con.cursor()
                    cur.execute("INSERT INTO users (user_id, playtime, draw, win, lose) VALUES (?, ?, ?, ?, ?)",
                        (user_id, playtime, draw, win, lose))
            print("사용자 등록이 완료되었습니다.")

 

이번에는 사용하는 방법

con = sqlite3.connect("database.db")  # "database.db" 파일에 접속합니다.

    cur = con.cursor()  # 커서를 생성합니다.
    # 데이터베이스에서 모든 사용자를 선택합니다.
    cur.execute(f"select * from users")
    rows = cur.fetchall()  # 전체 결과의 행을 가져옴
    rows_as_lists = [list(row) for row in rows]
    con.close()

만약에 전체가 아닌 특정 내가 원하는 id에 맞추어서 가져오고 싶다면??

# html에서 내가 적은 값 가져오기;
    my_num = change_value(request.form['user'])
    print(f'내가 입력한 값은?{my_num}')
    user_id = request.form['user_id']
    print(f'내가 입력한 아이디는??{user_id}')

    # 데이터 베이스에서 내 기록 가져오기
    con = sqlite3.connect("database.db")  # "database.db" 파일에 접속합니다.

    cur = con.cursor()  # 커서를 생성합니다.
    # 데이터베이스에서 모든 사용자를 선택합니다.
    cur.execute("SELECT * FROM users WHERE user_id=?", (user_id,))
    rows = cur.fetchone()  # 결과의 첫 번째 행을 가져옴
    con.close()

이렇게 sql문법이랑 똑같이 where을 사용해서 필터링을 하고 
.fetchone()은 맨위에 하나만 .fetchall()은 전체를 가져온다는 것을 알아두면 좋다,

자 이제 완성이 되었으니 데이터베이스를 만들어 보자.

데이터 베이스에 들어가야 하는 것은

아이디, 플레이횟수, 승, 패, 무 횟수를 기록하게 하였고

각데이터 베이스를 가져오는 기준은 id에 맞추어서 값을 가져오게 만들었습니다!

아이디는 메인화면에서 게임으로 접속 할 때에 기록을 하고 들어오고

아이디가 저번 기록에 포함이 되어 있다면 기록을 가져와서 계속 이어서 할 수 있도록 만들었습니다.

그리고 게임을 플레이 하다가 기록을 볼 수 있는 데 다른 아이디가 얼만큼 잘하는 지
승률이 얼마나 좋은지 맞추어 볼 수 있습니다.

 

마지막 제출의 날!

 

모든것이 완성 되었습니다!!!.

방문해서 게임을 즐겨 보세요.

메인 화면 (billyhyunjun.pythonanywhere.com)

메인 화면