HTML5「回転アニメーション」サンプルプログラム

キャラの回転機能を使ったアニメーションの実験で、女の子が転ぶ様子を表現しています。

実行すると…

プログラム内容は、これだっ！

//
//	<< ex04.js >>
//	クソゲーGO！
//	2015.01.10
//
///////////////////////////////////////////////////

///////////////////////////////////////////////////
// ゲーム定数
const PLY = 0;
const SPRMAX = 1;

///////////////////////////////////////////////////
// 画像番号定数
const IMG_WALK = 0;
const IMG_DOWN = 1;

///////////////////////////////////////////////////
// ユーザー変数

///////////////////////////////////////////////////
// 読込み画像の定義
var manifest = [
	{id:"walk", src:"../wp-content/myImg/nyan/gal_walk.png"},
	{id:"down", src:"../wp-content/myImg/nyan/gal_down.png"},
];

///////////////////////////////////////////////////
// ゲーム初期化
function initGame()
{
	loadImg(IMG_WALK, "walk");
	loadImg(IMG_DOWN, "down");
	setImg(PLY, IMG_WALK);
	scal[PLY] = 0.6;
	xpos[PLY] = 0 + xsiz[PLY] * scal[PLY];
	ypos[PLY] = cysiz - ysiz[PLY];
	smod[PLY] = 1;
}

///////////////////////////////////////////////////
// ゲーム実行
function execGame()
{
	// PLY の移動
	if (smod[PLY] == 1) {
		xpos[PLY] += 5;
		if (xpos[PLY] > cxsiz-xsiz[PLY]-40) {
			smod[PLY] = 2;
		}
	}
	// PLY の回転
	else if (smod[PLY] == 2) {
		zrot[PLY] += 20;
		if (zrot[PLY] > 40) {
			setImg(PLY, IMG_DOWN);
			zrot[PLY] = 0;
			xpos[PLY] += 40;
			smod[PLY] = 3;
			tim0[PLY] = 50;
		}
	}
	// PLY の伏せ
	else {
		tim0[PLY]--;
		if (tim0[PLY] == 0) {
			xpos[PLY] = 0 + xsiz[PLY] * scal[PLY];
			setImg(PLY, IMG_WALK);
			smod[PLY] = 1;
		}
	}
}