JavaScript로 숫자 야구 게임 만들기 세 번째
안녕하세요 느종입니다. 저번 시간까지 HTML, CSS를 가지고 숫자 야구 게임의 외형을 만들어 보았습니다. 오늘은 게임을 할 수 있도록 내부적인 기능과 함수에 대해서 코드를 작성해 보도록 하겠습니다. 저는 되도록이면 바닐라 자바스크립트로 코드를 작성하지만 jQuery를 사용하셔도 상관없습니다. 함께 공부해요! 1. 자바스크립트 코드 …
안녕하세요 느종입니다. 저번 시간까지 HTML, CSS를 가지고 숫자 야구 게임의 외형을 만들어 보았습니다. 오늘은 게임을 할 수 있도록 내부적인 기능과 함수에 대해서 코드를 작성해 보도록 하겠습니다. 저는 되도록이면 바닐라 자바스크립트로 코드를 작성하지만 jQuery를 사용하셔도 상관없습니다. 함께 공부해요! 1. 자바스크립트 코드 …
안녕하세요 느종입니다. 이번 시간에는 숫자 야구 게임의 외형을 만들어볼까 합니다. 제가 디자인적 소질은 없기 때문에 외형 같은 경우는 마음대로 자신의 역량대로 만드시면 될 것 같습니다. 외형보다 중요한 건 안에 기능들이죠!! 그럼 함께 공부해요. 1. 해야 될 내용 정리 리스트 1. 시작 화면, 끝 화면, 메인 화면 영역 구분해서 만들…
안녕하세요 느종입니다. 이번 시간에는 어렸을 때 친구들끼리 자주 하던 게임 중의 하나인 숫자 야구 게임을 만들어볼까 합니다. 간단하게 설명하자면 문제 출제자가 임의의 4자리 숫자를 정하면, 나머지 사람들이 그 임의의 4자리 숫자를 맞히는 게임입니다. 그냥 찍어서 맞히면 재미가 없으니깐 스무고개 방식으로 4자리씩 숫자를 제시해서 힌트를 …
안녕하세요 느종입니다 저번 시간에 이어서 오늘은 사다리 게임 기능과 함수, 인원수에 맞게 사다리의 세로줄을 생성하는 자바스크립트 코드를 작성해 보도록 하겠습니다. 함께 공부해요! 1. 자바스크립트 코드 1. setSelectButton() : 사다리 게임 상단에서 사용자가 선택할 수 있는 버튼을 만드는 함수입니다. 2. for(l…
안녕하세요 느종입니다. 앞선 두 편에서는 사다리 게임의 기본 화면을 설계하고, HTML과 CSS를 활용해 외형을 구현했습니다. 이번 글부터는 사다리 내부 로직을 집중적으로 다룹니다. 오늘은 사용한 변수들과 함수들에 대한 설명을 하도록 하겠습니다. 함께 공부해요! 1. 자바스크립트 코드 1. startPage : 시작 화면 페이지를 담…
안녕하세요 느종입니다. 횡스크롤 게임 만들기도 거의 막바지에 다다르고 있습니다. 오늘은 충돌 함수, 랜덤 함수, 초기화 함수 등 각종 함수들과 결과 화면 페이지까지 구성하여 횡스크롤 게임에 대한 모든 코드를 완성해보도록 하겠습니다. 마지막까지 힘내서 코드를 작성해요! 함께 공부해요! 1. 결과 화면 페이지 결과 화면의 모습입니다. 게임…
안녕하세요 느종입니다. 오늘은 횡스크롤 게임에서 플레이어, 객체, 장애물 등을 그려주는 메인 함수 로직을 만들고, 실제로 게임을 진행할 수 있도록 그려주는 루프 함수에 대한 코드를 작성해 보겠습니다. 벌써 5번째 시간이네요. 함께 공부해요! 1. 자바스크립트 코드 1. main() : 플레이어, 장애물, 배경 화면의 객체를 생성하고 …
안녕하세요 느종입니다. 오늘은 저번 시간에 이어서 횡스크롤 게임에 필요한 각종 변수들과 조작키를 설정하는 함수에 대해 자바스크립트 코드를 작성해 보도록 하겠습니다. 함께 공부해요! 1. 자바스크립트 코드 1. BACKGROUND_SPEED : 배경 화면이 움직이는 속도 변수입니다. 2. GROUND_Y_COORDINATE : 캔…
안녕하세요 느종입니다. 오늘은 횡스크롤 게임의 내부적인 기능에 대한 코드를 작성해 보도록 하겠습니다. 해야 될 정리 리스트에 있는 내용들을 하나씩 코드로 변환하다 보면 어렵지 않게 콘텐츠를 완성할 수 있을 것입니다. 함께 공부해요! 1. 자바스크립트 코드 1. IMG_SRC : 플레이어, 장애물, 배경화면의 이미지를 만들기 위한 X…