본문 바로가기

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


HTML54

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.
HTML5 게임 제작 참고자료 참고) HTML5 웹게임 제작 참고자료 HTML5 웹게임 제작에 도움이 되는 참고자료입니다. devliberty.blogspot.com 새 블로그로 자료가 이전되었습니다. 2022. 1. 9.
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.