2011年6月18日土曜日

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

くまのアニメーション2。ランダムでキャラ選ぶ。ランダムで向きと速度決める。ブログのトップページだと表示されない。。。見るときは単一ページからお願いします。





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

//キャラクターの最大数
var PLAYER_COUNT = 10;
 
//キャラクター画像の読み込み
var imgs = new Array();
imgs[0] = new Image();
imgs[0].src = 'BlueToy.png'
imgs[1] = new Image();
imgs[1].src = 'YellowToy.png'
imgs[2] = new Image();
imgs[2].src = 'FireToy.png'
imgs[3] = new Image();
imgs[3].src = 'heart.png'

//最大数までキャラクターのインスタンスを作成
var players = new Array();
for(var i=0; i<PLAYER_COUNT; i++){
 //向きと早さをランダムに決める
 var vx = Math.random()*5; 
 var vy = Math.random()*5;
 //イメージをランダムに決める
 var img_no = Math.floor(Math.random()*4);
 //インスタンス作成
 players[i] = new Me(ctx,imgs[img_no],0,0,vx,vy);
}

//イメージロード後にメイン関数を繰り返し
imgs[3].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.size = 32;
 
 //主人公を表示するメソッド
 obj.apear = function(){
  ctx.drawImage(img,obj.x,obj.y,obj.size,obj.size);
  obj.x = obj.x + obj.vx;
  obj.y = obj.y + obj.vy;
  //枠に到達したら折り返させる(速度の符号を反転)
  if(obj.x<=0||obj.x>=400-28) obj.vx = -obj.vx;
  if(obj.y<=0||obj.y>=400-30) obj.vy = -obj.vy;
 }
}
</script>

0 件のコメント:

コメントを投稿