クソゲー企画：女の子の攻防

次に、HTML5 で画像を表示する為の「プログラム」を設定します。下記の手順で進めて下さい。

システムプログラム（sys.js）を設定する

  • WordPress がインストされている所を FTP で開く
  • 「wp-content」ディレクトリを開く
  • その中の「themes」ディレクトリを開く
  • 貴方の WordPress テーマディレクトリを開く
  • そのディレクトリ内に「my-js」という新規ディレクトリを作成する
  • 下記の「システムプログラム本体（sys.js）」をコピーする
  • 適当なエディタで新規ファイルを開く
  • そのファイルにコピー済みのプログラムをペーストする
  • 「sys.js」という名前でデスクトップにセーブする
  • それを「my-js」ディレクトリ内にアップロードする

システムプログラム本体（sys.js）

//
//	<< sys.js >>
//	進撃のクソゲー防衛軍
//	2015.01.10
//
///////////////////////////////////////////////////
// BOOT
window.onload = initSys;

///////////////////////////////////////////////////
// システム変数
var canvas;
var cntex;
var stage;
var cxsiz;
var cysiz;
var click;
var mx;
var my;

///////////////////////////////////////////////////
// ゲーム変数
var que;
var img = [];
var spr = [];

///////////////////////////////////////////////////
// 独自スプライト変数
var smod = [];
var xpos = [];
var ypos = [];
var ybas = [];
var xsiz = [];
var ysiz = [];
var scal = [];
var zrot = [];
var fjmp = [];
var sjmp = [];
var grab = [];
var flg0 = [];
var flg1 = [];
var flg2 = [];
var flg3 = [];
var tim0 = [];
var tim1 = [];
var tim2 = [];
var tim3 = [];

///////////////////////////////////////////////////
// システム初期化
function initSys()
{
	// キャンバスの初期化
	canvas = document.getElementById("myCanvas");
	cntex = canvas.getContext("2d");
	cxsiz = canvas.width;
	cysiz = canvas.height;
	click = 0;
	// ステージの初期化
	stage = new createjs.Stage(canvas);

	// 画像の読込み開始
	que = new createjs.LoadQueue();
	que.loadManifest(manifest);
	que.addEventListener('complete', initGameSys);
}

///////////////////////////////////////////////////
// ゲーム初期化
function initGameSys()
{
	// 独自スプライトの初期化
	for (var i=0; i<SPRMAX; i++) {
		// ビットマップのスプライト化
		spr[i] = new createjs.Bitmap();
		// 変数の初期化
		smod[i] = 1;
		xpos[i] = 0;
		ypos[i] = 0;
		ybas[i] = 0;
		scal[i] = 1.0;
		zrot[i] = 0;
		fjmp[i] = 0;
		sjmp[i] = 0;
		grab[i] = 0;
		flg0[i] = 0;
		flg1[i] = 0;
		flg2[i] = 0;
		flg3[i] = 0;
		tim0[i] = 0;
		tim1[i] = 0;
		tim2[i] = 0;
		tim3[i] = 0;
	}
	// ユーザーによる初期化
	initGame();
	
	// スプライトの表示
	for (var i=0; i<SPRMAX; i++) {
		spr[i].x = xpos[i];
		spr[i].y = ypos[i];
		spr[i].visible = false;
		stage.addChild(spr[i]);
	}
	
	// ゲームの実行
	createjs.Ticker.addEventListener("tick", execGameSys);
	// マウスの受付
	clickSys();
	// タッチの受付
	touchSys();
}

///////////////////////////////////////////////////
// ゲーム実行
function execGameSys()
{
	// Canvas の更新
    stage.update();

	// ユーザーによる実行
    execGame();
    // スプライト情報のコピー
	for (var i=0; i<SPRMAX; i++) {
		// 処理
		jmpSpr(i);
		// 座標
		spr[i].x = xpos[i];
		spr[i].y = ypos[i];
		// 拡縮
		spr[i].scaleX = scal[i];
		spr[i].scaleY = scal[i];
		// 回転
		spr[i].rotation = zrot[i];
		// 表示の有無
		spr[i].visible = false;
		if (smod[i] != 0) {
			spr[i].visible = true;
		}
	}
}

///////////////////////////////////////////////////
// マウス受付
function clickSys()
{
	// ON
	canvas.addEventListener('mousedown', function(e) {
		var button = e.target.getBoundingClientRect();
		click = 1;
		mx = e.clientX - button.left;
		my = e.clientY - button.top;
	}, false);
	// OFF
	canvas.addEventListener('mouseup', function(e) {
		click = 0;
	}, false);
}

///////////////////////////////////////////////////
// 画面タッチ受付
function touchSys()
{
	// ON
	canvas.addEventListener('touchstart', function(e) {
		var touch = e.targetTouches[0];
		click = 1;
		mx = e.clientX - touch.pageX;
		my = e.clientY - touch.pageY;
	}, false);
	// OFF
	canvas.addEventListener('touchend', function(e) {
		click = 0;
	}, false);
}

