자바스크립트 타이머 예제이다.
게임을 만들기 위해서 필수적인 타이머는 일정시간마다 반복하거나, 일정시간 후 어떤 동작을 발생시키기 위해서 필요하다.
오늘은 일정시간 마다 반복하는 타이머 함수를 알아본다.
해당 함수는 바로 setInterval 이란 함수이다.
setInterval (함수명, 시간);
위 형식으로 사용하며, 일정 시간의 간격동안 계속해서 첫 번째 인자 함수를 실행한다.
해당 함수를 사용해서 1~10까지 카운트가 되는 예제를 만들어본다.
1. HTML 웹 문서 구성
캔버스를 활용한 웹 게임을 바탕으로 하기에 웹 페이지를 먼저 만든다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>타이머를 이용한 카운트 만들기</title>
<script src="timerCount.js"> </script>
</head>
<body>
<div style="position:absolute; top:30px ; left:30px">
<canvas id="canvas" width="800" height="600" >
캔버스를 호출하지 못했습니다.
</canvas>
</div>
</body>
</html>
해당 문서에서 주요 포인트는 캔버스를 만드는 일이다.
2. 자바스크립트 코드 구현
- setInterval() 타이머 함수를 사용해서 1초마다 countTimer 함수를 반복해서 호출한다.
- countTimer 함수에서는 number 변숫값을 증가시키며, 숫자가 10이 되면
clearInterval() 함수를 사용해서 타이머를 멈춘다. 인자로는 setInterval() 함수의 반환값 타이머 아이디를 넣어주면 해당 타이머가 정지하는 구조이다.
window.addEventListener("load",drawScreen);
var timerId = setInterval(countTimer , 1000);
var number = 0;
// 숫자를 카운트 한다.
function countTimer() {
number++;
if (number == 10) {
//카운트를 종료한다.
clearInterval(timerId);
}
//화면을 갱신한다
drawScreen();
}
function drawScreen() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//배경이 될 네모상자 색상 지정
context.fillStyle = "#000000";
context.fillRect(0, 0, 800, 600);
//텍스트 설정
context.fillStyle = "#ffffff";
context.font = "100px Times";
context.fillText(number , 380, 300);
}
그다음으로는,
drawScreen() 함수를 통해서 화면을 그려준다.
앞선 포스팅에서 계속 언급한 것처럼, 캔버스는 도화지. 콘텍스트는 펜이라고 생각하면 이해가 손쉽다.
이렇게 구현된 코드를 실행해 보면, 하기처럼 1~10까지 카운트가 된다.
setInterval() 함수의 자세한 사용방법은 w3schools.com 사이트를 참고 바란다.
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
다음시간은 일정시간 후 한 번만 실행하는 setTimeout() 예제를 만들어 본다.
'게임 만들기' 카테고리의 다른 글
| 비행슈팅 게임 만들기 기본 4편 (2) | 2024.09.26 |
|---|---|
| 비행슈팅 게임 만들기 기본 3편 (0) | 2024.09.25 |
| 비행슈팅 게임 만들기 기본 2편 (2) | 2024.09.22 |
| 비행슈팅 게임 만들기 기본 1편 (1) | 2024.09.19 |
| 자바스크립트 캔버스에 이미지 띄우기 (2) | 2024.09.11 |
댓글