Question

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

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

谢谢你回复!!!

Answer 1

你的＆＃34; init＆＃34;函数调用＆＃34; startLoop＆＃34;，调用＆＃34;循环＆＃34;，它期望＆＃34; Pair1＆＃34;和＆＃34; Pair2＆＃34;已初始化。然而，＆＃34; init＆＃34;没有初始化它们直到在调用＆＃34; startLoop＆＃34;之后<。

尝试更改＆＃34; init＆＃34;：

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

Answer 2

我认为问题在于您的功能loop需要Pair1和Pair2存在，但init在loop之后才会这样做被调用（通过startloop）。

也许这个版本的init可行吗？

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

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

2 个答案: