JavaScriptファイルの作成
神経衰弱ゲームで利用するJavaScriptファイル、memory.jsを作成します。
まず最初にmemory.jsで利用する変数を以下に定義します。
var ctx; // コンテキスト var fstPick = true; // 1回目フラグ var fstCard = -1; // 1枚目のカード var scdCard; //2枚目のカード var clrBorderColor = "#0B0241";// クリア時に表示する枠線 var deck = [];//カードデッキ var firstx = 100; // デッキ1枚目のx座標位置 var firsty = 50; // デッキ1枚目のy座標位置 var margin = 20; // カード間スペース var crdWidth = 125; // カード横幅 var crdHeight = 190; //カード縦幅 var matched; // マッチフラグ var startTime; // 開始時間 var count = 0; // クリアカウント // ペアとなるカードを配列で定義 var pairs = [ ["one1.jpg", "one2.jpg"], ["two1.jpg", "two2.jpg"], ["three1.jpg", "three2.jpg"], ["four1.jpg", "four2.jpg"], ["five1.jpg", "five2.jpg"] ];
ここでは各変数を定義するとともに、pairsでペアとなるカードのjpg画像を配列で設定しています。後述するmakeDeckファンクションにてこのjpg画像をつかってデッキを生成していきます。
memory.jsは以下のファンクションで構成されます。
では、各ファンクションをひとつずつ見ていきましょう。
Card function - カードオブジェクトの生成
カードの座標位置、縦横の幅、イメージの設定、カード情報の設定、カード背景の描画設定を行います。
function Card(sx, sy, swidth, sheight, img, info) {
this.sx = sx;
this.sy = sy;
this.swidth = swidth;
this.sheight = sheight;
this.img = img;
this.info = info;
this.draw = drawBack;
}
makeDeck function - カードデッキの生成
神経衰弱としてのカードデッキを設定します。
pairsで定義した配列分LOOP処理を実行し、定義した配列ペア1枚目、2枚目のそれぞれのカードに対して画像とinfoを設定した後にdrawメソッドで描画を行っています。
function makeDeck() {
var i;
var acard; // ペア1枚目
var bcard; // ペア2枚目
var pica; // イメージ1
var picb; // イメージ2
var cx = firstx; // X座標
for (i = 0; i < pairs.length; i++) {
// ペア（1枚目）の生成
// イメージオブジェクトの生成
pica = new Image();
// ファイルをセット
pica.src = pairs[i][0];
// カードの生成
acard = new Card(cx, firsty, crdWidth, crdHeight, pica, i);
deck.push(acard);
// ペア（2枚目）の生成
picb = new Image();
picb.src = pairs[i][1];
bcard = new Card(cx, firsty + crdHeight + margin, crdWidth, crdHeight, picb, i);
deck.push(bcard);
// x座標にカード横幅とマージンを追加
cx = cx + crdWidth + margin;
// ペア1枚目、2枚目の描画を実行
acard.draw();
bcard.draw();
}
}
shuffle function - カードシャッフル
ランダム関数を利用してカードシャッフルの処理を5回実行しています。
このファンクションはinitファンクションにて実行されます。
function shuffle() {
var i;
var k;
var holderinfo;
var holderimg;
var nt;
// ランダム処理を5回実行
for (nt = 0; nt < 6*deck.length; nt++) {
// カードをランダムに取得
i = Math.floor(Math.random()*deck.length);
k = Math.floor(Math.random()*deck.length);
// カードデッキのinfoとimgを変数iに保持
holderinfo = deck[i].info;
holderimg = deck[i].img;
// 変数iからkへ格納
deck[i].info = deck[k].info;
deck[i].img = deck[k].img;
// infoとimgをセット
deck[k].info = holderinfo;
deck[k].img = holderimg;
}
}
drawBack function - カード背面の描画
ここではグラデーションを利用したfillRectメソッドによるカード背景の描画を行っています。
function drawBack() {
ctx.beginPath();
var grad = ctx.createLinearGradient(0,0, 0,500);
grad.addColorStop(0.5,'rgb(155, 187, 89)'); // 緑
grad.addColorStop(1,'rgb(128, 100, 89)'); // 紫
/* グラデーションをfillStyleプロパティにセット */
ctx.fillStyle = grad;
// fillRectメソッドで描画
ctx.fillRect(this.sx, this.sy, this.swidth, this.sheight);
}
第1章 |  |
第2章 | |
第3章 | |
第4章 | |
