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

这是我第一次完成从零开始的迷你游戏。我需要帮助查找我的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); 
};

感谢您的回复！

来源

2012-08-13 Slulego

你的“init”函数调用“startLoop”，它调用“loop”，它预计“Pair1”和“Pair2”已经被初始化。但是，“init”不会初始化它们，直到调用“startLoop”之后的。

尝试改变“初始化”：

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

来源

2012-08-13 13:56:56 Pointy

打我一秒：P – jbabey 2012-08-13 13:57:46

谢谢!!!它现在不显示错误...但图像不显示:( – Slulego 2012-08-13 14:11:12

“编辑”它现在工作。我切换'var X = ....'到'this.X = ...' – Slulego 2012-08-13 14:17:38

我认为问题是，你的功能loop需要Pair1和Pair2存在，但init没有做到这一点，直到后loop被称为（通过startloop）。

也许这个版本的init会工作吗？

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

来源

2012-08-13 13:57:58

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

回答

相关问题