0

ミニゲームをゼロから作るのは初めてです。

Google chrome では、実行時に次のエラーが表示されます。

Uncaught TypeError: Cannot call method 'draw' of undefined  Logic.js:28
loop                                                        Logic.js:28
startLoop                                                   Logic.js:35
init                                                        Logic.js:19

「setInterval」を使用したときは正常に機能していましたが、最新のものが必要です。requestAnimationFrame はそれとは何の関係もないと思います。

しかし、私は何が悪いのかわかりません！助けてください。

// Create the canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.addEventListener('click', canvasClick, false);

//Declarations
var isPlaying = false;
var animeFrame = window.requestAnimationFrame ||
                 window.webkitRequestAnimationFrame ||
                 window.mozRequestAnimationFrame ||
                 window.msRequestAnimationFrame ||
                 window.oRequestAnimationFrame;

var Pair1;
var Pair2;

//init
function init(){
    startLoop();
    Pair1 = new Pair();
    Pair2 = new Pair();
    alert('init called');
}

//Draw
function loop(){
    if(isPlaying){
        Pair1.draw();
        Pair2.draw();
        animeFrame(loop);
    }
}
function startLoop(){
    isPlaying = true;
    loop();
}

function stopLoop(){
    isPlaying = false;
}

//Interface
function canvasClick(){
    var X = event.x;
    var Y = event.y;

    X -= canvas.offsetLeft;
    Y -= canvas.offsetTop;

    if(X > Pair1.X && X < Pair1.X + 64){
        if(Y > Pair1.Y && Y < Pair1.Y + 96){
            alert('Clicked Pair1');
        };
    };
}

//Create Images
var pairImg = new Image();
pairImg.src = "images/Gold_Pair.png";
pairImg.addEventListener('load',init,false)

//Pair
function Pair(){
    var X = Math.floor(Math.random() * (canvas.width - 64));
    var Y = Math.floor(Math.random() * (canvas.height - 96));
}

//Draw
Pair.prototype.draw = function(){
    ctx.drawImage(pairImg, this.X, this.Y, 64, 96);
};

返信ありがとうございます!!!

4

2 に答える 2

5

「init」関数は「startLoop」を呼び出します。これは「loop」を呼び出します。これは、「Pair1」と「Pair2」が初期化されていることを前提としています。ただし、「init」は「startLoop」を呼び出すまで初期化されません。

「init」を変更してみてください。

function init(){
    Pair1 = new Pair();
    Pair2 = new Pair();
    startLoop();
    alert('init called');
}
于 2012-08-13T13:56:56.130 に答える
1

loop問題は、関数が必要Pair1でありPair2、存在することだと思いますが、 (経由で) が呼び出されるinitまでそれを行いません。loopstartloop

たぶん、このバージョンのinit動作しますか?

//init
function init(){
    Pair1 = new Pair();
    Pair2 = new Pair();
    startLoop();
    alert('init called');
}
于 2012-08-13T13:57:58.350 に答える