2011年8月4日木曜日

HTML5 - Canvas アニメーション Walk


<canvas id="game2" width="500" height="270"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("game2");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

var img_jero = [];
img_jero[0] = new Image();
img_jero[0].src = '/pic/jeronimo3.png';
img_jero[1] = new Image();
img_jero[1].src = '/pic/jeronimo2.png';
img_jero[2] = new Image();
img_jero[2].src = '/pic/jeronimo1.png';

var tm;
img_jero[2].onload = function() { 
 tm = setInterval(main,200);
}

var size_x = 50;
var size_y = 80;
var x = cw;
var y = 0;
var idx = 2;

function main(){
 ctx.clearRect(0,0,cw,ch);
 ctx.drawImage(img_jero[idx],x+250,y+175,size_x,size_y);
 ctx.drawImage(img_jero[idx],x,y);
 idx--;
 if(idx==-1){idx=2;}
 x=x-30;
 if(x<-300){x=cw;} 
}
</script>

0 件のコメント:

コメントを投稿