Before 2020/프로젝트

Nomad Coder의 '바닐라 JS로 게임 만들기' 강의정리

부루기 2020. 1. 16. 11:53
728x90

https://academy.nomadcoders.co/courses/542034/lectures/9842675

 

#0.0 What are we building

2D Games and Multimedia in Vanilla JS!

academy.nomadcoders.co

이번엔 JS 2번째 강의를 들어볼 차례다. 일반적으로 프로그래밍을 어떻게 알았냐고 물어봤을 때 대부분의 사람이 게임을 통해서 알게 되었다고 할 것이다. 지금까지 배워오면서 게임은 대학교과제로 한번 정도만 만들어보고 이번이 두번째로 만드는 게임이다. 재밌을 것 같다.

 

여기서 만드는 게임은 캔버스를 만드는 것이다.

 

태그에 구분짓는 걸 아이디와 클래스로 하는데 아이디는 태그를 클래스는 css를 하도록한다.

 

태크에 class로 이름지을때는 div.classname*9하면 클래스이름을 가진 9개가 만들어진다. id는 #이다.

https://www.youtube.com/watch?v=Wn7j5dfbJF4

강의 중간중간에 단축키를 사용해서 코드작성하기에 나도 이걸보고 최대한 따라해보려했다.

 

https://www.youtube.com/watch?v=ya78lQi5vVI

기왕 본김에 VS extension이라는 게 있다고 해서 이것도 같이 확인했다.

 

canvas는 context를 가진 html의 일종이다. 우리는 그 요소안에서 픽셀을 다루는 것이다.

 

https://developer.mozilla.org/ko/docs/Web/API/CanvasRenderingContext2D

 

CanvasRenderingContext2D

The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a canvas element. It is used for drawing shapes, text, images, and other objects.

developer.mozilla.org

canvas에 관한 문법을 알 수 있는 곳

 

https://github.com/Burugi/Paint-JS.git

 

Burugi/Paint-JS

Painting Board made with VanillaJS. Contribute to Burugi/Paint-JS development by creating an account on GitHub.

github.com

javascript로 만들어보는 게임을 마쳤다.

 

자바스크립트를 처음 배우는 나에게 좋은 경험이 되었다고 생각한다.

물론 정말 기초적인 것에 비하지 못하지만 일단 해봤다는 것에 매우 만족하며 이후로 듣고 싶은 강의는 유튜브 클론 강의다. 여기서 풀스택의 기초를 한번 볼 수 있을 것 같아서 직접 해보고 싶다. 물론 시간이 많이 걸리는 프로젝트지만 한번쯤은 힘들어도 큰 프로젝트를 해보는게 도움되지 않을까 싶다.

728x90