画像が表示されない

Question

otyaと申します。
プログラミング初心者で、ゲームを作れば身につくのも早いだろうと思い、雑誌に書いてある通り15パズルゲームのコードを書いてみたのですが、画像が表示されません。

開発環境で表示されるエラーを消すために関数の順番を変えたり、変数宣言の仕方を変えたりしたのですが、何が原因なのかわかりません。
ブラウザはクロームで、javascriptの表示設定はされており、画像も同じフォルダにいれており、ファイル名も合っています。

どこをどうすれば画像が表示されるのか教えてください。
長いですが、コードは下記の通りです。

//各種設定
var PICTURE_URL = "Penguins.png"; //画像ファイルのURL
var BLOCK_W = 150; //ブロックの幅
var BLOCK_H = 150; //ブロックの高さ
var ROW_COUNT = 4; //列を何枚に切るか
var COL_COUNT = 4; //行を何枚に切るか
var NUM_BLOCKS = ROW_COUNT * COL_COUNT; //上下左右の相対座標を定義
var UDLR = [[0, -1], [0, 1], [-1, 0], [1, 0]]; //ゲーム全体で使う変数
var context, image; //描画用
var blocks = []; //各ブロックを管理する配列変数
var isLock; //マウス操作をロックするかどうか

//パズルの画面を描画する
function drawPuzzle() {
    "use strict";
    var i,
        dx,
        dy,
        no,
        sx,
        sy,
        cx,
        cy;
    for (i = 0; i < NUM_BLOCKS; i = i + 1) {
        //描画先座標を計算
        dx = (i % COL_COUNT) * BLOCK_W;
        dy = Math.floor(i / COL_COUNT) * BLOCK_H;
     //描画元座標を計算
        no = blocks[i];
        if (no < 0) { //空きブロック
            context.fillStyle = "#0000FF";
            context.fillRect(dx, dy, BLOCK_W, BLOCK_H);
        } else {
            sx = (no % COL_COUNT) * BLOCK_W;
            sy = Math.floor(no / COL_COUNT) * BLOCK_H;
            // 画像の一部を切り取って描画
            context.drawImage(image, sx, sy, BLOCK_W, BLOCK_H, dx, dy, BLOCK_W, BLOCK_H);
        }
        //画像の枠を描画
        context.beginPath();
        context.strokeStyle = "white";
        context.lineWidth = 3;
        context.rect(dx, dy, BLOCK_W, BLOCK_H);
        context.stroke();
        context.closePath();
        // ブロック番号を描画する
        context.fillStyle = "white";
        context.font = "bold 40px Arial";
        cx = dx + (BLOCK_W - 40) / 2;
        cy = dy + BLOCK_H / 2;
        context.fillText(no, cx, cy);
    }
}
// 列と行からブロック番号を調べる関数
function getIndex(col, row) {
    "use strict";
    return row * COL_COUNT + col;
}
function getCol(no) { "use strict"; return no % COL_COUNT; }
function getRow(no) {
    "use strict";
    return Math.floor(no / COL_COUNT);
}
//パズルの各ピースをシャッフルする
function shufflePuzzle() {
    "use strict";
    var scount = 20, //シャッフルする回数を指定
        blank = NUM_BLOCKS - 1, //空きブロック位置
    //一回のシャッフルを行う関数
        shuffle = function () { scount = scount - 1;
            if (scount <= 0) {
                isLock = false; //ゲーム開始
                return;
            }
            var r, px, py, no;
                               while (true) {
                r = Math.floor(Math.random() * UDLR.length);
                px = getCol(blank) + UDLR[r][0];
                py = getRow(blank) + UDLR[r][1];
                if (!(px < 0 || px >= COL_COUNT)) && !(py < 0 || py >= COL_COUNT) {
                no = getIndex(px, py);
                break;
            }
         }
            blocks[blank] = blocks[no];
            blocks[no] = -1;
            blank = no;
            drawPuzzle();
            setTimeout(shuffle, 100);
            };
    shuffle();
}
//ゲームの初期化
function initGame() {
    "use strict";
    isLock = true; //ユーザ操作をロックする
    //パズルのブロックを作成する
    var i;
    for (i = 0; i < NU M_BLOCKS; i = i + 1) { blocks[i] = i; }
    //末尾（右下）を空きブロックとする
    blocks[NUM_BLOCKS - 1] = -1;
    drawPuzzle(); //見本を表示する
    //一秒後にシャッフルを開始する
    setTimeout(shufflePuzzle, 1000);
}
//初期化処理
function init() {
    //描画コンテキストの取得
    "use strict";
    var canvas = document.getElementById("gameCanvas");
    if (!canvas.getContext) {
        window.aleat("Canvasをサポートしていません。");
        return;
    }
    context = canvas.getContext("2d");
     //メイン画像を生み出す
    image = new Image();
    image.src = PICTURE_URL;
    image.onload = initGame; //読み込んだらゲームを初期化
}

//マウスで移動先をクリックした時の処理
function mouseHandler(t) {
    if (isLock) return;
    // タッチ座標の取得
    var px = t.offsetX, py = t.offsetY;
    if (px == undefined) { //Firefox対策
        var p = t.currentTarget;
        px = t.layerX - p.offsetLeft;
        py = t.layerY - p.offsetTop;
    }
    //何番目のピースを動かしたいのか計算する
    var px2 = Math.floor(px / BLOCK_W);
    var py2 = Math.floor(py / BLOCK_H);
    var no = getIndex(px2, py2);
    //空白ブロックなら動かせない
    if (blocks[no] == -1) return;
    // 上下左右に動かせるブロックがあるか確認
    for (var i = 0; i < UDLR.length; i++) {
        var pt = UDLR[i];
        var xx = px2 + pt[0];
        var yy = py2 + pt[1];
        var no = getIndex(xx, yy);
        if (xx < 0 || xx >= COL_COUNT) continue;
        if (yy < 0 || yy >= ROW_COUNT) continue;
        if (blocks[no] == -1) { // 移動可能か？
            blocks[no] = blocks[getIndex(px2,py2)];
            blocks[getIndex(px2,py2)] = -1;
            drawPuzzle();
            checkClear();
            break;
        }
    }
}
//マウスイベントの設定
    canvas.onmousedown = mouseHandler;
// クリアしたかどうかをチェックする
function checkClear() {
    var flag = true;
    for (var i = 0; i < (NUM_BLOCKS - 1); i++) {
        if (blocks[i] != i) {
            flag = false; break;
        }
    }
        if (flag) {
            aleat("ゲームクリアしました!");
            initGame(); //再度ゲームを実行
        }
}

お手数ですが、お願い致します。

Answer 1

画像が表示されない・・というより、シンタックスエラーで動かないと思いますけど・・

下記の部分のカッコの対応がおかしいです。

/* NG */ if (!(px < 0 || px >= COL_COUNT)) && !(py < 0 || py >= COL_COUNT) {
/* OK */ if (!(px < 0 || px >= COL_COUNT) && !(py < 0 || py >= COL_COUNT)) {

下記の変数名の途中に空白があるのがおかしいです。

/* NG */ for (i = 0; i < NU M_BLOCKS; i = i + 1) { blocks[i] = i; }
/* OK */ for (i = 0; i < NUM_BLOCKS; i = i + 1) { blocks[i] = i; }

下記は init() 関数の中にあるべきものだと思います。

//マウスイベントの設定
canvas.onmousedown = mouseHandler;

Comments

[otya]

回答ありがとうございます！
動きました！感動です！
わかりやすく説明していただきましてありがとうございました！