Javascript window.requestAnimationFrame使用对象和此关键字_Javascript_Animation_This_Game Engine_Requestanimationframe

Javascript window.requestAnimationFrame使用对象和此关键字

javascript animation

Javascript window.requestAnimationFrame使用对象和此关键字,javascript,animation,this,game-engine,requestanimationframe,Javascript,Animation,This,Game Engine,Requestanimationframe,我正在学习使用javascript的物理引擎的基础知识，并希望将所有引擎和游戏数据保存在一个对象中，但在递归调用draw函数以设置场景动画时无法使用“this”关键字。我可以成功地调用独立的绘图函数，但实现多个对象的动画制作并不容易这里有一个简单的测试平台这是这一页 <!doctype html> <html> <head> <style type="text/css"> #obj{ width: 50px;

我正在学习使用javascript的物理引擎的基础知识，并希望将所有引擎和游戏数据保存在一个对象中，但在递归调用draw函数以设置场景动画时无法使用“this”关键字。我可以成功地调用独立的绘图函数，但实现多个对象的动画制作并不容易

这里有一个简单的测试平台

这是这一页

<!doctype html>
<html>

<head>

<style type="text/css">

    #obj{
        width: 50px;
        height: 200px;
        background: red;
        position: absolute;
        left: 100px;
        bottom: 200px;
    }

    #ground{
        width: 100%;
        height: 200px;
        background: #222;
        position: absolute;
        bottom: 0;
        left: 0;
    }

</style>


</head> 

<body>

<div id="content">

<section>
    <button onclick="draw()">draw()</button><br>
    <button onclick="obj.draw()">obj.draw()</button>
</section>

<article>

    <div id="obj"></div>
    <div id="ground"></div>

</article>  

</div> <!-- END CONTENT -->

</body>

<script type="text/javascript">

var obj = {
    // variables
    id: 'obj',
    width: 50,
    height: 200,
    angle: 30,
    speed: 20,
    acceleration: 4/60,
    deceleration: 2/60,
    moving: false,
    jumping: false,
    // Get methods
    x: function(){return parseInt(window.getComputedStyle(document.getElementById(this.id)).left)},
    y: function(){return parseInt(window.getComputedStyle(document.getElementById(this.id)).bottom)},
    // engine methods
    scale_x: function(){return Math.cos((this.angle * Math.PI) / 180)},
    scale_y: function(){return Math.sin((this.angle * Math.PI) / 180)},
    velocity_x: function(){return this.speed * this.scale_x()},
    velocity_y: function(){return this.speed * this.scale_y()},
    cx: function(){return this.x() + this.width},
    cy: function(){return this.y() + this.height},
    // set methods
    setAngle: function(val){this.angle = val},
    setAcceleration: function(val){this.acceleration = val / 60},
    setDeceleration: function(val){this.deceleration = val / 60},
    setSpeed: function(val){this.speed = val},
    setMoving: function(val){this.moving = val},
    setJumping: function(val){this.jumping = val},
    draw: function(){
        document.getElementById(this.id).style.left = (this.speed++) + 'px';
        window.requestAnimationFrame(this.draw);
    }
}

function draw(){
    document.getElementById(obj.id).style.left = (obj.speed++) + 'px';
        window.requestAnimationFrame(draw);
}

</script>   

</html>


#obj{
宽度：50px；
高度：200px；
背景：红色；
位置：绝对位置；
左：100px；
底部：200px；
}
#地面{
宽度：100%；
高度：200px；
背景：#222；
位置：绝对位置；
底部：0；
左：0；
}
draw（）

对象绘制（）
var obj={
//变数
id:'obj'，
宽度：50，
身高：200，
角度：30，
速度:20,，
加速度：4/60，
减速度：2/60，
感动：错，
跳跃：错，
//获取方法
函数（）{return parseInt（window.getComputedStyle（document.getElementById（this.id））.left）}，
y:function（）{return parseInt（window.getComputedStyle（document.getElementById（this.id））.bottom）}，
//引擎方法
scale_x:function（）{return Math.cos（（this.angle*Math.PI）/180）}，
scale_y:function（）{return Math.sin（（this.angle*Math.PI）/180）}，
velocity_x:function（）{返回this.speed*this.scale_x（）}，
velocity_y:function（）{返回this.speed*this.scale_y（）}，
cx:function（）{返回this.x（）+this.width}，
cy:function（）{返回this.y（）+this.height}，
//设置方法
setAngle:function（val）{this.angle=val}，
setAcceleration:function（val）{this.acceleration=val/60}，
setDetromination:function（val）{this.detromination=val/60}，
setSpeed:function（val）{this.speed=val}，
setMoving:function（val）{this.moving=val}，
setJumping:function（val）{this.jumping=val}，
绘图：函数（）{
document.getElementById（this.id）.style.left=（this.speed++）+'px'；
window.requestAnimationFrame（this.draw）；
}
}
函数绘图（）{
document.getElementById（obj.id）.style.left=（obj.speed++）+'px'；
window.requestAnimationFrame（绘制）；
}

谢谢你的帮助

Andrew

注意，您将对象draw称为：

<button onclick="obj.draw()

下面是一个关于这个问题的示例。

非常感谢您的解释，我确实看到了一些关于这个问题的其他线程，但这是最好的示例

var obj = {    
    //...

    draw: function () {
        var sender = this;
        var draw = function () {
            document.getElementById(sender.id).style.left = (sender.speed++) + 'px';
            window.requestAnimationFrame(draw);
        }
        draw();
    }
}