Animation Direction Control using Arrow Keys
HTML5에서 방향키를 이용한 애니메이션 방향제어 예
달리고 있는 캐릭터의 방향을 전환할 때 방향키(LEFT, RIGHT)를 사용하는 예
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HTML5 Sprite Animation(Walking) Example</title>
<style type="text/css">
canvas { border:5px solid black;}
</style>
<script type="text/javascript">
var sx = 0; //읽어올 프레임의 x좌표
var sy = 0; //읽어올 프레임의 y좌표
var w = 125; //한 프레임의 폭
var h = 125; //한 프레임의 높이
var dx = 200;
var dy = 0;
var frame_cnt = 16; //총 프레임 수
var column_cnt = 4;
var idx = 1; //현재 사용된 프레임의 인덱스
var intval; //타이머
var STATUS = "TO_LEFT";
var sprite_sheet1 = new Image();
var sprite_sheet2 = new Image();
var img = new Image();
var canvas;
var ctx;
function startAnim() {
init();
sprite_sheet1 = document.getElementById("sprite");
sprite_sheet2 = document.getElementById("sprite2");
img = sprite_sheet1;
STATUS = "TO_LEFT";
clearInterval(intval);
sx = 0;
sy = 0;
idx = 1;
canvas = document.getElementById("canvas1");
if(!canvas.getContext) {
alert('Canvas그리기를 지원하는 웹브라우저가 아닙니다');
return;
}
ctx = canvas.getContext("2d");
intval = setInterval(function(){drawFrame();},50);
}
function drawFrame() {
//console.log("1. idx="+idx+", sx:"+sx+", sy:"+sy+", dx:"+dx+", dy:"+dy);
ctx.clearRect(0,0,canvas.width,canvas.height);
if(STATUS=="TO_LEFT") {
ctx.drawImage(img,sx,sy,w,h, dx,dy,w,h);
sx += w;
dx -= 5;
if(idx!=0 && idx % column_cnt==0) {
sx = 0;
sy += h;
}
}else if(STATUS=="TO_RIGHT") {
ctx.drawImage(img,sx,sy,w,h, dx,dy,w,h);
sx -= w;
dx += 5;
if(idx!=0 && idx % column_cnt==0) {
sx = img.clientWidth-w;;
sy += h;
}
}
//console.log("2.idx="+idx+", sx:"+sx+", sy:"+sy+", dx:"+dx+", dy:"+dy);
idx++;
//마지막 프레임이라면 다시 처음 프레임으로 되돌아 간다
if(idx>frame_cnt) {
idx = 1;
if(STATUS=="TO_LEFT") {
sx = 0;
}else if(STATUS=="TO_RIGHT") {
sx = img.clientWidth-w;
}
sy = 0;
}
if(dx<=0 && STATUS=="TO_LEFT") {
to_right(); //오른쪽 방향으로 달리기
}else if(dx>=canvas.width && STATUS=="TO_RIGHT") {
to_left(); // 왼쪽 방향으로 달리기
}
//if(idx>frame_cnt) clearInterval(intval);
}
function to_left() {
//alert("to_left()");
idx = 1;
sx = 0;
sy = 0;
STATUS = "TO_LEFT";
img = sprite_sheet1;
}
function to_right() {
//alert("to_right()");
idx = 1;
sx = img.clientWidth-w;
sy = 0;
STATUS = "TO_RIGHT";
img = sprite_sheet2;
}
function stopAnim() {
clearInterval(intval);
}
function init() {
//alert("init()");
window.addEventListener("keydown", onKeyDown);
//window.addEventListener("keyup", onKeyUp);
//canvas = document.getElementById("canvas1");
//canvas.addEventListener('click', onCanvasClick);
//canvas.addEventListener('mousemove', onMouseMove);
}
function onKeyDown(event) {
var keyCode = 0;
if(event==null) {
keyCode = window.keyCode
window.event.preventDefault();
//alert("이벤트 1:"+keyCode);
}else{
keyCode = event.keyCode;
event.preventDefault();
//alert("이벤트 2:"+keyCode);
}
switch(keyCode){
case 37: // left key
to_left();
break;
case 38: // up key
break;
case 39: // right key
to_right();
break;
case 40: // down key
break;
default:
break;
}
}
</script>
</head>
<body onload="init();">
<canvas id="canvas1" width="300" height="200"></canvas>
<p>
<input type="button" value="Start Animation" onclick="startAnim();">
<input type="button" value="Stop Animation" onclick="stopAnim();">
<div style="visibility: hidden;">
<img id="sprite" src="walking_sprite_sheet.png">
<img id="sprite2" src="walking_sprite_sheet2.png">
</div>
</body>
</html>
사용된 Sprite Sheet
아래의 이미지는 왼쪽으로 달리는 프레임인데, 위의 코드에서 오른쪽으로 달리는 애니메이션을 구현할 때 아래의 이미지를 뒤집어서 새로운 Sprite Sheet 를 생성하여 사용하였다
