HTML5「画像を動かす＋クリックで移動方向変化」サンプルプログラム

キャラをクリックする度にキャラの移動方向が切り替わります。

実行すると…

プログラム内容

//
//	<< ex01.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/comn/play.png"},
];

///////////////////////////////////////////////////
// ゲーム初期化
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) {
		switch(smod[PLY]) {
			case 1: xpos[PLY] -= 2;
					break;
			case 2: ypos[PLY] -= 2;
					break;
			case 3: xpos[PLY] -= 2;
					ypos[PLY] -= 2;
					break;
		}
		if (xpos[PLY] < 0+xsiz[PLY] || ypos[PLY] < 0+ysiz[PLY]) {
			flg0[PLY] = 1;
		}
	}
	else {
		switch(smod[PLY]) {
			case 1: xpos[PLY] += 2;
					break;
			case 2: ypos[PLY] += 2;
					break;
			case 3: xpos[PLY] += 2;
					ypos[PLY] += 2;
					break;
		}
		if (xpos[PLY] > cxsiz-xsiz[PLY] || ypos[PLY] > cysiz-ysiz[PLY]) {
			flg0[PLY] = 0;
		}
	}

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