-
[javascript basic] 제어구문Develop 2019. 3. 30. 01:11
제어구문이란? Javascript를 포함한 대부분의 프로그래밍 언어에서는 순차적으로 실행되는 코드의 흐름을 변화시켜 코드를 간결하게 표현할 수 있는데 '제어구문' 이라고 한다. 제어구문은 단순하게 이해하면 조건문과 반복문이고 프로그래밍에서 중요한 부분을 차지하고 있다. 조건문 조건문은 값이 true 또는 false 인지에 따라 분기처리 하는 것이다. 다시말하면 조건문은 조건을 판별하는 기준과 실행되는 코드가 필요한 것이다. 이것만 이해한다면 아래코드를 통해 쉽게 이해할 수 있다. 코드의 내용은 나이에 따라 서로 다른 코드가 실행되는 과정을 보여주고 있다. if (age > 20) { goAdultPage() } else if (age > 14) { goTeenPage() } else { g..
-
[HTML5 & Javascript] Canvas Basic (도형을 움직여보자)카테고리 없음 2019. 3. 24. 21:38
이번에는 캔버스로 그려진 도형을 움직이는 기본적인 내용을 정리하였다. 이렇게 만들어진 도형은 게임을 만든다면 조작의 대상이 될 것이고 이를 약간만 응용한다면 배경의 이동이나 간단한 슈팅게임을 구현할 수 있다. # 도형을 그리는 방법은 아래의 링크를 참조하자 https://zero-gravity-dev.tistory.com/5 # 캔버스 애니메이션의 작동원리 원리는 간단하게 이해하면 좌표를 변수로 정의하고 반복적으로 화면을 계속 그리는 것이다. 이때 setTimeout이나 setInterval함수를 사용한다. canvas에 부드러운 애니메이션 효과를 위한 requestAnimationFrame 매서드도 추가되었다. 여기서는 setInterval함수를 이용해 도형의 움직임을 조작하는 간단한 코드를 구현하여 ..
-
-
[HTML5 & Javascript] Canvas Basic (그리면서 배우는 도형그리기 기초)Develop 2019. 3. 17. 14:06
canvas란? canvas는 HTML5의 표준 스팩으로 canvas태그 내에서 javascript를 이용해 드로잉 할 수 있는 API를 제공하고 있다. 쉽게 정의하면 canvas는 제공된 javascript api로 그림을 그릴 수 있는 영역을 의미한다. 언제 사용할 수 있을까? 브라우저에서 간단한 도형이나 그림, 애니메이션등이 필요할 때 사용할 수 있다. 현재 이미지를 표현할 때 SVG가 많이 사용되지만 Canvas는 SVG에 비해 게임 등 그래픽조작이 많을 때 성능 상에서 유리함을 가지고 브라우저의 지원범위가 넓기 때문에 상황에 맞는 기술의 선택이 필요하다. 개인적인 느낌으로는 HTML5에 기반한 간단한 게임을 만들거나 애니메이션을 구현할 때 좋은 선택이 될 수 있을 것으로 판단한다. 도형그리기 실..