画布游戏架构：访问JavaScript对象中的父函数

我试图理解如何用javascript创建自定义游戏对象。我正在画布上工作，我认为我可以创建一个通用的游戏对象，其中包括有关对象位置、形状等的信息，以及“移动”、“开火”、“显示”等功能

我创建了一个名为“create（canvas）”的函数。它获取画布并初始化局部变量，然后在“onload”函数中调用display函数。 但我无法访问对象的显示功能。 此外，我总是使用“this”语法来访问局部变量或函数。这让我觉得有什么地方出了问题

您可以看到下面的代码

<script>


    var gameObject = {

        x: 0,
        y: 0,
        velocity: 5,
        width: 40,
        height: 40,
        triggerObject:null,
        imgUrl: "/assets/minionframe/1.png",
        img:null,
        canvas:null,
        context:null,
        display:function(){
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

            this.context.drawImage(this.img,this.x,this.y,this.width,this.height);
        },
        move: function (direction) {
            if (direction == "right")
                x += this.velocity;
            else if (direction == "left")
                x -= this.velocity;
            else if (direction == "up")
                y -= this.velocity;
            else if (direction == "down")
                y += this.velocity;
            this.display();
        },
        fire: function () {

        },
        create: function (canvas) {
            this.canvas = canvas;
            this.context = canvas.getContext('2d');
            img = new Image();
            img.src = this.imgUrl;
            img.onload = function () {
                this.display()//i cant doing this :(
            }
            return this;
        }
    }

</script>
<canvas id="scene" width="800" height="600"></canvas>
<script>

    var scene = document.getElementById('scene');
    var obj = gameObject.create(scene);


</script>

var gameObject={
x:0,，
y:0，
速度：5，
宽度：40，
身高：40，
triggerObject:null，
imgUrl:“/assets/minionframe/1.png”，
img:null，
画布：空，
上下文：null，
显示：函数（）{
this.context.clearRect（0，0，this.canvas.width，this.canvas.height）；
this.context.drawImage（this.img，this.x，this.y，this.width，this.height）；
},
移动：功能（方向）{
如果（方向=“右”）
x+=这个速度；
否则如果（方向=“左”）
x-=该速度；
否则如果（方向=“向上”）
y-=该速度；
否则如果（方向=“向下”）
y+=这个速度；
这个.display（）；
},
火灾：功能（）{
},
创建：函数（画布）{
this.canvas=画布；
this.context=canvas.getContext（'2d'）；
img=新图像（）；
img.src=this.imgUrl；
img.onload=函数（）{
this.display（）//我不能这样做：(
}
归还这个；
}
}
var scene=document.getElementById（'scene'）；
var obj=gameObject.create（场景）；

---

非常感谢。

您好，不要使用

此

直接将其存储在局部变量

\u thisRef

中

查看更新的代码

<script>


    var gameObject = function (){

        x: 0,
        y: 0,
        velocity: 5,
        width: 40,
        height: 40,
        triggerObject:null,
        imgUrl: "/assets/minionframe/1.png",
        img:null,
        canvas:null,
        context:null,
        _thisRef:this,  //storing this refrence.
        display:function(){
            _thisRef.context.clearRect(0, 0, _thisRef.canvas.width, _thisRef.canvas.height);

            _thisRef.context.drawImage(_thisRef.img,_thisRef.x,_thisRef.y,_thisRef.width,_thisRef.height);
        },
        move: function (direction) {
            if (direction == "right")
                x += _thisRef.velocity;
            else if (direction == "left")
                x -= _thisRef.velocity;
            else if (direction == "up")
                y -= _thisRef.velocity;
            else if (direction == "down")
                y += _thisRef.velocity;
            _thisRef.display();
        },
        fire: function () {

        },
        create: function (canvas) {
            _thisRef.canvas = canvas;
            _thisRef.context = canvas.getContext('2d');
            img = new Image();
            img.src = _thisRef.imgUrl;
            img.onload = function () {

            }
            //return _thisRef;   //no need
        }
    }