///////////////////////////////////////////////////
// 画像番号の取得
function loadImg(imgId, id)
{
	img[imgId] = que.getResult(id);
}

///////////////////////////////////////////////////
// スプライトに画像を設定する
function setImg(sprId, imgId)
{
	// 画像番号の設定
	spr[sprId].image = img[imgId];
	// 画像サイズ/2の取得
	xsiz[sprId] = spr[sprId].getBounds().width/2;
	ysiz[sprId] = spr[sprId].getBounds().height/2;
	// 原点を画像の中心にする
	spr[sprId].regX = xsiz[sprId];
	spr[sprId].regY = ysiz[sprId];
}

///////////////////////////////////////////////////
// 文字列の表示
function drawStr(str, x, y, color)
{
	cntex.save();
	cntex.fillStyle = color;
	cntex.font = "15px Arial";
	cntex.textAlign = "center";
	cntex.textBaseLine = "middle";
	cntex.fillText(str, x, y);
	cntex.restore();
}

///////////////////////////////////////////////////
// ジャンプ処理
function jmpSpr(s)
{
	if (fjmp[s] != 0) {
		// 地面より上なら
		if (ypos[s] < ybas[s]) {
			// ジャンプ下降
			sjmp[s] += grab[s];
			ypos[s] += sjmp[s];
			if (ypos[s] > ybas[s]) {
				ypos[s] = ybas[s];
			}
		}
		// 地面より下なら
		else {
			// ジャンプ終了
			fjmp[s] = 0;
		}
	}
}

ゲームプログラム（begin.js）を設定する

  • 下記の「ゲームプログラム本体（begin.js）」をコピーする
  • 適当なエディタで新規ファイルを開く
  • そのファイルにコピー済みのプログラムをペーストする
  • 「begin.js」という名前でデスクトップにセーブする
  • それを「my-js」ディレクトリ内にアップロードする

ゲームプログラム本体（begin.js）

//
//	<< begin.js >>
//	進撃のクソゲー防衛軍
//	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 GAL = 1;
const UFO = 2;
const SPRMAX = 3;

///////////////////////////////////////////////////
// 画像番号定数
const IMG_PLY = 0;
const IMG_GAL0 = 1;
const IMG_GAL1 = 2;
const IMG_UFO0 = 3;
const IMG_UFO1 = 4;

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

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

///////////////////////////////////////////////////
// ゲーム初期化
function initGame()
{
	// 画像の読込み
	loadImg(IMG_PLY, "play");
	loadImg(IMG_GAL0, "gal040");
	loadImg(IMG_GAL1, "gal041");
	loadImg(IMG_UFO0, "ufo0");
	loadImg(IMG_UFO1, "ufo1");

	// スプライトに画像を設定
	setImg(PLY, IMG_PLY);
	setImg(GAL, IMG_GAL0);
	setImg(UFO, IMG_UFO0);

	// スプライトの初期座標を設定
	xpos[PLY] = cxsiz/2;
	ypos[PLY] = cysiz - ysiz[PLY];
	xpos[GAL] = cxsiz/2;
	ypos[GAL] = cysiz/2;
	xpos[UFO] = cxsiz/2;
	ypos[UFO] = 0 + ysiz[UFO];
}

///////////////////////////////////////////////////
// ゲーム実行
function execGame()
{
	// GAL の移動
	tim0[GAL]++;
	if ((tim0[GAL] & 0x07) == 0) {
		if (flg0[GAL] == 0) {
			xpos[GAL] -= 5;
			if (xpos[GAL] < 0+xsiz[GAL]) {
				flg0[GAL] = 1;
			}
		}
		else {
			xpos[GAL] += 5;
			if (xpos[GAL] > cxsiz-xsiz[GAL]) {
				flg0[GAL] = 0;
			}
		}
		// GAL のアニメ
		if ((tim0[GAL] & 0x08) == 0) {
			setImg(GAL, IMG_GAL0);
		}
		else {
			setImg(GAL, IMG_GAL1);
		}
	}

	// UFO の移動
	tim0[UFO]++;
	if ((tim0[UFO] & 0x00) == 0) {
		if (flg0[UFO] == 0) {
			xpos[UFO] -= 1;
			if (xpos[UFO] < 0+xsiz[UFO]) {
				flg0[UFO] = 1;
			}
		}
		else {
			xpos[UFO] += 1;
			if (xpos[UFO] > cxsiz-xsiz[UFO]) {
				flg0[UFO] = 0;
			}
		}
		// UFO のアニメ
		if ((tim0[UFO] & 0x08) == 0) {
			setImg(UFO, IMG_UFO0);
		}
		else {
			setImg(UFO, IMG_UFO1);
		}
	}
}

まとめ

今回行う事はコレだけです。ここまで来ればもう出来たも同然、後一息ですよっ♡

投稿タグ