본문 바로가기

새로운 블로그로 이전합니다
구글블로그 / 네이버블로그
(자료도 점차 이전할 계획입니다.)


게임개발/JS게임만들기3

JS게임만들기(기초편) 2. Canvas 셋팅과 연결 개발자 리브 - 자바스크립트로 게임만들기 자바스크립트로 게임을 만들어보자 devliberty.blogspot.com 새 블로그로 자료가 이전되었습니다. [ 참고자료 ] 캔버스 생성과 그리기 - 게임 개발 | MDN 이 강의는 게임 개발 캔버스 튜토리얼의 10단계 중 첫 번째 과정입니다. Gamedev-Canvas-workshop/lesson1.html에서 이 강의의 완성된 코드를 볼 수 있습니다. 게임의 기능들을 작성하기 전에, 게임 내부 developer.mozilla.org HTMLCanvasElement.getContext() - Web API | MDN HTMLCanvasElement.getContext() 메소드는 캔버스의 드로잉 컨텍스트를 반환합니다. 컨텍스트 식별자가 지원되지 않을 경우 nu.. 2022. 1. 13.
JS게임만들기(기초편) 1. 시작하기 개발자 리브 - 자바스크립트로 게임만들기 자바스크립트로 게임을 만들어보자 devliberty.blogspot.com 새 블로그로 자료가 이전되었습니다. + HTML 파일 만들기(메모장 활용) 로컬(본인 컴퓨터)에서 게임을 동작시키기 위해 우선 html파일을 생성하는 방법을 살펴보자 devliberty.blogspot.com 크롬 F12(개발자도구) 언어 변경하기 1. Chrome에서 F12(개발자도구)를 열고 탭 영역에 있는 톱니바퀴 버튼을 누른다. devliberty.blogspot.com [ html 파일 구성 ] 메모장에 "태그(tag)"들을 직접 입력하고 저장한 것임. * 코드의 가독성을 높이기 위해, enter(줄바꿈)를 적절히 넣어주면 좋다. html파일은 위 그림과 같이 구성할 수 있고, 주.. 2022. 1. 1.
JS게임만들기(기초편) 0. 개요 개발자 리브 - 자바스크립트로 게임만들기 자바스크립트로 게임을 만들어보자 devliberty.blogspot.com 새 블로그로 자료가 이전되었습니다. [ 개요 ] HTML5에서 추가된 Canvas태그를 이용하여 2D그래픽 및 간단한 게임을 만들 수 있다. 또한, 그렇게 만들어진 게임은 별도의 설치없이 브라우저에서 바로 동작시킬 수 있다. HTML과 자바스크립트를 이용하여 게임을 만드는 방법에 대해 살펴보자 * 게임 제작에 필요한 핵심적인 내용만 골라서 간소화된 코드로 진행할 예정. * JQuery나 프레임워크(Phaser 등) 같은 의존성이 있는 것은 사용하지 않음. * 별도의 개발툴이 필요하지 않으며, 쉽게 준비할 수 있는 프로그램으로 진행됨. [ 기타 이야기거리 ] HTML5에 들어서 새로이 추가된.. 2022. 1. 1.