포시코딩

document.addEventListener('keydown', (e)=>{ 이벤트리스너로 방향키가 눌릴때마다 ctx.clearRect(0, 0, canvas.width, canvas.height); 캔버스를 깨끗이 지워준다음 다시 그리게 할거임 if(e.code == 'ArrowLeft'){ 왼쪽키가 눌릴때 왼쪽으로 50 만큼 이동하게 할건데 0 아래로 이동하면 화면 밖으로 나가버리니 if(snakeHead.x > 0){ snakeHead.x -= 50; 조건을 달아준 후 이동되게 한다. 다른 방향키들에도 각각 조건에 맞게 입력하면 document.addEventListener('keydown', (e)=>{ ctx.clearRect(0, 0, canvas.width, canvas.height); i..

면접 후기 글을 보다가 Snake game 을 만들어보게 했다는 글이 있어 저번에 했던 Dino game 을 응용하면 될 것 같아 만들어봤다. Snake html 은 간단하게 제목과 게임이 들어갈 canvas 태그만 작성하고 snake.js 를 불러옴 const canvas = document.querySelector('#canvas'); const ctx = canvas.getContext('2d'); canvas.width = 500; canvas.height = 500; canvas 세팅해준 후 배경맵, snake(플레이어), rat(타겟) 변수를 만듦 처음 만드는거니 일단 자동으로 앞으로 가는게 아니라 한칸한칸 움직이게 하고서 천천히 업그레이드 해 나갈 계획이다. snake 는 내가 움직이는 sn..

캐릭터가 달랑 네모로만 표현되면 미완성으로 보이니 이미지를 씌워보자 위 이미지를 초록네모 대신 출력시킬거임 let dinoImg = new Image(); dinoImg.src = 'dinosaur.png'; 변수로 만들고 이미지 경로를 지정해준다. 그 다음 dino 의 draw 함수 안에서 fillRect 하는 부분 대신 drawImage 를 해주면 완료 draw() { //ctx.fillStyle = 'green'; //ctx.fillRect(this.x, this.y, this.width, this.height); ctx.drawImage(dinoImg, this.x, this.y); } 주의할점은 장애물이 부딪히는 히트박스 판정이 전에 있던 네모로 생각해야된다는 점이다. 때문에 진짜 게임이라면 캐..

여기까지 했으니 목숨과 스코어도 만들어서 게임답게 만들어보자 다시 html 넘어가서 목숨, 점수 항목 추가 목숨: 5 점수: 0 js 쪽에도 life, score 변수 추가 let life = 5; let score = 0; cactus x 좌표가 0 미만이 될때마다 점수가 10점씩 오르게 하고 innerHTML 로 화면에 바로 반영되게 세팅 document.querySelector('#score').innerHTML = score; 충돌시에도 목숨을 1씩 깎으며 반영되게 세팅한다음 충돌감지 함수에 리턴값을 줘서 충돌한 cactus 는 바로 사라지게끔 했다. function collisionDetection(dino, cactus){ let xValue = cactus.x - ( dino.x + dino..

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; // 바닥선 ..