0

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

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

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

I think the problem is that your function loop requires Pair1 and Pair2 to exist, but init doesn’t do that until after loop has been called (via startloop).

Maybe this version of init would work?

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