달리는 까까

[달리는 까까] UI 개선

기존 alert()나 confirm()을 이용해 다음 스테이지 이어달리기 또는 로비로 돌아가기 기능을 구현했었다. 기능은 잘 동작하지만 전체 UI와 맞지 않는 디자인이다 보니 이질감이 생겼다. 이번에는 쿠키런과 비슷한 디자인으로 확인창을 디자인 해봤다. 확인창을 띄우는 방법은 paused 박스나 crash_filter를 띄우는 방식과 동일하다. 확인창을 디자인한 후 display: none;으로 설정하고, 스테이지를 클리어하면 display: block;으로 변경하면 된다. 기존에 alert()과 confirm()을 사용할 때와 내부적인 코드는 동일하기 때문에 금방 만들 수 있었다. const nextStage = () => { cookie.movex = 0; gameBackground.gameBox.s..

[달리는 까까] 맵 제작하기

맵 정보 프로토타입 저번에 스테이지를 이어달리도록 하면서 스테이지 클래스를 설명했었다. 스테이지 클래스 생성자에 있는 정보들이 맵 정보 프로토타입이다. //stage1 정보 const stage1 = { name: "STAGE1", backgroundUrl: "./lib/backgrounds/game/dark_castle.png", groundUrl: "./lib/backgrounds/ground/mint_wood.png", length: 10200, jumpObstacle: "obstacle table", jumpObstaclePosition: [1000, 1500, 5000], doubleJumpObstacle: "obstacle clocks", doubleJumpObstaclePosition: [2..

[달리는 까까] 아이템 추가

아이템 클래스 아이템 타입을 받아 그에 맞는 메서드를 호출한다. 쿠키와의 충돌 체크는 젤리와 동일한 방식으로 한다. 질주 blast() { document.querySelector(".cookie").classList.add("blast"); cookie.speed *= 2; cookie.superCookie = true; setTimeout(() => { document.querySelector(".cookie").classList.remove("blast"); if (!document.querySelector(".cookie").classList.contains("giant")) { document.querySelector(".cookie").classList.add("supper"); } cooki..

[달리는 까까] 스테이지 이어 달리기

데이터 저장 하나의 맵을 쭉 달리는 것 보다는 여러 맵을 이어 달리면서 다양한 배경과 장애물 디자인을 적용하고 난이도도 점점 어려워지게 해야 게임이 더 재밌어질 것이다. 그래서 지금까지 총 4개의 스테이지를 만들었는데, 스테이지가 끝날 때마다 다음 스테이지로 바로 넘어가거나 로비 화면으로 돌아와 현재 점수를 보며 쉴 수 있게 만들었다. 로비 화면에서 플레이 버튼을 다시 눌렀을 때 종료한 스테이지의 다음 스테이지부터 이어 달리며 이전까지의 데이터를 다시 불러오려면 서버와 같은 저장공간이 필요하다. 그러나 아직 서버와의 연결은 구현하지 않았기 때문에 localStorage를 이용해 사용자의 로컬 환경에 데이터를 저장하는 방법을 택했다. https://ant-hill.tistory.com/81?category..

[달리는 까까] 이미지 사전 로드와 로딩 페이지

이미지 사전 로드 게임을 어느 정도 완성한 후 github page를 이용해 게임을 배포해 봤다. 그러자 로컬 환경에서는 확인할 수 없었던 문제들이 발생했는데, 심각한 문제들 중 하나가 바로 이미지 로딩 시간으로 인한 깨짐이었다. 로컬 환경에서는 이미 모든 이미지가 캐시로 저장되어 있어 문제가 없었다. 그러나 처음 플레이하는 환경에서는 쿠키의 여러 모션(점프, 슬라이드 등)이 빠르게 로딩되지 않아 키를 처음 눌렀을 때는 쿠키가 사라졌다가 두 번째 눌러야 이미지와 애니메이션이 제대로 보이는 상황이 발생했다. 뿐만 아니라 스테이지가 변경되었을 때 배경 이미지와 바닥 이미지가 나타나는 데도 많은 시간이 걸렸다. 이 문제를 해결하기 위해 이미지 사전 로드 기법을 이용했다. const loadImg = () =>..

[달리는 까까] 메인 화면을 로비로 만들기

index.html에 해당하는 로비 화면이다. 스크린샷이라 움직임은 보이지 않지만 가운데에 귀여운 쿠키가 띠용거리며 서있다. 맨 위 가운데에는 내 최고 점수와 현재 점수가 표시된다. 게임을 플레이하면 여러 스테이지를 달리게 되는데, 스테이지 하나가 끝날 때 마다 현재 점수에 해당 스테이지의 점수가 더해진다. 이렇게 쿠키가 죽거나 마지막 스테이지를 클리어할 때까지 달린 점수를 모두 더해 기록을 저장한다. 최고 점수는 현재까지 세운 모든 기록 중 최고 점수다. 맨 오른쪽 상단의 동그란 버튼은 지금까지의 모든 데이터를 리셋하는 버튼이다. 최고 기록과 현재 기록이 모두 사라진다. 우측 하단의 Play 버튼을 눌러 게임을 플레이할 수 있다. 왼쪽 상단에는 현재 점수에 맞는 랭크 이미지와 랭크 이름이 보여진다. 현..

[달리는 까까] 점수와 쿠키 체력 업데이트 및 인게임 UI

점수 업데이트 쿠키가 젤리를 먹으면 그 젤리의 점수만큼 총 점수에 더해준다. 점수는 젤리 종류에 따라 다르게 설정해 준다. 젤리 객체를 생성할 때 점수를 넘겨주는 방법도 있겠지만 간단하게 젤리 클래스에서 처리했다. this.score = type === "coin" ? 10 : type === "" ? 100 : type === "yellow_bear" ? 200 : type === "pink_bear" ? 300 : type === "blue_bear" ? 500 : type === "big_bear" ? 1000 : 0; 점수 업데이트는 젤리 클래스의 crashJelly() 메서드에서 충돌을 체크한 후 setScore() 메서드를 호출해 처리한다. setScore() { if (!gameProp.pa..

[달리는 까까] 달리면서 젤리 먹기

파일 구조 - 로비 index.html lobby.js lobby.css - 게임 game.html: 인게임 엘리먼트 game.js: 인게임 데이터, 프레임에 따른 동작, 로드시 초기화 등을 담당 class.js: 스테이지, 쿠키, 젤리, 아이템, 장애물 등의 클래스 stage.js: 스테이지별로 거리와 장애물, 젤리패턴 등의 정보를 저장(game.js를 통해 class.js의 Stage 클래스에 전달) game.css: 인게임 엘리먼트 디자인, 각종 애니메이션 쿠키 애니메이션 쿠키가 달려가는 것처럼 보이려면 애니메이션을 추가해야 한다. 아무런 움직임 없이 위치만 바꾸면 자연스럽지 않기 때문이다. 달리기, 점프, 슬라이드 등 쿠키의 움직임을 구현할 스프라이트 이미지를 저장하고 css animation과 ..