JavaScript로 횡스크롤 게임 만들기 다섯 번째
안녕하세요 느종입니다. 오늘은 횡스크롤 게임에서 플레이어, 객체, 장애물 등을 그려주는 메인 함수 로직을 만들고, 실제로 게임을 진행할 수 있도록 그려주는 루프 함수에 대한 코드를 작성해 보겠습니다. 벌써 5번째 시간이네요. 함께 공부해요! 1. 자바스크립트 코드 1. main() : 플레이어, 장애물, 배경 화면의 객체를 생성하고 …
안녕하세요 느종입니다. 오늘은 횡스크롤 게임에서 플레이어, 객체, 장애물 등을 그려주는 메인 함수 로직을 만들고, 실제로 게임을 진행할 수 있도록 그려주는 루프 함수에 대한 코드를 작성해 보겠습니다. 벌써 5번째 시간이네요. 함께 공부해요! 1. 자바스크립트 코드 1. main() : 플레이어, 장애물, 배경 화면의 객체를 생성하고 …
안녕하세요 느종입니다. 오늘은 저번 시간에 말한대로 스톱워치를 만들어볼까 합니다. 그냥 초만 재면 재미없으니깐 일정 목표를 정하고, 그 목표 시간에 정확히 맞출 수 있는 콘텐츠를 만들 생각입니다. 그리고 매번 시작 화면, 메인 화면, 결과 화면 이렇게 구성하다 보니 지루한 감이 없이 않아 있어서 이번에는 결과 내용을 팝업(모달) 창으로…
안녕하세요 느종입니다. 오늘은 같은 그림 찾기 페이지의 메인 화면을 만들어 보겠습니다. 제가 작성한 코드가 꼭 정답은 아닙니다. 더 간결하게 효율적으로 코드를 작성할 수도 있고, 제가 쓰지 않은 더 다양한 메서드들을 활용할 수도 있습니다. 챗gpt의 도움 없이 최대한 자기 스스로 코드를 하나씩 작성해 나가는 것이 공부도 되고 의미도 있…
안녕하세요 느종입니다. 오늘은 저번 시간에 언급한 것과 같이 같은 그림 찾기 페이지를 만들어 볼까 합니다. 어렸을 적에 했던 자주 했던 사천성과 유사한 콘텐츠를 제작하여 페이지를 만들면 누구나 재밌게 즐길 수 있을 거라 생각합니다. 제가 만드는 것은 기본이 되는 간단한 콘텐츠들이고, 여러 가지 기능들을 더 추가하여 본인만의 재밌는 콘…
안녕하세요 느종입니다. 오늘은 구구단 퀴즈 페이지의 마지막 결과 화면을 만들어 보겠습니다. 결과 화면은 기존에 만들었던 것들과 거의 똑같습니다. 결과 화면을 마무리 짓고 다음 시간에는 같은 그림 찾기 페이지를 만들어볼까 합니다. OX퀴즈, 나라 수도 퀴즈, 구구단 퀴즈까지 시작 화면, 메인 화면, 결과 화면의 비슷한 포맷으로 구성을 하…
안녕하세요 느종입니다 저번 시간에 이어서 구구단 퀴즈 페이지의 메인 부분을 완성해 보겠습니다. 그럼 바로 시작할게요. 함께 공부해요! 1. 메인 화면 페이지 2. 자바스크립트 코드 [ scripts.js ] 1. function checkingFunc(str) { : 정답 확인 버튼을 눌렀을 때 정답인지 아닌지를 변수로 넣고, 정답일…
안녕하세요 느종입니다. 오늘은 구구단 퀴즈 페이지의 메인 화면을 만들어볼까 합니다. 저번에 만들었던 나라 수도 퀴즈는 input 태그를 활용하였는데요. 이번에는 버튼 형식으로 구성을 하였습니다. 그럼 바로 시작하겠습니다. 함께 공부해요! 1. 메인 화면 페이지 메인 화면 페이지입니다. 퀴즈 영역에서는 구구단이 임의로 주어지고, 그 아래…
안녕하세요 느종입니다. 오늘은 무엇을 만들어볼까하다가 문득 구구단이 떠올랐어요. 그래서 간단하게 구구단 퀴즈를 해볼 수 있는 페이지를 만드려고 합니다. OX 퀴즈, 나라 수도 퀴즈 페이지에서 만들어 놓았던 기존 형태에서 크게 벗어나지 않으니 어렵지 않을 거에요. 그럼 시작해볼게요. 함께 공부해요! 1. 설계 이번에도 비슷한 형태로 구성…
안녕하세요 느종입니다. 오늘은 나라 수도 퀴즈의 결과 페이지를 만들어 보겠습니다. 중요한 기능들은 저번 메인 화면 페이지 만들기에서 다 다루었기 때문에 결과 페이지 같은 경우는 간단하게 마무리 지을 수 있을 것 같습니다. 그럼 바로 시작하도록 하겠습니다. 함께 공부해요! 1. 결과 화면 페이지 결과 화면 페이지입니다. 5문제를 모두 맞…
안녕하세요 느종입니다 오늘은 저번 시간에 만들었던 나라 수도 퀴즈 시작 화면에 이어서 메인 화면을 만들어보겠습니다. input 태그를 활용하기 때문에 기존에 만들었던 OX퀴즈와는 코드가 살짝 다를 수 있습니다. 그럼 시작하도록 하겠습니다. 함께 공부해요! 1. 메인 화면 페이지 메인 화면 페이지입니다. 상단에 하트(기회)가 추가되었고,…
안녕하세요 느종입니다. 부지런히 글을 작성하려고 하는데 쉽지가 않네요ㅠㅠ 다시 한번 마음을 다잡고 부지런히 하나씩 포스팅하도록 하겠습니다. 저번 포스팅까지 자바스크립트를 활용하여 간단한 OX 퀴즈 만들기를 했었는데요. 오늘은 간단한 나라 수도 맞추기를 만들어볼까합니다. 거의 비슷한 포맷이지만 다른 부분도 꽤 있으니깐 자세히 작성하도록 …