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

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

谷歌浏览器在运行时给了我这些错误：

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

感谢您的回复!!