JSFightGame

진행했던 프로젝트들이 너무 React위주로만 진행되어서 JS를 사용한 프로젝트를 진행해보려고 한다.최근 유행하였던 뱀파이어 서바이버도 JS로 만든 게임이라고 하기에 좀 알아보았더니 Phaser라는 것을 사용하였다 하여 알아보았는데 조금 더 공부가 필요해보여 일단은 별다

EventListener의 keydown을 통해 입력된 key를 받아보자먼저 간단하게 clg로 event를 출력해보면입력한 key들이 나온다 우리는 어떤 키가 입력되었는지만 알면 되기 때문에 event.key로 바꾸자d가 입력되면 player를 x축으로 이동시키도록 하

각 캐릭터의 공격 범위를 만들자공격범위의 attackBox를 만들고 캐릭터 색 구분을 효과적으로 하기 위해 color도 추가했다draw에 attackBox를 그려주도록 하고 player와 enemy객체에 color도 추가이제 attackBox가 상대에게 닿았을 때의 코

체력바를 만들어 볼건데 체력바 인터페이스는 js파일에서 그려주는것 보다는 html에서 그려주는것이 더 편하다.body로 전체를 한번 감싸주고 캔버스 위에 체력바를 그리도록 하나의 div로 묶는다잘 그려지긴 하였으나 의도한 캔버스에 오버레이 된 위가 아니라 진짜 캔버스

html파일의 timer부분에 아무 숫자를 넣고 가운데 정렬하자이제 js파일에서 전역변수 timer를 선언하고 timer를 감소시키는 decreaseTimer함수를 정의하면그래도 시간이 줄어들지 않는다.쿼리셀렉터로 함수가 실행될 때 timer안에 있는 텍스트가 바뀌도록

이제 배경이미지를 그려볼건데 그 전에 js파일이 너무 길어 정리가 필요할 것 같다.먼저 class를 따로 빼보자.js폴더를 새로 만들고 classes.js파일을 새로 만든 뒤 Sprite클래스를 잘라내기 하자.그리고 index.html안에를 추가해주자.정상 작동을 확인

저번에 이어 배경에 다른 요소를 추가해 볼건데 그려주는 방법은 이전의 배경과 거의 유사하다.배경과 같이 Sprite로 shop을 선언해주고 animate에 update하면shop의 이미지가 나타난다.크기와 위치가 좀 이상한데 먼저 크기를 조절해주자.Sprite클래스에

캐릭터 이미지를 넣어보자.캐릭터는 Fighter클래스로 생성해주고 있는데 캐릭터 애니메이션을 사용하기 위해선 이전 Sprite에 사용했던 프로퍼티들이 필요하다.Sprite를 extend하고 파라미터를 추가해주고 필요한 프로퍼티들을 추가해 사용할 수 있게 해주자.supe

달릴때의 이미지를 구성하기 위해 먼저 가만히 있을때와 달릴때의 상태를 구분해야 한다 이는 이후 만들 점프 등 다양한 동작에도 해당한다.동작을 구분할 sprites를 만들어주고 player에 sprite로 각 상태를 정해주어 clg로 출력해보았다.Idle과 run 둘

이번 포스팅에선 enemy를 구성해보자 player와 기본적으로 같은 구조이므로 player에서 썼던 것들을 그대로 가져오자.각각의 파일명과 framesMax만 맞게 수정해 주고 주석처리를 풀어주면땅에 좀 가라앉아 있으니 position을 좀 수정해주고 player와

피격모션도 모션에 속하므로 이전 단계들과 유사하다.player쪽에도 Take hit을 추가해주고피격은 takeHit이란 메소드를 새로 만들어 관리하자 충돌부분에서 체력감소부분을 지우고 메소드를 호출하자takeHit 모션이 나오지 않는데 이전과 동일하게 idle모션이 덮

마지막으로 디자인을 적용하자.개인의 취향에 따라 html, css들만 간단히 바꿔주면 되겠다.폰트는 google font에서 press start라는 폰트를 쓰기로 했다.체력바 부분도 css를 좀 수정해주고이 과정에서 현재체력과 최대체력이 구분되어있어 이런 문제가 발생