JavaScript (26) 썸네일형 리스트형 JavaScript canvas 함수(8) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/66 JavaScript canvas 함수(7) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/65 JavaScript canvas 함수(6) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/62 JavaScript canvas 함수(5) 이전 포스팅을 이 rubbery.tistory.com canvas 영역에 시계를 만들고 초침이 움직이는 효과를 만들어보자. 1. 시계 다이얼 이미지와 초침이미지를 로딩하고 좌표를 저장할 변수를 선언해준다. - clock_sec.png 2. setInterval 함수 내에서 시계와 초침을 그린후.. JavaScript canvas 함수(7) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/65 JavaScript canvas 함수(6) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/62 JavaScript canvas 함수(5) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/58 JavaScript canvas 함수(4) 이전 포스팅을 이 rubbery.tistory.com 이번엔 토끼를 맞출때마다 텍스트 칸에 맞춘횟수를 표현할수있는 기능을 만들어보자. 1. html 영역에 p요소를 새로 생성하고 잡은 토끼의 갯수를 확인할수있도록 숫자 값을 입력하고 id를 부여한다. 2. script 영역에 토끼를 맞춘 횟수를.. JavaScript canvas 함수(6) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/62 JavaScript canvas 함수(5) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/58 JavaScript canvas 함수(4) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/55 JavaScript canvas 함수(3) 이전 포스팅을 이 rubbery.tistory.com 이전 포스팅에서 토끼를 맞추면 풍선이 사방으로 퍼지는 효과를 만들어보았다. 하지만 풍선의 값들이 배열안에 남아있어서 데이터가 쌓이며 홈페이지에 과부하를 주게된다. 이를 해결하기위해 풍선이미지가 화면에 벗어나게되면 배열에서 삭제를 시키는 코드.. JavaScript canvas 함수(5) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/58 JavaScript canvas 함수(4) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/55 JavaScript canvas 함수(3) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/53 JavaScript canvas 함수(2) 이전 포스팅을 이 rubbery.tistory.com JavaScript setInterval() 함수를 이용하여 토끼를 클릭했을때 풍선이 사방으로 퍼지는 효과를 만들어보자. 1. 먼저 풍선 이미지를 저장할 배열과 풍선이미지를 불러오고 풍선 효과를 줄때 필요한 배열을 생성한다. 사용한 풍선이미.. JavaScript canvas 함수(4) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/55 JavaScript canvas 함수(3) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/53 JavaScript canvas 함수(2) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/47 JavaScript canvas 함수 Javascript canvas 란? canv rubbery.tistory.com JavaScript Audio 함수를 이용하여 mousedown 이벤트가 일어났을때 총알이 쏴지는 효과음과 토끼를 맞췄을때 들리는 효과음을 만들어보자. 1. 총알 효과음과 죽는 효과음을 로딩한다. 2. mousedow.. JavaScript canvas 함수(3) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/53 JavaScript canvas 함수(2) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/47 JavaScript canvas 함수 Javascript canvas 란? canvas를 사용하여 자바스크립트와 html 을 사용하여 그래픽을 그릴 수 있다. html 에서 canvas rubbery.tistory.com JavaScript canvas 함수를 이용하여 배경에 토끼이미지가 랜덤으로 나타나도록 만들어보자. 1. 토끼 이미지를 로딩한다. (애니메이션 표현을 하기위하여 두가지의 이미지를 로딩) 2. 로딩된 이미지를 배열에 담아 놓는다. 3. 토끼이미지를 로딩할 .. JavaScript canvas 함수(2) 이전 포스팅을 이어서 작성한 내용입니다. https://rubbery.tistory.com/47 JavaScript canvas 함수 Javascript canvas 란? canvas를 사용하여 자바스크립트와 html 을 사용하여 그래픽을 그릴 수 있다. html 에서 canvas 태그를 사용하여 작성하고 javascript로 인터페이스를 그려서 조작할 수 있다. canvas 요소 rubbery.tistory.com JavaScript canvas 함수를 이용하여 mousedown 이벤트가 발생하였을때 총알이 뚫린 이미지를 출력하게 만들어보자. 1. canvas에 로딩할 이미지를 불러온다. hole.png : 총알 뚫린 이미지 background.jpg : 배경 이미지 2. snipe 의 좌표와 총알 구.. JavaScript Const JavaScript 에서 Const란? const 는 constant 의 약자 변수에 값이 한번 담기면 그 이후에 변경을 불가능하도록 만드는 예약어 즉 변수를 상수화 시키는 기능이다. 예제) const num=10; num=20; // 변경불가 (에러) num이라는 변수는 const으로 선언되었기 때문에 이후 변경 불가능하다. const names = ["김구라", "해골", "원숭이"]; names = ["lee", "park"]; // 변경불가 names[0] = "이정호"; // 가능 const으로 선언된 names 배열은 변경이 불가능하지만 배열안의 내용은 수정 가능하다. const mem={num:1}; mem={num:2}; //변경불가 mem.num = 3; // 가능 const으로 선언된 .. 이전 1 2 3 4 다음
