분류 javascript

JavaScript에서 Flappy Bird 및 Doodle Jump를 코딩하는 방법 알아보기

컨텐츠 정보

  • 조회 333 (작성일 )

본문

게임은 가장 재미있는 프로그래밍 프로젝트입니다. 게임 제작을 마치면 바로 플레이 할 수 있습니다!


https://www.freecodecamp.org/news/javascript-tutorial-flappy-bird-doodle-jump/


두 개의 인기 있는 밀레니얼 게임을 구축하여 JavaScript 기술을 향상 시키는 데 도움이 되는 freeCodeCamp.org YouTube 채널에 대한 자습서를 출시했습니다.


이 튜토리얼에서는 개발자이자 교사 인 Ania Kubow가 JavaScript로 Doodle Jump 및 Flappy Bird를 만드는 방법을 보여줍니다. 이 튜토리얼은 자바 스크립트를 조금 알고 있고 모든 것을 합쳐 실제 프로젝트를 만들고자 하는 사람들에게 적합합니다.


두 게임을 빌드 하기 위해 32 가지가 넘는 JavaScript의 가장 인기 있는 방법을 연습합니다. 여기에는 .forEach(), .push(), .shift(), .addEventListener(), .appendChild(), while 루프, 클래스, 생성자 등이 포함됩니다.



giphy.gif 


이 자습서에서 다루는 섹션은 다음과 같습니다.


  • Doodle Jump game logic
  • Setting up the game
  • Creating the doodler
  • Creating the platforms
  • Creating the Platform Class
  • Moving the platforms
  • Making the doodler jump
  • Making the doodler fall
  • Writing the game over logic
  • Hooking up the keyboard keys
  • Making the doodler go left and right
  • Removing and adding new platforms using array work
  • Removing all children of the grid using a while loop
  • Adding the score
  • Flappy Bird game logic
  • Setting up the Flappy Bird project
  • Writing the Flappy Bird start game logic
  • Making the bird jump
  • Hooking up the keyboard keys
  • Generate a pipe obstacle
  • Moving the obstacle
  • Generate new obstacles using setInterval() and setTimeout()
  • Writing the Flappy Bird game over logic
  • Adding images to the project
  • Expanding the collision rules using && and ||
  • Adding the Flappy Bird final stages of styling learning about z-index


freeCodeCamp.org YouTube 채널에서 전체 과정을 시청하십시오 (2 시간 시청).