最近どうっすか?

コンピュータをメインに技術系の話題について書いていけたらいいなぁ。

fxosアプリ(その2)

Firefox OSのアプリ(HTML5+JavaScriptです)を更新してみた。

  • htmlにはcanvasが1枚だけある
  • canvasの大きさはwindowサイズに合わせて設定する
  • canvasの内側に青い線で枠を書く
  • 枠の中を幅32x高さ50の画像ファイルが順番に表示されて横移動しているように見える

画像ファイルは「プログラミング生放送」のプロ生ちゃん(ドット絵)を使いました。
ダウンロード(クリエイター向け素材) | プログラミング生放送
ダウンロードしたドット絵は右向きの絵だったので左右反転して左向きにして使っています。

とりあえず、ウィンドウのサイズ変更やシミュレーターの縦置き/横置きの変換にも連動してくれています。

まずはHTMLファイルから

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset-UTF-8>
        <title>Hello,firefox app</title>
        <script type="text/javascript" src="script.js" charset="UTF-8"></script>
</head>
<body onload="draw_canvas();">
        <canvas id="canvas" />
</body>
</html>

次にJavaScriptのソース

//
//
//

var timerID;
var interval = 500;
var charX  = 1;
var charID = 0;
var imgSrc = ["img/11.png","img/12.png","img/13.png", "img/14.png","img/15.png","img/16.png"];

function drawPic() {
	var canvas = document.getElementById("canvas");
	if (canvas == null) return false;
	canvas.width = window.innerWidth - 20;
	canvas.height = window.innerHeight - 20;
	var context = canvas.getContext('2d');

	context.strokeStyle = "blue";
	context.strokeRect(10, 10, canvas.width-10, canvas.height-10);

	var image = Image();
	if (charID > 5) {
		charID = 0;
	}
	if ((canvas.width-(charX*32))<32) {
		charX = 1;
	}
	image.src = imgSrc[charID];
	context.drawImage(image, charX*32, 20);
	charID++;
	charX++;

	timerID = setTimeout("drawPic()", interval);

}

function draw_canvas() {
	drawPic();
}

こんなことでは、タッチや通信機能やハードウェア制御まで行くのにいつまでかかるのやら。。。

ではでは。