次に、HTML5 で画像を表示する為の「プログラム」を設定します。下記の手順で進めて下さい。
システムプログラム(sys.js)を設定する
- WordPress がインストされている所を FTP で開く
- 「wp-content」ディレクトリを開く
- その中の「themes」ディレクトリを開く
- 貴方の WordPress テーマディレクトリを開く
- そのディレクトリ内に「my-js」という新規ディレクトリを作成する
- 下記の「システムプログラム本体(sys.js)」をコピーする
- 適当なエディタで新規ファイルを開く
- そのファイルにコピー済みのプログラムをペーストする
- 「sys.js」という名前でデスクトップにセーブする
- それを「my-js」ディレクトリ内にアップロードする
システムプログラム本体(sys.js)
// // << sys.js >> // クソゲーGO! // 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 >> // クソゲー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 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); } } }
まとめ
今回行う事はコレだけです。ここまで来ればもう出来たも同然、後一息ですよっ♡
- 投稿タグ
- HTML5作る