포시코딩

요즘 간간히 머리 식힐 겸 레데리2에서 미션 하나씩만 깨는 중인데 오늘 굉장히 흥미로운 일을 겪어 블로그에까지 쓰게 되었다. 머프리 패거리라고 평소에 웃통 벗고 돌아다니며 일반인들 괴롭히는 갱단인데 내가 보일 때마다 쏴 죽였더니 오늘 마을 밖으로 나가는데 나를 총으로 쏴서 말에서 떨어뜨리길래 정의구현하고 시체 파밍하러 가다 보니 갑자기 쑥 하고 빠지더니 이런 함정이 설치되어 있었다. 아니 자주 다니는 길목이라 이런 거 전엔 없었는데.. 그래서 순간 궁금해졌다. 단순 인카운터인지 내가 괴롭힌 머프리 패거리 숫자를 내부 시스템에서 세고 있다가 이런 이벤트를 발생시킨 건지 좀 찾아보니 나 말고도 여럿 당한 걸 알 수 있었고 상황 보니까 아예 같은 장소도 아닌데 발생하기도 하는 모양이었다. 나도 함정 빠지고 나..

dino 캐릭터의 움직임, cactus 들의 접근까지 구현했으니 그 둘이 부딪히면 게임오버되게 만들어보자 충돌감지라고 영어로는 Collision detection 이라고 하는데 게임에서는 빠져선 안되는 기능이다. 2D인데다 사각형끼리의 충돌이니 간단하게 구현해보자 function collisionDetection(dino, cactus){ let xValue = cactus.x - ( dino.x + dino.width ); let yValue = cactus.y - ( dino.y + dino.height ); if( xValue < 0 && yValue < 0 ){ // 충돌! // 충돌 시 실행되는 코드 } } dino 가 점프했을 경우도 포함하여 두 사각형이 겹치는 순간이 있으면 if 문 안의 코..

이번엔 dino 를 점프시켜보자 스페이스로 점프할건데 이미 게임 스타트를 스페이스로 하고 있으면 어캄? timer 변수를 따로 지정해서 시간 대신 사용했듯이 상태에 대한 변수를 만들어 쓸거임 let gameState = 0; // 0: end, 1: start let jumpState = 0; // 0: default, 1: jump document.addEventListener('keydown', (e)=>{ if(e.code == 'Space'){ if(gameState == 0){ gameState = 1; // 게임실행 frameAction(); } else if(gameState == 1){ // 게임실행중일때 스페이스누르면 jumpState = 1; // 점프중으로 변경 } } }) 프레임함수..

프레임함수 안에서는 리얼시간이 아닌 프레임단위로 시간이 흐르기 때문에 따로 타이머를 만들어 사용해야한다. 여기에 여러개의 cactus 를 담을 수 있는 Array도 만들었음 let timer = 0; let cactusArr = []; 1초에 60번 실행되는 프레임함수가 ( 사용하는 모니터 주사율에 따라 다름. 144Hz 쓰면 144번, 60Hz 쓰면 60번 ) 120번마다 새 cactus 를 생성해서 Array 안에 들어가게 했다. if(timer % 120 == 0){ let cactus = new Cactus(); cactusArr.push(cactus); } 그 다음 해당 어레이가 forEach 문을 돌며 각각의 cactus 가 왼쪽으로 이동하며 화면에 뿌려지게끔 작성 cactusArr.forEa..

이전 게시글에서 내 캐릭터인 dino 와 장애물인 cactus 를 만들었으니 이제 cactus 가 나한테 달려오게 해보자 단순히 cactus 의 x 을 변경하면 순간이동하게되는거니 프레임마다 움직이게 할거임 https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame window.requestAnimationFrame() - Web API | MDN 화면에 새로운 애니메이션을 업데이트할 준비가 될때마다 이 메소드를 호출하는것이 좋습니다. 이는 브라우저가 다음 리페인트를 수행하기전에 호출된 애니메이션 함수를 요청합니다. 콜백의 developer.mozilla.org function frameAction(){ requestAnimati..

인터넷이 끊긴 상태로 구글에 들어가면 플레이할 수 있는 게임이 있다. 이렇게 생긴 스페이스로 장애물 피하는 간단한 게임이다. 정식 명칭은 Dino T-Rex Game 인듯 자바스크립트로만 위 게임을 구현해보려고 한다. 새 프로젝트 폴더를 만든후에 index.html body 안에 아래 코드 입력 html 은 이게 끝이고 나머진 다 main.js 에서 코드작성할거임 let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); // context 란 뜻으로 ctx canvas.width = window.innerWidth - 100; canvas.height = window.innerHeight - 100; // 바닥선 ..