Javascript HTML5画布使用明胶效果绘制矩形

我正在用javascript创建一个platformer游戏，其中的玩家是矩形的，他们可以在平台上跳上跳下。这很简单，但现在我尝试给玩家添加一个“凝胶效应”，这样当他们降落在平台上时，他们会移动一点（像凝胶一样）。我已经搜索了很长一段时间了，但是我似乎找不到任何关于如何改变矩形形状的好例子

我所想到的就是在css中使用@keyframes，并且我已经尝试过实现它，如果我在html元素上使用它，它就会起作用。这是因为使用DOM元素，我可以使用.style访问CSSStyleDeclaration，但是如果我创建了一个新的player对象，我就不能访问它（如下面的代码所示）

我不确定如何将css@keyframes转换为javascript，或者我所做的不可能。。或者是否有其他（更好的）方法来实现我的目标

var-keystate=[]；
var=[]；
var jelly=document.getElementById（'jelly'）；
console.log（jelly.style）；//显示cssstyle声明
document.body.addEventListener（“向下键控”，函数（e）{
keystate[e.keyCode]=真；
});
文件.正文.附录列表（“键控”，功能（e）{
keystate[e.keyCode]=false；
});
功能明胶（e）{
如果（e.style.webkitAnimationName！=“明胶”）{
e、 style.webkitAnimationName='gelatine'；
e、 style.webkitAnimationDuration='0.5s'；
e、 style.display='inline block'；
setTimeout（函数（）{
e、 style.webkitAnimationName=''；
}, 1000);
}
}
var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（'2d'）；
画布宽度=500；
帆布高度=300；
功能播放器（x、y、宽度、高度）{
这个.x=x；
这个。y=y；
这个。宽度=宽度；
高度=高度；
这个跳跃=错误；
这个.velocityY=0；
这个重力=0.3；
这个速度=5；
这个计时器=0；
这个延迟=120；
}
Player.prototype.render=函数render（）{
clearRect（0，0，canvas.width，canvas.height）；
context.fillStyle='blue'；
context.fillRect（this.x，this.y，this.width，this.height）；
context.fillStyle='black'；
context.font='20pt sans serif'；
fillText（“我不是果冻：（”，this.x-160，this.y+30）；
};
Player.prototype.update=函数更新（）{
//向上箭头键与玩家一起跳跃
if（键状态[38]）{
如果（！这个跳跃）{
这是真的；
this.velocityY=-this.speed*2；
}
}
this.velocityY+=this.gravity；
this.y+=this.velocityY；
if（this.y>=canvas.height-this.height）{
this.y=canvas.height-this.height；
这个跳跃=错误；
}
如果（this.timer==0）{
明胶（果冻）；
this.timer=this.delay；
}
如果（this.timer>0&&this.timer果冻。

要在游戏中使用果冻效果，我们可以利用一种基于步骤的开放式效果（即效果长度取决于环境，没有固定的时间）

果冻和大多数液体都具有不可压缩的特性。这意味着无论施加在它们身上的力如何，体积都不会改变。对于2D游戏来说，这意味着果冻的面积不会改变。这意味着我们可以挤压高度，知道面积就可以计算宽度

因此，当一个物体下落并撞击地面时，我们可以在高度方向上对该物体施加挤压力。模拟阻尼弹簧，我们可以产生非常逼真的果冻效果

定义果冻

我有点傻，因为现在是季节，所以变量wobbla和bouncy定义阻尼弹簧，其中
wobbla
表示弹簧的刚度从0到1，0.1表示非常软，1表示非常硬。bouncy表示弹簧的阻尼从0到1，0表示100%阻尼，1表示没有阻尼

我还添加了
react
，这是弹簧受力的简单倍增。由于这是一个游戏，因此需要放大效果。
react
将弹簧受力倍增。小于1的值会减小效果，大于1的值会增加效果

hr
和
hd
（是坏名称）是实际高度（显示）和高度增量（每帧高度的变化）。这两个变量控制弹簧效果

有一个标志指示果冻在地面上，如果为真，则
粘性
标志将使果冻粘在地面上

还有三个功能可以控制果冻

function createJellyBox(image,x, y, wobbla, bouncy, react){
    return {
        img:image,
        x : x,                 // position
        y : y,
        dx : 0,                // movement deltas
        dy : 0, 
        w : image.width,       // width 
        h : image.height,      // height
        area : image.width * image.height,  // area 
        hr : image.height,     // squashed height chaser
        hd : 0,                // squashed height delta
        wobbla : wobbla,       // higher values make it wobble more
        bouncy : bouncy,       // higher values make it react to change in speed
        react : react,         // additional reaction multiplier. < 1 reduces reaction > 1 increases reaction
        onGround : false,      // true if on the ground
        sticky : true,         // true to stick to the ground. false to let it bounce
        squashed : 1,          // the amount of squashing or stretching along the height
        force : 0,             // the force applied to the jelly when it hits the ground
        draw : drawJelly,      // draw function
        update : updateJelly,  // update function
        reset : resetJelly,    // reset function
    }
}

果冻。

要在游戏中使用果冻效果，我们可以利用一种基于步骤的开放式效果（即效果长度取决于环境，没有固定的时间）

果冻和大多数液体都具有不可压缩的特性。这意味着无论施加在它们身上的力如何，体积都不会改变。对于2D游戏来说，这意味着果冻的面积不会改变。这意味着我们可以挤压高度，知道面积就可以计算宽度

因此，当一个物体下落并撞击地面时，我们可以在高度方向上对该物体施加挤压力。模拟阻尼弹簧，我们可以产生非常逼真的果冻效果

定义果冻

我有点傻，因为现在是季节，所以变量wobbla和bouncy定义阻尼弹簧，其中
wobbla
表示弹簧的刚度从0到1，0.1表示非常软，1表示非常硬。bouncy表示弹簧的阻尼从0到1，0表示100%阻尼，1表示没有阻尼

我还添加了
react
，这是弹簧受力的简单倍增。由于这是一个游戏，因此需要放大效果。
react
将弹簧受力倍增。小于1的值会减小效果，大于1的值会增加效果

hr
和
hd