HTML5「画像を左右に動かす＋文字表示」サンプルプログラム

HTML5プログラムの続きです。

実行すると…

画像をクリックする度に画像上の文字が切り替わります。

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

//
//	<< ex00.js >>
//	クソゲーGO！
//	2014.12.25
//
///////////////////////////////////////////////////

///////////////////////////////////////////////////
// システム変数
//	cxsiz キャンバス幅
//	cysiz キャンバス高
//	click マウス状態
//	mx マウス_X_座標
//	my マウス_Y_座標

///////////////////////////////////////////////////
// スプライト変数
//	smod[] 状態
//	xpos[] X_座標
//	ypos[] Y_座標
//	xsiz[] 画像幅/2
//	ysiz[] 画像高/2
//	flg0[] 自由変数
//	flg1[]
//	flg2[]
//	flg3[]
//	tim0[] 自由変数
//	tim1[]
//	tim2[]
//	tim3[]

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

///////////////////////////////////////////////////
// 画像番号定数
const IMG_PLY = 0;

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

///////////////////////////////////////////////////
// 読込み画像の定義
var manifest = [
	{id:"play", src:"../wp-content/myImg/nyan/neko.jpg"},
];

///////////////////////////////////////////////////
// ゲーム初期化
function initGame()
{
	loadImg(IMG_PLY, "play");
	setImg(PLY, IMG_PLY);
	xpos[PLY] = cxsiz/2;
	ypos[PLY] = cysiz - ysiz[PLY];
}

///////////////////////////////////////////////////
// ゲーム実行
function execGame()
{
	// PLY の移動
	if (flg0[PLY] == 0) {
		xpos[PLY] -= 1;
		if (xpos[PLY] < 0+xsiz[PLY]) {
			flg0[PLY] = 1;
		}
	}
	else {
		xpos[PLY] += 1;
		if (xpos[PLY] > cxsiz-xsiz[PLY]) {
			flg0[PLY] = 0;
		}
	}

	// クリック検査
	if (click != 0) {
		click = 0;
		if (smod[PLY] == 1) {
			smod[PLY] = 2;
		}
		else {
			smod[PLY] = 1;
		}
	}

	// 文字列の表示
	if (smod[PLY] == 1) {
		drawStr("にゃお〜", xpos[PLY], ypos[PLY]-70, "black");
	}
	else {
		drawStr("ごろにゃ〜", xpos[PLY], ypos[PLY]-70, "black");
	}
}