웹페이지
JAVASCRIPT STEP 57 - 두더지(고양이)잡기 게임
★ 고양이 잡기 게임 5개의 단계에 거쳐 나타나는 고양이를 포획하는 게임 ■ HTML 코드 Catch Cat Ready ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
웹페이지
웹페이지
JAVASCRIPT STEP 56 - 이동하는 고양이를 잡기
★ 이동하는 고양이를 잡기 이동하는 고양이를 클릭하여 포착하기 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
웹페이지
JAVASCRIPT STEP 55 - 다량의 선 애니메이션
★ 다량의 선 애니메이션 해당 선을 커서를 대면 선의 곡율 처럼 효과 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
웹페이지
JAVASCRIPT STEP 54 - 셀 클릭 애니메이션
★ 셀 클릭 애니메이션 셀을 클릭하였을 때, 애니메이션 처리 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
웹페이지
JAVASCRIPT STEP 53 - 이미지 뷰어
★ 이미지 뷰어 이미지 뷰어를 구현. ▷/|| 버튼을 누르면 시작/멈춤을 제어. 1초마다 순차적으로 이미지가 변경. 특정 버튼을 눌러 이미지를 변경한다. 자동 실행 중 특정 버튼을 누르면 타이머는 중단되고 누른 이미지가 출력된다. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
웹페이지
JAVASCRIPT STEP 52 - 사람 애니메이션
★ 사람 애니메이션 사람을 걷게 한다. 첫번째 사람 : 그냥 걷는다. 두번째 사람 : 누르면 앞으로 간다. 세번째 사람 : 누르면 걷기 시작하고, 다시 누르면 앞으로 간다. 네번째 사람 : 왔다 갔다 걷는다. 이미지 전체 크기 : 512 x 256 / 한 장면 크기 : 128 x 128 ■ HTML 코드 걷기 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
웹페이지
JAVASCRIPT STEP 51 - 새를 이용한 애니메이션
★ 새를 이용한 애니메이션 새를 날게 함. 이미지 전체 크기 : 800 x 140 / 한 장면 크기 : 200 x 140 ■ HTML 코드 새 날개짓 새의 속도 : 느림 보통 빠름 엄청빠름 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
웹페이지
JAVASCRIPT STEP 50 - TRANSITION 알고리즘 - 2
★ 알고리즘 5 이동하는 마우스를 따라 고양이를 이동. 마우스의 괘적을 기록하는 큐 역할의 배열이 필요. let pathX = []; let pathY = []; pathX와 pathY에서 앞에서부터 하나씩 꺼내어 차례대로 고양이의 좌표로 지정. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 6 이동하는 마우스를 따라 고양이를 이동. 마우스의 괘적을 기록하는 큐 역할의 배열이 필요. let pathX = []; let pathY = []; pathX와 pathY에서 앞에서부터 하나씩 꺼내어 차례대로 고양이의 좌표로 지정. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 7 메뉴를 구현. 선택된 메뉴에 따라 문서 배경색과 글자색을 바..
