Javascript 我怎么给这个宇宙飞船加速度？

有一个非常小的类似小行星的游戏片段，我只使用DOM而不使用画布。当按下箭头键时，“飞船”移动得非常平稳，但当按住箭头键较长时间时，我如何让飞船加速（在速度和旋转方面）

window.onkeyup=函数（e）{
var kc=e.keyCode；
e、 预防默认值（）；
如果（kc==37）Keys.left=false；
如果（kc==38）Keys.up=false，则为else；
如果（kc==39）Keys.right=false，则为else；
如果（kc==40）Keys.down=false，则为else；
};
函数更新（）{
if（key.up）{
document.querySelector（'div'）.style.transform+='translateY（-1px'）；
}
else if（Keys.down）{
document.querySelector（'div'）.style.transform+=“translateY（1px）”；
}
如果（键左）{
document.querySelector（'div'）.style.transform+=“rotate（-1deg）”；
}
如果（key.right）{
document.querySelector（'div'）.style.transform+=“rotate（1deg）”；
}
requestAnimationFrame（更新）；
}
requestAnimationFrame（更新）
@导入url（“https://fonts.googleapis.com/css?family=Nunito" );
html，正文{
身高：100%；
保证金：0；
填充：0；
字体系列：“Nunito”，无衬线；
字号：2rem；
}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
b{
显示：块；
变换：旋转（180度）；
}

v
变量键={
上：错，
唐：错，
左：错，
右：错
}
window.onkeydown=函数（e）{
var kc=e.keyCode；
e、 预防默认值（）；
如果（kc==37）Keys.left=true；
如果（kc==38）Keys.up=true，则为else；
如果（kc==39）Keys.right=true，则为else；
如果（kc==40）Keys.down=true，则为else；
};
如何实现加速的基本概念：
创建速度变量，并根据需要将它们相乘

仅“向上”键加速示例


var速度=1.0；
window.onkeyup=函数（e）{
var kc=e.keyCode；
e、 预防默认值（）；
如果（kc==37）Keys.left=false；
如果（kc==38）Keys.up=false，则为else；
如果（kc==39）Keys.right=false，则为else；
如果（kc==40）Keys.down=false，则为else；
};
函数更新（）{
if（key.up）{
速度=速度*1.01；
document.querySelector（'div'）.style.transform++='translateY（-'+Math.round（speed）+'px'）；
}
else if（Keys.down）{
如果（速度>1）
{速度=速度*0.9；
document.querySelector（'div'）.style.transform++='translateY（-'+Math.round（speed）+'px'）；
}
否则{
速度=1；
document.querySelector（'div'）.style.transform+=“translateY（1px）”；
}
}
如果（键左）{
document.querySelector（'div'）.style.transform+=“rotate（-1deg）”；
}
如果（key.right）{
document.querySelector（'div'）.style.transform+=“rotate（1deg）”；
}
requestAnimationFrame（更新）；
}
requestAnimationFrame（更新）
@导入url（“https://fonts.googleapis.com/css?family=Nunito" );
html，正文{
身高：100%；
保证金：0；
填充：0；
字体系列：“Nunito”，无衬线；
字号：2rem；
}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
b{
显示：块；
变换：旋转（180度）；
}

v
变量键={
上：错，
唐：错，
左：错，
右：错
}
window.onkeydown=函数（e）{
var kc=e.keyCode；
e、 预防默认值（）；
如果（kc==37）Keys.left=true；
如果（kc==38）Keys.up=true，则为else；
如果（kc==39）Keys.right=true，则为else；
如果（kc==40）Keys.down=true，则为else；
};
已更新。由于另一个类似的问题的答案基于上一版本的答案，我将答案改为更好的答案

变换、加速、阻力和火箭飞船。
有很多方法可以将移动应用到小行星类型的游戏中。这个答案展示了最基本的方法，然后给出了一个例子，展示了基本方法的变化，以产生不同的感觉。这个答案还简要介绍了如何使用矩阵（2D）设置CSS转换

基础
最基本的情况是，您有一个数字，表示位置或旋转的某个组件。要移动，请添加一个常数
x+=1移入
x
一次一个单元，当您放开未添加的控件并停止时

但事情不是那样发展的，而是加速的。因此，创建第二个值来保持速度（以前是
x+=1
）并将其称为
dx
（delta x）。当您得到输入时，您会将速度稍微提高一些
dx+=0.01
，以便随着时间的推移，速度逐渐提高

但问题是，你控制的时间越长，你走的越快，当你放开控制时，飞船就会继续前进（这对太空来说是正常的，但在游戏中是痛苦的），因此你需要限制速度，并将其逐渐降到零。可以通过对每帧的delta X值应用比例来实现这一点<代码>dx*=0.99

这样就有了基本的加速度、阻力和速度限制值

x += dx;
dx *= 0.99;
if(input){ dx += 0.01);

对x、y和角度都这样做。如果输入是方向性的，则需要使用x，y的向量，如下所示

x += dx;
y += dy;
angle += dAngle;
dx *= 0.99;
dy *= 0.99;
dAngle *= 0.99;
if(turnLeft){
     dAngle += 0.01;
}
if(turnRight){
     dAngle -= 0.01;
}
if(inputMove){ 
    dx += Math.cos(angle) * 0.01;
    dy += Math.sin(angle) * 0.01;
}

这是最基本的太空游戏动作

设置CSS转换。
设置CSS转换最容易通过矩阵命令应用。例如设置默认转换
element.style.transform=“矩阵（1,0,0,1,0,0）”

这六个值通常被命名为a、b、c、d、e‘矩阵（a、b、c、d、e、f）’或m11、m12、m21、m22、m31、m32或
水平缩放、水平倾斜、垂直倾斜、垂直缩放、水平移动、垂直移动，表示三维矩阵的缩短版本

我发现关于这个矩阵如何工作以及为什么不经常使用它的大部分困惑部分是由于变量的命名。我更喜欢描述为x轴x，x轴y，y轴
x += dx;
y += dy;
angle += dAngle;
dx *= 0.99;
dy *= 0.99;
dAngle *= 0.99;
if(turnLeft){
     dAngle += 0.01;
}
if(turnRight){
     dAngle -= 0.01;
}
if(inputMove){ 
    dx += Math.cos(angle) * 0.01;
    dy += Math.sin(angle) * 0.01;
}

var scale = { x : 1, y : 1 };
var pos = {x : 16, y : 16 };
var angle = Math.PI / 4; // 45 deg
var a,b,c,d,e,f; // the matrix arguments
// the x axis and x scale
a = Math.cos(angle) * scale.x;
b = Math.sin(angle) * scale.x;
// the y axis which is at 90 degree clockwise of the x axis
// and the y scale
c = -Math.sin(angle) * scale.y;
d = Math.cos(angle) * scale.y;
// and the origin
e = pos.x;
f = pos.y;

element.style.transform = "matrix("+[a,b,c,d,e,f].join(",")+")";

const preDefinedMatrix = [1,0,0,1,0,0]; // define at start

// element is the element to set the CSS transform on.
// x,y the position of the elements local origin
// scale the scale of the element
// angle the angle in radians
function setElementTransform (element, x, y, scale, angle) {
    var m = preDefinedMatrix;
    m[3] = m[0] = Math.cos(angle) * scale;
    m[2] = -(m[1] = Math.sin(angle) * scale);
    m[4] = x;
    m[5] = y;
    element.style.transform = "matrix("+m.join(",")+")";
}