19강. 로컬스토리지 사용하기
18강. DOM을 활용하여 신규요소 제거하기17강. DOM을 활용하여 신규요소 추가하기16강. 웹 페이지를 동적으로 만들기15강. 버튼 만들기14강. HTML요소 클릭시 동작하도록 만들기.13강. 자바스크립트 함
soo0100.tistory.com
타이머란?
일정 시간에 어떤 일들을 반복해서 실행시키는 동작을 의미한다.
타이머를 활용할 수 있으면, 게임을 만드는 기본 툴 하나를 완성했다고 볼 수 있다.
19강까지의 강의를 통해서 우리는 랜덤함수를 만들었고, DOM을 활용해서 화면에 요소들을 추가 제거 그리고 로컬스토리지를 통해서 값을 저장했다.
랜덤 함수 + 타이머만 가지고서도 간단한 게임을 만들 수 있다.
오늘은 우선, 타이머를 가지고 카운팅 하는 예제를 만들어 본다.
1. 타이머 함수 사용법.
타이머 기능을 하는 자바스크립트 빌트인 함수는
setTmeout()이다. syntax를 살펴보면, 하기와 같다.
setTimeout(함수 이름, 반복될 시간)
첫 번째 인자로 쓰인 함수이름은, 반복될 함수명이다.
두 번째 인자 반복될 시간은 밀리 세 컨트 단위로 1/1000초를 나타낸다
1000이라고 적어주면 1초이다.
2. 카운트 예제 만들기
1~10까지 숫자가 증가하는 예제를 만들어본다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>타이머</title>
</head>
<body>
<div id="number"></div>
<script>
var num = 0;
count();
function count(){
// div 에 숫자 표기
num++;
document.getElementById("number").innerHTML = num;
// 1초마다 count 함수 호출(10회)
if(num < 10)
setTimeout(count, 1000);
}
</script>
</body>
</html>
2-1. count() 함수 구현
주요 포인트는 setTimeout(count, 1000);이라는 부분이며, count 함수를 1초마다 부른다.
2-2. 화면에 표시.
증가된 숫자를 표시하기 위해서 div와 연결 후 화면에 표시한다.
이렇게 만들어진 결과는 아래와 같다.
드디어, 웹 게임을 만들기 위한
기본 뼈대 기술이 갖추어졌다. 다음 편부터는 기초적인 웹 게임들을 만들어 나가겠다.
Thanks!
'앱 만들기 > JavaScript study' 카테고리의 다른 글
| 자바스크립트 window 객체에 대해서 (0) | 2024.08.31 |
|---|---|
| document.writeln 과 document write 차이점 (1) | 2024.08.29 |
| 19강. 로컬스토리지 사용하기 (1) | 2024.08.19 |
| 로또 번호 자동 생성하기 (2) | 2024.08.15 |
| 로또 숫자 만들기 with 자바스크립트 (랜덤 함수 활용하기) (3) | 2024.08.12 |
댓글