シンプルな JavaScript ゲームを作成しようとしていますが、その外部の関数のデータにアクセスする際に問題が発生しています。
このコードは完全に機能します。
window.onload = function() {
var FPS = 30;
var ground = new myObject();
var twoground = new myObject();
setInterval(function() {
clear();
draw();
ground.draw(0, 325);
twoground.draw(125,325);
alert(ground.xval);
}, 1000/FPS);
};
function myObject(){
this.draw = function drawground(groundx, groundy){
this.xval=groundx+125;
this.yval = groundy;
var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d');
var img=new Image()
img.src="ground.png"
img.onload = function() {
context.drawImage(img,groundx,groundy)}
}
};
上記は、間隔が実行されるたびにブラウザーに 125 のアラートを出しますが、それが私ができる唯一の方法です。たとえば、代わりに次のようにする場合です。
window.onload = function() {
var FPS = 30;
var ground = new myObject();
var twoground = new myObject();
setInterval(function() {
clear();
draw();
ground.draw(0, 325);
twoground.draw(125,325);
myalert();
}, 1000/FPS);
};
function myalert()
{
alert(ground.xval);
}
function myObject(){
this.draw = function drawground(groundx, groundy){
this.xval=groundx+125;
this.yval = groundy;
var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d');
var img=new Image()
img.src="ground.png"
img.onload = function() {
context.drawImage(img,groundx,groundy)}
}
};
同じ間隔でアラートを表示するだけの myalert を呼び出す必要があるため、私が期待するのは同じことですが、そうではありません。JavaScript関数の動作方法に何か欠けているような気がします。