포시코딩

면접 후기 글을 보다가 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..

이전 글에서 로그인 기능을 완성했다면 로그인 후 세션에 유저정보가 잘 저장되어 있는지 확인하는 시간을 가져보자 마이페이지 대충 만들어서 들어가면 유저아이디 나오나 확인할거임 mypage.ejs 를 만들자 님의 마이페이지입니다. member.js 로 와서 mypage 로 가는 라우팅을 해주자 router.get('/mypage', loginCheck, (req, res)=>{ res.render('mypage.ejs', {userSession: req.user}); }) 평소에 만들던 라우터와 살짝 다른걸 볼 수 있는데 {userSession: req.user} 는 userSession 이라는 이름으로 세션에 담긴 유저정보를 보낸다는 의미이고 '/mypage' 옆 loginCheck 는 마이페이지로 가기전..

로그인은 Node.js Express 의 인증 미들웨어인 Passport.js 를 이용해 구현할거임 먼저 설치 ㄱㄱ npm install passport passport-local express-session member.js const passport = require('passport'); const LocalStrategy = require('passport-local').Strategy; const session = require('express-session'); var router = require('express').Router(); router.use(session({secret:'비밀코드', resave: true, saveUninitialized: false})); // '비밀코드' -..

이전 게시글에서 bcrypt 를 이용해 암호화 하는 방법을 알아봤으니 기존에 있던 회원가입 로직을 받아낸 비밀번호를 암호화 한 이후에 동작하게 조합하였다. router.post('/register', (req, res) => { let id = req.body.id; let pw = req.body.pw; const saltRounds = 10; bcrypt.hash(pw, saltRounds, (err, hash)=>{ try { db.collection('login').findOne({ id: id }, (error, result) => { if (result) { res.send({ code: 0 }); } else { db.collection('login').insertOne({ id: id, p..

캐릭터가 달랑 네모로만 표현되면 미완성으로 보이니 이미지를 씌워보자 위 이미지를 초록네모 대신 출력시킬거임 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..