[연재]슈퍼 마리오적인 게임을 javascript로 만들어 보자 초급편 ~1장~ 준비한다

6549 단어 게임 제작마리오초보자용자바스크립트교육

개요


  • 자바 스크립트로 슈퍼 마리오 게임을 만듭니다 (이미지는 아래 참조)
  • 프로그래밍 경험이 없거나 조금 갇힌 적이있는 사람을위한 것입니다
  • 실제로 움직이면서 즐겁게 게임을 만들어 가는 기사로 할 생각입니다.
  • 특히 환경 준비가 필요하지 않으며 메모장이나 텍스트 편집기가 있으면 OK
  • 후반에서는 리팩터하면서, 이런 식으로 쓰면 읽기 쉽지요까지 하고 싶습니다
    ▼게임 이미지


    • 필자 소개


  • 대학에서 건축 배우기
  • 취업처는 왜인가 IT (주로 java, 서버 측, 자사의 프레임워크를 사용)
  • IT 벤처로 이전 (주로 자바 스크립트, 프론트 & 서버 측, AWS 사용)
  • 그리고 지금에 이르다

    • 배경


  • 직장에서 초학자에게 확실히 진행되는 javascript 참고 페이지가 없었기 때문에
  • 즐기면서 실제로 움직이면서 초기 장애물을 낮게 배울 수 있다는 생각이 있었기 때문에
  • 과거에 슈퍼 마리오 게임을 실제로 만들어보고 재미있게 배운 경험이 있었다
  • 장래의 자녀의 교재를 스스로 만들고 싶었다 (사용할지는 불명)
  • 쓰고 싶었으니까

    • 이 기사의 목적


  • 다음을 달성하는 것
  • 초기 장애물을 낮게 시작할 수 있습니다
  • 프로그래밍 초보자가 즐기고 프로그래밍을 만질 수 있습니다
  • 이 기사를 바탕으로 실제로 움직이는 게임을 만들 수 있습니다
  • 이 기사에 설명 된 프로그램의 개요를 이해하고 배열을 추가 할 수 있습니다


    • 대상자


  • 프로그래밍 미경험자로 동기 부여가 있는 분
  • 나이는 중학생 이상을 상정 (힘내면 초등학생 이하라도 가능, 아마)

    • 보충


  • 소요 시간은 총 5-10 시간 정도가 될 것입니다.
  • 필자의 PC는 Mac
  • 프로그램을 작성하기 위해 노력하는 편집기는 VSCode

    • 유의사항


  • 이 기사는 필자가 자바스크립트의 학습이 독학으로 기재되어 있기 때문에 세간 일반의 작법이나 어휘로부터 일탈하고 있을 가능성이 있을지도
  • 특히 로직 부분은 마음대로 생각해 만든 것임을 유의해 주시면

    • 전체 흐름


  • 준비하다

  • 간단한 페이지 만들기
  • HTML을 만들어 페이지를 열어 보겠습니다.
  • js도 통합해 보겠습니다.
  • 프레임 처리를 통합하는 권


  • 이미지를 움직여보세요
  • 이미지를 표시 할 수 있습니다.
  • 이미지가 움직이는 권
  • 키보드 입력을 감지 할 수 있습니다.
  • 이미지를 움직일 수있는 권


  • 떨어지면 안돼! !
  • 점프시켜 보는 권
  • 착지 판정 해 보는 권
  • 블록에 착지하지 않으면 떨어질 것입니다.
  • 점프하지 않으면 떨어질거야.
  • 간이 스테이지 만들기의 권
  • 게임 오버가 될 것입니다.

  • 적에게 있었으면 안돼
  • 당 판정 해 보는 그 1
  • 당 판정 해 보는 그 2
  • 당 판정 해 보는 그 3
  • 게임 오버의 정의를 해보는 그 2

  • 마지막 단어 & 다음 단계로
    • 게임 SE 만드는 법 ① 초급편 [도구의 기본 조작 ~ 사격 SE 만들기]
    DirectX에서 에지 감지

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage