Javascript 如何在具有矩形或圆弧的画布中模拟重力？

如何使用只有几个变量的画布对象模拟重力

我创建了基本画布、游戏、时间、分数、一切，甚至游戏状态，但我仍然停留在“将速度和重力因子添加到玩家Y变量中”的部分

我尝试将重力因子乘以指定值，然后将其添加到yVel，然后将其添加到实际Y值，但我无法正确转换定位

我想如果我知道如何“创造重力”，创造跳跃、向右移动和向左移动不会太困难

下面是我用来查找平台的主要代码：

map.plates表示一个数组，其中每个数组包含一个板（平台板）的4个值 e是地图、图版、阵列。playY基本上是玩家的确切Y高度，全部渲染为fillRect（）

函数检测重力（）{
地图。图版。forEach（e=>{
如果（playY>e[1]&&playX=e[0]+e[2]）{
}否则{
play+=0；//此处的重力计算
}
});
}

我真的不知道我是否应该在这里包括任何其他内容，但如果你想要整个项目，请参阅下面的片段

如果这个问题有什么问题，请告诉我，我已经快半年没来这里了。

代码笔死亡时的完整代码（注释中建议）：

“esversion:6”；
const can=document.querySelector（“.block”），
ctx=can.getContext（“2d”），
mScore=100，
地图={
车牌：[
[25, 25, 25, 2],
[75, 25, 25, 2],
[125, 25, 25, 2],
[175, 25, 25, 2],
[225, 25, 25, 2],
[25, 75, 25, 2],
[75, 62, 25, 2],
[125, 50, 25, 2],
[175, 38, 25, 2],
[25, 87, 25, 2],
[75, 100, 25, 2]
],
金钱：[
[25, 25],
[125, 25],
[225, 25],
[75, 62],
[75, 100]
],
玩家：[25,25,2,2]，
badSpt:[]
};
让分数=0，
时间=60，
gameOn=0；
让我们一起玩吧，
顽皮的，
velX，
弗利，
grav=1.05；
can.addEventListener（“单击”，开始名称）；
函数startName（）{
如果（gameOn！=1）{
配子体=1；
init（）；
游戏时间=设置间隔（（）=>{
如果（时间！=0）{
时间-=1；
}
}, 1000);
}
}
函数init（）{
罐宽=300；
罐高=300；
抽屉式熨斗（）；
drawLevel（）；
drawPlayer（）；
drawGame（）；
drawPixels（）；
如果（时间==0）{
clearInterval（游戏时间）；
时间=60；
配子体=2；
}
window.requestAnimationFrame（init）；
}
函数{
带（ctx）{
fillStyle=“#000000”；
fillRect（0，0，罐宽，罐高）；
fillStyle=“rgba（255，255，255，0.5）”；
fillRect（0，0，罐宽，罐高）；
fillStyle=“#000000”；
fillRect（0,0，罐宽，罐高/15）；
fillStyle=“#ffffff”；
font=can.height/15+“px Verdana”；
填充文本（“分数：+Score+”/“+mScore，1，can.height/19）；
fillText（“时间：+时间，can.width/1.5+6，can.height/19）；
}
}
函数drawLevel（）{
地图。图版。forEach（e=>{
ctx.fillStyle=“#ffffff”；
ctx.fillRect（e[0]，can.height/15+e[1]，e[2]，e[3]）；
});
map.moneys.forEach（e=>{
ctx.beginPath（）；
ctx.fillStyle=“#fcba03”；
ctx.arc（e[0]+12.5，e[1]+12.5,4,0,2*数学π）；
ctx.fill（）；
});
}
函数检测重力（）{
地图。图版。forEach（e=>{
如果（playY>e[1]&&playX=e[0]+e[2]）{
}否则{
顽皮+=0；
}
});
}
函数drawPlayer（）{
const a=map.player；
如果（gameOn==0 | | gameOn==2）{
playX=a[0]；
Play=a[1]；
velX=0；
f=0；
}
ctx.beginPath（）；
ctx.fillStyle=“#ff0000”；
ctx.arc（playX+12.5，playY+12.5,4,0,2*Math.PI）；
ctx.fill（）；
}
函数drawGame（）{
如果（gameOn==0）{
can.style.animation=“无”；
带（ctx）{
fillStyle=“rgba（0,0,0,0.5）”；
fillRect（0，0，罐宽，罐高）；
strokeStyle=“#000000”；
线宽=5；
fillStyle=“#ffffff”；
textAlign=“中心”；
strokeText（“单击开始”，150，can.height/4）；
fillText（“单击开始”，150，can.height/4）；
}
}else if（gameOn==2）{
can.style.animation=“0.2s flash infinite”；
带（ctx）{
fillStyle=“rgba（0,0,0,0.5）”；
fillRect（0，0，罐宽，罐高）；
strokeStyle=“#000000”；
线宽=5；
fillStyle=“#ff0000”；
textAlign=“中心”；
strokeText（“--游戏结束--”，150，can.height/4）；
fillText（“--游戏结束--”，150，can.height/4）；
}
}否则{
can.style.animation=“无”；
}
}
函数drawPixels（）{
var fw=（罐宽/2）| 0，
fh=（罐高/2）| 0；
ctx.IMAGESMOOTHINGABLED=ctx.MOZIMAGESMOOTHINGABLED=ctx.MSIMAGESMOOTHINGABLED=ctx.WebKITMIMAGESMOOTHINGABLED=false；
ctx.drawImage（can、0、0、fw、fh）；
ctx.drawImage（can，0，0，fw，fh，0，0，can.width，can.height）；
}
init（）
*{
框大小：边框框；
溢出：隐藏；
}
.街区{
边框：2件纯黑；
}
@关键帧闪烁{
0%, 100% {
边框：2件纯黑；
}
50% {
边框：2倍纯红；
}
}
基于重力的简单步骤。
重力
重力表现为速度随时间的变化（加速度）。它有方向和大小（向量）

我们定义沿着画布的重力向量

const gravity = {x: 0, y: 1};

通常我们以秒为单位施加重力。这不是一个方便的动画单元。在这种情况下，我们可以将其定义为每帧像素数。帧是1/60秒。因此，上面定义的重力的大小为每平方刻度1个像素。因此，在一秒钟内，物体将以每滴答60像素或每秒3600像素的速度移动

这对于大多数动画来说有点太快了，所以我们可以稍微放慢速度

const gravity = {x: 0, y: 0.1};

对象
一个物体有一个位置（坐标）和一个速度（矢量），两个方向和大小相同

const object = {
    pos: {x: 0, y: 0}, // position
    vel: {x, 0, y: 0}, // velocity
}

为了模拟这个物体上的重力，我们可以添加一个函数形式的行为。在这种情况下，我们可以称之为
update
。在
更新
功能中，我们通过将
重力
矢量添加到速度矢量（const gravity = {x: 0, y: 0.1};
const object = {
    pos: {x: 0, y: 0}, // position
    vel: {x, 0, y: 0}, // velocity
    update() {
        this.vel.x += gravity.x;
        this.vel.y += gravity.y;
        this.pos.x += this.vel.x;
        this.pos.y += this.vel.y;
    }
}

const ground = ctx.canvas.height;  // ground at bottom of canvas.

const gravity = {x: 0, y: 0.1};
const ground = ctx.canvas.height;  // ground at bottom of canvas.
const bounce = 0.5;
const object = {
    pos: {x: 0, y: 0}, // position
    vel: {x, 0, y: 0}, // velocity
    size: {w: 10, h: 10},
    update() {
        this.vel.x += gravity.x;
        this.vel.y += gravity.y;
        this.pos.x += this.vel.x;
        this.pos.y += this.vel.y;
        const g = ground - this.size.h; // adjust for size
        if(this.pos.y >= g) {  
            this.pos.y = g - (this.pos.y - g); // 
            this.vel.y = -Math.abs(this.vel.y) * bounce;  // change velocity to moving away.
        }
    }
}