JavaScript로 횡스크롤 게임 만들기 세 번째
안녕하세요 느종입니다. 오늘은 횡스크롤 게임의 내부적인 기능에 대한 코드를 작성해 보도록 하겠습니다. 해야 될 정리 리스트에 있는 내용들을 하나씩 코드로 변환하다 보면 어렵지 않게 콘텐츠를 완성할 수 있을 것입니다. 함께 공부해요! 1. 자바스크립트 코드 1. IMG_SRC : 플레이어, 장애물, 배경화면의 이미지를 만들기 위한 X…
안녕하세요 느종입니다. 오늘은 횡스크롤 게임의 내부적인 기능에 대한 코드를 작성해 보도록 하겠습니다. 해야 될 정리 리스트에 있는 내용들을 하나씩 코드로 변환하다 보면 어렵지 않게 콘텐츠를 완성할 수 있을 것입니다. 함께 공부해요! 1. 자바스크립트 코드 1. IMG_SRC : 플레이어, 장애물, 배경화면의 이미지를 만들기 위한 X…
안녕하세요 느종입니다. 오늘은 저번 시간에 이어서 HTML, CSS 코드를 작성해 보도록 하겠습니다. 외형적인 부분을 먼저 만들고 난 후 내부 기능에 대한 코드를 작성해 볼까 합니다. 횡스크롤 게임은 대부분 캔버스 안에서 동작들이 이루어지기 때문에 HTML, CSS코드는 길지가 않습니다. 저번 시간에 대략적으로 해야 될 내용들을 정리…
안녕하세요 느종입니다. 오늘은 룰렛 뽑기(100만원을 뽑아라!) 만들기를 마무리 지어보려고 합니다. 저번 시간에 이어서 자바스크립트 코드를 작성하고, 결과 화면 페이지까지 만들어보도록 하겠습니다. 함께 공부해요! 1. 자바스크립트 코드 [ scripts.js ] 1. resTitle : 결과 화면에서 사용될 결과 제목 변수입니다. 2…
안녕하세요 느종입니다 저번 시간에 룰렛 뽑기(100만원을 뽑아라!) 콘텐츠의 외형을 만들었습니다. 오늘은 자바스크립트를 활용하여 기능과 함수들을 만들어보도록 하겠습니다. 함께 공부해요! 1. 자바스크립트 코드 [ scripts.js ] 1. startBtn : 시작 하기 버튼 관련 변수 2. startPage : 시작 화면 페이지 …
안녕하세요 느종입니다. 오랜만에 글을 쓰게 되네요. 이런저런 일들이 많아서 포스팅 작성이 늦었습니다. 오늘은 저번 시간에 이어서 실질적인 룰렛 뽑기 코드를 작성해 보도록 하겠습니다. 일단 자바스크립트 코드보다 외형적인 틀을 만들기 위한 index.html과 style.css 코드를 작성하도록 하겠습니다. 저번 시간에 언급한 해야 될 내…
안녕하세요 느종입니다. 오늘은 저번 시간에 이어서 스톱워치(목표 시간 맞추기) 메인 화면 페이지 함수를 작성해 보도록 하겠습니다. 시간의 형식을 바꿔주는 함수, 시간을 체크하는 함수, 타이머를 설정하는 함수에 대해서 다루어 보도록 하겠습니다. 그럼 바로 시작하겠습니다. 함께 공부해요! 1. 자바스크립트 코드 [ scripts.js ] …
안녕하세요 느종입니다 오늘은 같은 그림 찾기 페이지를 마무리 지어보도록 하겠습니다. 저번 시간에 이어서 메인 페이지에서 실행될 자바스크립트 함수를 작성하도록 하겠습니다. 카드 아이템 클릭 함수, 다시 시작하는 함수를 다루어 볼 예정입니다. 그럼 바로 시작하도록 하겠습니다. 함께 해요! 1. 자바스크립트 코드 [ scripts.js ] …
안녕하세요. 느종입니다. 저번 포스팅에 이어서 같은 그림 찾기 페이지를 만들어 보도록 하겠습니다. 간단할 줄 알았는데 설명이 길어지다 보니 여러 개로 나누어서 올린 점 양해 부탁 드리겠습니다. 그럼 바로 시작하도록 하겠습니다. 함께 공부해요! 1. 결과 화면 페이지 결과 화면 페이지입니다. 정말 심플하게 만들었습니다. 다양한 이미지나 …
안녕하세요 느종입니다. 오늘은 같은 그림 찾기 페이지의 메인 화면을 만들어 보겠습니다. 제가 작성한 코드가 꼭 정답은 아닙니다. 더 간결하게 효율적으로 코드를 작성할 수도 있고, 제가 쓰지 않은 더 다양한 메서드들을 활용할 수도 있습니다. 챗gpt의 도움 없이 최대한 자기 스스로 코드를 하나씩 작성해 나가는 것이 공부도 되고 의미도 있…
안녕하세요 느종입니다. 오늘은 저번 시간에 언급한 것과 같이 같은 그림 찾기 페이지를 만들어 볼까 합니다. 어렸을 적에 했던 자주 했던 사천성과 유사한 콘텐츠를 제작하여 페이지를 만들면 누구나 재밌게 즐길 수 있을 거라 생각합니다. 제가 만드는 것은 기본이 되는 간단한 콘텐츠들이고, 여러 가지 기능들을 더 추가하여 본인만의 재밌는 콘…
안녕하세요 느종입니다. 오늘은 구구단 퀴즈 페이지의 마지막 결과 화면을 만들어 보겠습니다. 결과 화면은 기존에 만들었던 것들과 거의 똑같습니다. 결과 화면을 마무리 짓고 다음 시간에는 같은 그림 찾기 페이지를 만들어볼까 합니다. OX퀴즈, 나라 수도 퀴즈, 구구단 퀴즈까지 시작 화면, 메인 화면, 결과 화면의 비슷한 포맷으로 구성을 하…
안녕하세요 느종입니다 저번 시간에 이어서 구구단 퀴즈 페이지의 메인 부분을 완성해 보겠습니다. 그럼 바로 시작할게요. 함께 공부해요! 1. 메인 화면 페이지 2. 자바스크립트 코드 [ scripts.js ] 1. function checkingFunc(str) { : 정답 확인 버튼을 눌렀을 때 정답인지 아닌지를 변수로 넣고, 정답일…