HTML5「背景表示＋主人公＋弾発射」サンプルプログラム

背景画面が表示され、その手前に主人公が表示され動きます。キャラをクリックすると弾を発射します。何となくゲームっぽくなって来ました。

実行すると…

プログラム内容

//
//	<< ex02.js >>
//	クソゲーGO！
//	2014.12.26
//
///////////////////////////////////////////////////

///////////////////////////////////////////////////
// システム変数
//	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 BG = 0;
const PLY = 1;
const PWP = 2;
const PWPMAX = 10;
const SPRMAX = PWP+PWPMAX;

///////////////////////////////////////////////////
// 画像番号定数
const IMG_BG = 0;
const IMG_PLY = 1;
const IMG_PWP = 2;

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

///////////////////////////////////////////////////
// 読込み画像の定義
var manifest = [
	{id:"bg", src:"../wp-content/myImg/comn/bg00.png"},
	{id:"play", src:"../wp-content/myImg/comn/play.png"},
	{id:"pwpn", src:"../wp-content/myImg/comn/pwpn.png"},
];

///////////////////////////////////////////////////
// ゲーム初期化
function initGame()
{
	// 画像の読み込み
	loadImg(IMG_BG, "bg");
	loadImg(IMG_PLY, "play");
	loadImg(IMG_PWP, "pwpn");

	// 画像番号の設定
	setImg(BG, IMG_BG);
	setImg(PLY, IMG_PLY);
	for (var i=0; i<PWPMAX; i++) {
		setImg(PWP+i, IMG_PWP);
	}

	// 背景の初期化
	smod[BG] = 1;
	xpos[BG] = cxsiz/2;
	ypos[BG] = cysiz/2;

	// プレイヤーの初期化
	smod[PLY] = 1;
	xpos[PLY] = cxsiz/2;
	ypos[PLY] = cysiz - ysiz[PLY];
	
	// プレイヤー弾の初期化
	for (var i=0; i<PWPMAX; i++) {
		smod[PWP+i] = 0;
	}
}

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

	// プレイヤー弾の移動
	for (var i=0; i<PWPMAX; i++) {
		if (smod[PWP+i] != 0) {
			ypos[PWP+i] -= 10;
			if (ypos[PWP+i] < 0) {
				smod[PWP+i] = 0;
			}
		}
	}
	
	// クリック検査
	if (click != 0) {
		click = 0;
		// プレイヤー弾の発射
		for (var i=0; i<PWPMAX; i++) {
			if (smod[PWP+i] == 0) {
				xpos[PWP+i] = xpos[PLY];
				ypos[PWP+i] = ypos[PLY]-20;
				smod[PWP+i] = 1;
				break;
			}
		}
	}
}