我需要帮助在我的JavaScript小游戏中查找错误（三个我没有得到的错误）

这是我第一次完全从头开始制作迷你游戏

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);
};

//创建画布
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
canvas.addEventListener（'click'，canvasClick，false）；
//声明
var显示=假；
var animeFrame=window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.msRequestAnimationFrame||
window.oRequestAnimationFrame；
var Pair1；
var Pair2；
//初始化
函数init（）{
startoop（）；
Pair1=新对（）；
Pair2=新对（）；
警报（'init called'）；
}
//画
函数循环（）{
如果（显示）{
Pair1.draw（）；
Pair2.draw（）；
animeFrame（循环）；
}
}
函数startoop（）{
isplay=true；
loop（）；
}
函数stopLoop（）{
isplay=false；
}
//接口
函数canvasClick（）{
var X=事件X；
var Y=事件Y；
X-=canvas.offsetLeft；
Y-=canvas.offsetTop；
如果（X>Pair1.X&&XPair1.Y&&Y

谢谢你的回复

您的“init”函数调用“startoop”，后者调用“loop”，后者期望“Pair1”和“Pair2”已经初始化。然而，“init”在调用“startoop”之后才初始化它们

尝试更改“init”：

“init”函数调用“startoop”，后者调用“loop”，后者期望“Pair1”和“Pair2”已经初始化。然而，“init”在调用“startoop”之后才初始化它们

尝试更改“init”：

---

我认为问题在于，您的函数

loop

需要

Pair1

和

Pair2

存在，但是

init

在调用

loop

之后（通过

startoop

）才会这样做

也许这个版本的

init

可以工作

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

---

我认为问题在于，您的函数

loop

需要

Pair1

和

Pair2

存在，但是

init

在调用

loop

之后（通过

startoop

）才会这样做

也许这个版本的

init

可以工作

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