본문 바로가기

프로젝트5

2. 퀴즈 사이트 본 포스팅은 Florin Pop 유튜브 채널을 보고 학습한 내용을 바탕으로 작성되었습니다. 😺 만들고자 하는 것 위 사진처럼, 퀴즈를 불러오고 정답을 맞출 수 있는 시스템을 만들어 보려고 한다. 물론, 퀴즈를 불러오는 API는 구현되어 있지 않으므로 하드코딩으로 진행할 것이다. 😺 HTML 분석 먼저, 화면 가운데에 위치해 있는 가장 큰 div가 있고, 안에서 두 부분으로 나누어진다. 첫번째는, 문제와 답안을 랜더링하는 div가 이다. 이 부분에서 문제와 답안으로 다시 나누어 진다. 문제는 h2를, 답안은 ul> li를 사용하고 li 내부에서 input과 label을 합쳐 단 하나의 정답만 클릭 할 수 있도록 구현할 것이다. 두번째는, 답안을 클릭하고 제출하는 button이다. 😺 HTML 코드 작성 Q.. 2021. 11. 8.
1. 새해 카운트다운 웹 본 포스팅은 Florin Pop 유튜브 채널을 보고 학습한 내용을 바탕으로 작성되었습니다. 😺 만들고자 하는 것 첫번째 챌린지는 새해까지 얼마나 남았는지를 알려주는 사이트이다. 😺 HTML 분석 먼저 큰 제목에 해당하는 "New Years Eve"에 div가 하나 들어 갈 것이고, 그 밑으로 days, hours, mins, seconds가 들어갈 큰 div 안에 4개의 div가 만들어져야 한다. 😺 HTML 코드 작성 먼저, html 뼈대 코드를 만들어 준 후, script.js, style.css파일을 연결해 준다. 이후, 분석한 결과에 따라서 HTML코드 먼저 생성해 보도록 하자. New Years Eve 0 days 0 hours 0 mins 0 seconds 😺 HTML 코드 작성한 결과 😺 C.. 2021. 11. 2.
Node.js와 Socket.io를 이용한 멀티플레이 탄막피하기 게임 개발기 (3) 기말고사에 인턴까지 겹쳐서 한동안 작성을 못했네요.. 게임 개발은 마무리되었고, 잘 제출했습니다. 하지만 조금 아쉬운부분이 존재해서 조금씩 시간내서 다듬어보려고 해요. 먼저 게임 링크입니다. (소리가 클 수도 있으니 주의해주세요) https://media-software-engineering.herokuapp.com/ Professor VS Student Professor VS Student Game Start media-software-engineering.herokuapp.com Player 0가 호스트가 되며, 게임 시작 버튼을 누르면 음악이 나오면서 게임이 시작됩니다. 아쉬운 점 -1. 플레이어가 방을 만들어서 유저를 모으지 못함 -2. 플레이어 색을 자신이 지정하지 못함 -3. 플레이어의 아이디.. 2021. 7. 18.
Node.js와 Socket.io를 이용한 멀티플레이 탄막피하기 게임 개발기 (2) | 21-05-10 지난 글 [프로젝트/학교 수업] - Node.js와 Socket.io를 이용한 멀티플레이 탄막피하기 게임 개발기 (1) | 21-05-06 다음 글 [프로젝트/학교 수업] - Node.js와 Socket.io를 이용한 멀티플레이 탄막피하기 게임 개발기 (3) 개발 상황 이전 진행상황은 클라이언트가 게임에 접속한 뒤, 키보드 방향키를 통해 공을 움직이면 그 공이 socket.io서버를 통해 연동이 되어 실시간으로 플레이어의 위치가 전송되는 것 까지 개발했다. 학기중이라 바빠서 이것만 할 수는 없어 진행이 조금 느리다. 현재까지 변경된 점은 크게 세 가지 이다. 첫째, 적들의 생성 둘째, 적들의 이동 셋째, 적들과의 충돌판정 변경된점에 맞춰 코드를 올리고 코드 분석을 해 보려 한다. 마찬가지로 짧은 기간동안.. 2021. 5. 10.
Node.js와 Socket.io를 이용한 멀티플레이 탄막피하기 게임 개발기 (1) | 21-05-06 개발 동기 이번 학기에 외국인 교수님의 수업을 듣고있는데, 이 수업에서 협업 방법, OOA, OOD 설계 방법과 디자인 패턴들을 배우면서 실제로 적용해보는 팀 프로젝트를 하고있다. 프로젝트는 어떤 만들고싶은 게임을 하나 정해서 제안서를 작성하고, OOA, OOD를 설계 한 뒤, 설계된 구조에 맞춰서 개발을 하는 것이다. 프로젝트를 하면서, 몇 주 간격으로 Milestone을 진행하고, 한 주 간격으로 Sprint를 진행하면서 개발 상황을 계속해서 브리핑을 해야한다. 중간고사가 끝나고, 이제 실제로 개발할 단계가 되어서, 개발기와 함께 개발 과정을 작성해보려 한다. 게임에 사용되는 툴은 자유롭게 선택하면 되고, 다만 Client-Sever Architecture는 필수로 들어가야 한다. 먼저, 우리 팀은 .. 2021. 5. 6.

티스토리툴바