[目次]

乱数とキー入力に応じて移動するオブジェクト | Webプログラミング!(0000年度)

Time-stamp: "2013-02-04 Mon 22:07 JST hig"

Canvasによるアニメーションの基本

  • setInterval(描画関数名,時間(ミリ秒)) により, 一定間隔で呼び出す関数を指定できる
  • 描画関数では, 画面クリア, 描画, 時刻のインクリメントを行う

サンプル1

サンプル1

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Canvasのアニメーションのテスト</title>
<script type="text/javascript" src="paintcanvas.js"></script>
<script type="text/javascript">
  window.onload = function (){
  var c=document.querySelector('#canvas-id1');
  paintCanvas(c);
  }
</script>


</head>
<body>
  <h1>Canvasのテスト</h1>
  <p>移動はesdxキー. 矢印キーだと2倍の速さで.</p>

  <canvas id="canvas-id1" width="400" height="320">対応していないときに表示される文字列</canvas>
</body>
</html>

paintcanvas.js


function paintCanvas(c){

    // 決まり文句
    var ct=c.getContext('2d');

    // 画像を保持するためのオブジェクト
    var cat=new Image();

    // ゲームの(画面の)状態を指定する変数の組
    var x=10;
    var y=20;
    var dx=2;
    var dy=2;

    var x1=100;
    var y1=100;
    var dx1=10;
    var dy1=10;



    // 一定間隔で自動的に行うこと
    function update(){
	x1+=dx1*(Math.random()*2-1);
	y1+=dy1*(Math.random()*2-1);
	drawCanvas();
    }


    // キー入力に応じて行うこと
    function eventKeyPressed(e){
	var letterPressed = String.fromCharCode(e.keyCode);
	letterPressed = letterPressed.toLowerCase();

	
	if( letterPressed=="s" ){
	    x-=dx;
	} else if ( letterPressed=="d" ){
	    x+=dx;
	} else if ( letterPressed=="x" ){
	    y+=dy;
	} else if ( letterPressed=="e" ){
	    y-=dy;
	} else {
	// 文字キーじゃないのは e.keyCode から直接判定する
	// key codeの定数は下で定義
	// 文字キーもこのやり方で判別することも可能(key codeをみつければ)
	    switch (e.keyCode){
	    case KEY_LEFT:
		x-=2*dx;
		break;
	    case KEY_UP:
		y-=2*dy;
		break;
	    case KEY_RIGHT:
		x+=2*dx;
		break;
	    case KEY_DOWN:
		y+=2*dy;
		break;
	    case KEY_ENTER:
		break;
	    case KEY_SPACE:
		break;
	    default:
	    }
	}	
    }

    // 画面の描画
    function drawCanvas(){
	// 画面クリア
	ct.fillStyle="#EEEEEE";
	ct.fillRect(0,0,c.width,c.height);


	ct.drawImage(cat,0,0)
	drawtriangle(x,y);
	drawtriangle(x1,y1);
    }

    //// drawCanvas 内で使う, 便利のために作った関数
    function drawtriangle(x,y){
	var triangle=[[0,-10],[-8,5],[+8,5]];

	ct.fillStyle="rgba(255,160,160,0.5)";
	ct.strokeStyle="blue";
	ct.beginPath();
	ct.moveTo(x+triangle[0][0],y+triangle[0][1]);
	for(var i=1;i<triangle.length;i++){
	    ct.lineTo(x+triangle[i][0],y+triangle[i][1]);
	}
	ct.closePath();
	ct.stroke();
    }


    /////////////  最初に1回だけ行えばいいこと //////////////////
    window.addEventListener("keyup",eventKeyPressed,true);
    setInterval(update,100);

    cat.src="GUM15_SY02055.jpg"; // 同じディレクトリに置かれた画像ファイル名
    cat.onload = drawCanvas;
//    cat.addEventListener('load',paint,false); // これでもいい気がしたんだけど

    // 定数. 本当はkeyオブジェクトのメンバにしたほうがいいだろうけど.    
    var KEY_LEFT=37;
    var KEY_UP=38;
    var KEY_RIGHT=39;
    var KEY_DOWN=40;
    var KEY_ENTER=13;
    var KEY_SPACE=32;

}


    

参考

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net