[目次]
乱数とキー入力に応じて移動するオブジェクト | Webプログラミング!(2021年度)
Canvasによるアニメーションの基本
- setInterval(描画関数名,時間(ミリ秒)) により, 一定間隔で呼び出す関数を指定できる
- 描画関数では, 画面クリア, 描画, 時刻のインクリメントを行う
サンプル1
サンプル1index.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;
}
参考
- 掌田津耶乃, HTML5 Webアプリケーションプログラミング入門
(第5章)
- 奥村晴彦先生 グラフを描く(canvas編)|JavaScript