</script>
<canvas id="scene" width="800" height="600"></canvas>
<script>

    var scene = document.getElementById('scene');

    var obj = gameObject.create(scene);

   var obj = new gameObject(); //creating object of gameObject class.
   obj.create(scene); //passing Canvas element.
   obj.display();  // this will call display function.

</script>

var gameObject=函数（）{
x:0,，
y:0，
速度：5，
宽度：40，
身高：40，
triggerObject:null，
imgUrl:“/assets/minionframe/1.png”，
img:null，
画布：空，
上下文：null，
_thisRef:this，//存储此引用。
显示：函数（）{
_thisRef.context.clearRect（0,0，_thisRef.canvas.width，_thisRef.canvas.height）；
_thisRef.context.drawImage（\u thisRef.img、\u thisRef.x、\u thisRef.y、\u thisRef.width、\u thisRef.height）；
},
移动：功能（方向）{
如果（方向=“右”）
x+=\u此参考速度；
否则如果（方向=“左”）
x-=\u此参考速度；
否则如果（方向=“向上”）
y-=\u此参考速度；
否则如果（方向=“向下”）
y+=\u此参考速度；
_thisRef.display（）；
},
火灾：功能（）{
},
创建：函数（画布）{
_thisRef.canvas=画布；
_thisRef.context=canvas.getContext（'2d'）；
img=新图像（）；
img.src=\u thisRef.imgUrl；
img.onload=函数（）{
}
//return _thisRef；//不需要
}
}
var scene=document.getElementById（'scene'）；
var obj=gameObject.create（场景）；
var obj=new gameObject（）；//正在创建gameObject类的对象。
创建（场景）；//传递画布元素。
obj.display（）；//这将调用display函数。

我建议不要使用

这个

，而是将逻辑和状态/数据分开

从概念上讲，您的游戏可以按如下方式构建：

• 状态：描述世界当前状态的对象，即具有位置、速度、颜色等的对象
• 更新函数：在游戏的每个步骤中都会调用此函数。它获取当前世界状态和用户输入，并返回新状态
• 渲染功能：它获取世界状态，并将其绘制到屏幕上

您的游戏逻辑可以总结如下：

// initialize state
const state = { /*...*/ }

// set up game loop
window.requestAnimationFrame(function() {
  userInput = getUserInput();
  state = update(state, userInput);
  render(state);
});

为什么？游戏的不同部分，如核心逻辑、渲染和读取用户输入，应该尽可能少地相互了解——这样你就可以独立开发它们

此外，将游戏状态与其逻辑分离也有很大帮助，这不仅有助于建立游戏的清晰“心智模型”。想象一下，你想实现一个保存/加载功能——你所要做的就是序列化/反序列化你的游戏状态

我尝试将此概念应用于您的代码：

var状态={
x:0,，
y:0，
速度：5，
宽度：40，
身高：40，
triggerObject:null，
imgUrl:“/assets/minionframe/1.png”
img:null
}
功能显示（上下文、状态）{
clearRect（0，0，this.canvas.width，this.canvas.height）；
context.drawImage（state.img、state.x、state.y、state.width、state.height）；
}
功能移动（方向、状态）{
如果（方向=“右”）
state.x+=state.velocity；
否则如果（方向=“左”）
state.x-=state.velocity；
否则如果（方向=“向上”）
state.y-=state.velocity；
否则如果（方向=“向下”）
state.y+=state.velocity；
返回状态；
}
函数loadImage（状态）{
var img=新图像（）；
img.src=state.imgUrl；
state.img=img
}
var context=document.getElementById（'scene'）.getContext（'2d'）；
加载映像（状态）；
//某种游戏循环
window.requestAnimationFrame（函数（）{
var direction=“right”；//从用户输入读取TODO
状态=移动（方向、状态）；
显示（上下文、状态）
})

使用“\u thisRef.im”有什么区别