포시코딩

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..