Cartoon Bubble + ect.
·
활동/개인 프로젝트
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.10.에 작성된 글입니다.View디자인은 흰색바탕에 검은색 테두리를 주면 카툰느낌이 나길래 한 번 해봤다.이번 작품을 만들어 보면서 자바스크립트로 Canvas를 사용할 때 함수들을 어떻게 관리해야 하는지, 브라우저와의 충돌판정은 어떻게 구현할 수 있는지 등 다양한 방법을 알게 된 것 같다.link Cartoon Bubble jeongwoo903.github.io알게 된 것 HTML5 Canvas Tutorial for Beginners 필기HTML5 Canvas Tutorial for Beginners - Chris CoursesYoutube에 있는 HTML5Canvas 강의 인...blog.naver.comect.
Snake Game
·
활동/개인 프로젝트
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.5.에 작성된 글입니다. View Canvas를 이용해서 처음으로 게임을 한 번 만들어 봤다. 이번 작품을 만들면서 가장 크게 느낀것은 Canvas는 Javascript의 사용이 뛰어나야 한다는 것이랑 멋진 걸 만들고 싶다면 수학을 잘해야 한다는 것이였따.. (특히 삼각함수) 또 사람들이 ES6가 나왔음에도 ES5 문법을 자주쓰는 이유를 안 것 같다. 바로 this랑 scope chain 때문이 아닐까 싶다. var 유효범위가 함수지만, const랑 let은 블록({ })기준이기 때문에 좀 더 까다로운 맛이 있는거 같다. 빨리 ES6를 연습해야 하는데.. 날잡고 해야겠다. link Snake Game jeongwoo903.github.io 알게 된 것​ ..
Window
·
활동/개인 프로젝트
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.4.에 작성된 글입니다. View HTML5 Canvas 연습작으로 만들어 보았다. 아직 Canvas로 인터렉션을 구현하는건 조금 어려운 것 같다..;; 아직은 어떻게 사용해야 할지 이게 맞게 한건지 잘 모르겠지만 계속 공부해 봐야겠다. PixiJS 라는 신박한 것도 있던데 한 번 공부해 보고 싶다. Link Window jeongwoo903.github.io 알게 된 것 ​ 1. 브라우저의 Width나 Height 값을 알고 싶다면 다음 코드를 이용하자. window.innerWidth; window.innerHeight; 2. Canvas Gradation 사용법 const grd = context.createLinearGradient(startX, ..