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 : 시작 화면 페이지를 담…
안녕하세요 느종입니다. 오늘은 사다리 게임의 외형에 대해서 코드를 작성해 보도록 하겠습니다. 저번 시간에 대략적으로 해야 될 내용들을 정리해 보았는데요. 그중에서 HTML 부분과 CSS 부분에 대해 코드를 작성해 보도록 하겠습니다. 오늘은 딱히 어려운 부분이 없으니 편하게 보시면서 함께 코드를 작성하면 될 듯싶습니다. 함께 공부해요! …
안녕하세요 느종입니다. 이번 시간에는 카카오톡이나 네이버에서도 자주 볼 수 있는 사다리 게임을 만들어볼까 합니다. 친구들과 함께 간단히 내기를 할 때면 자주 사용을 했었는데요. 그래서 처음 생각으로는 간단하게 자바스크립트로 금방 만들 수 있지 않을까 했었는데, 만들다 보니 은근 생각해 주어야 할 부분이 꽤 있더라고요. 그래도 항상 하듯…
안녕하세요 느종입니다. 횡스크롤 게임 만들기도 거의 막바지에 다다르고 있습니다. 오늘은 충돌 함수, 랜덤 함수, 초기화 함수 등 각종 함수들과 결과 화면 페이지까지 구성하여 횡스크롤 게임에 대한 모든 코드를 완성해보도록 하겠습니다. 마지막까지 힘내서 코드를 작성해요! 함께 공부해요! 1. 결과 화면 페이지 결과 화면의 모습입니다. 게임…
안녕하세요 느종입니다. 오늘은 횡스크롤 게임에서 플레이어, 객체, 장애물 등을 그려주는 메인 함수 로직을 만들고, 실제로 게임을 진행할 수 있도록 그려주는 루프 함수에 대한 코드를 작성해 보겠습니다. 벌써 5번째 시간이네요. 함께 공부해요! 1. 자바스크립트 코드 1. main() : 플레이어, 장애물, 배경 화면의 객체를 생성하고 …