2011年6月18日土曜日

HTML5 - Canvas アニメーション くま(1)

くまのアニメーション。端までいったら跳ね返る。なぜかブログのトップページだと、くまが消えない。。見るときは単一ページに飛んでください。





<canvas id="kuma" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("kuma");
var ctx = canvas.getContext("2d");

//キャラクターの最大数
var PLAYER_COUNT = 5;

//キャラクター画像
var img_i = new Image();
 img_i.src = 'kuma.png';

//最大数までキャラクターのインスタンスを作成
var players = new Array();
for(var i=0; i<PLAYER_COUNT; i++){
 players[i] = new Me(ctx,img_i,0,0,i,i);
}

//イメージロード後にメイン関数を繰り返し
img_i.onload = function() { 
 setInterval(main,10);
}

//メイン関数
function  main(){
 //画面のクリア
 ctx.clearRect(0,0,400,400);
 //キャラクターのインスタンスの表示
 for(var i=0; i<PLAYER_COUNT; i++){
  players[i].apear();
 }
}

//主人公のオブジェクトをつくってみる
//大きさ、位置、スピード、向きを持つ
function Me(ctx,img,x,y,vx,vy){
 var obj = this;
 obj.x = x ? x : 0;
 obj.y = y ? y : 0;
 obj.vx = vx ? vx : 2;
 obj.vy = vy ? vy : 1;
 
 //主人公を表示するメソッド
 obj.apear = function(){
  ctx.drawImage(img,obj.x,obj.y);
  obj.x = obj.x + obj.vx;
  obj.y = obj.y + obj.vy;
  //枠に到達したら折り返させる(速度の符号を反転)
  if(obj.x<=0||obj.x>=400-18) obj.vx = -obj.vx;
  if(obj.y<=0||obj.y>=400-30) obj.vy = -obj.vy;
 }
}
</script>

0 件のコメント:

コメントを投稿