我如何给这艘宇宙飞船加速？

Question

有一个非常小的类似小行星的游戏片段，我正在研究只使用 DOM 而没有 Canvas。当按下箭头键时，"ship" 移动得非常顺畅，但是当按住箭头键较长时间时，我将如何使飞船加速（在速度和旋转方面）？

window.onkeyup = function( e ) {
  var kc = e.keyCode;
  e.preventDefault();

  if ( kc === 37 ) Keys.left = false;
  else if ( kc === 38 ) Keys.up = false;
  else if ( kc === 39 ) Keys.right = false;
  else if ( kc === 40 ) Keys.down = false;
};

function update() {
  if ( Keys.up ) {
    document.querySelector( 'div' ).style.transform += 'translateY( -1px )';
  }
  else if ( Keys.down ) {
    document.querySelector( 'div' ).style.transform += 'translateY( 1px )';
  }

  if ( Keys.left ) {
    document.querySelector( 'div' ).style.transform += 'rotate( -1deg )';
  }
  else if ( Keys.right ) { 
    document.querySelector( 'div' ).style.transform += 'rotate( 1deg )';
  }
  
  requestAnimationFrame( update );
}
requestAnimationFrame( update );

@import url( "https://fonts.googleapis.com/css?family=Nunito" );

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Nunito", sans-serif;
  font-size: 2rem;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

b {
  display: block;
  transform: rotate( 180deg );
}

<div>
  <b>v</b>
</div>

<script>
  var Keys = {
    up: false,
    down: false,
    left: false,
    right: false
  }

  window.onkeydown = function( e ) {
    var kc = e.keyCode;
    e.preventDefault();

    if ( kc === 37 ) Keys.left = true;
    else if ( kc === 38 ) Keys.up = true;
    else if ( kc === 39 ) Keys.right = true;
    else if ( kc === 40 ) Keys.down = true;
  };
</script>

使用箭头键控制片段。

Answer 1

如何实现加速的非常基本的想法：创建速度变量并根据需要将它们相乘。

仅"UP"键的加速示例

var speed = 1.0;
window.onkeyup = function( e ) {
  var kc = e.keyCode;
  e.preventDefault();

  if ( kc === 37 ) Keys.left = false;
  else if ( kc === 38 ) Keys.up = false;
  else if ( kc === 39 ) Keys.right = false;
  else if ( kc === 40 ) Keys.down = false;
};

function update() {
  if ( Keys.up ) {
    speed = speed *1.01;
    document.querySelector( 'div' ).style.transform += 'translateY( -'+Math.round(speed )+'px )';
  }
  else if ( Keys.down ) {
   if (speed>1)
   {   speed = speed *0.9;
       document.querySelector( 'div' ).style.transform += 'translateY( -'+Math.round(speed )+'px )';
   }
else {
    speed = 1;
    document.querySelector( 'div' ).style.transform += 'translateY( 1px )';
}
  }

  if ( Keys.left ) {
    document.querySelector( 'div' ).style.transform += 'rotate( -1deg )';
  }
  else if ( Keys.right ) { 
    document.querySelector( 'div' ).style.transform += 'rotate( 1deg )';
  }
  
    requestAnimationFrame( update );
}
requestAnimationFrame( update );

@import url( "https://fonts.googleapis.com/css?family=Nunito" );

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Nunito", sans-serif;
  font-size: 2rem;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

b {
  display: block;
  transform: rotate( 180deg );
}

<div>
  <b>v</b>
</div>

<script>
  var Keys = {
    up: false,
    down: false,
    left: false,
    right: false
  }

  window.onkeydown = function( e ) {
    var kc = e.keyCode;
    e.preventDefault();

    if ( kc === 37 ) Keys.left = true;
    else if ( kc === 38 ) Keys.up = true;
    else if ( kc === 39 ) Keys.right = true;
    else if ( kc === 40 ) Keys.down = true;
  };
</script>

Answer 2

 window.onkeydown = function( e ) {
    var kc = e.keyCode;
    e.preventDefault();

    if ( kc === 37 ) Keys.left++;
    else if ( kc === 38 ) Keys.up++;
    else if ( kc === 39 ) Keys.right++;
    else if ( kc === 40 ) Keys.down++;
  };
window.onkeyup = function(e)
{
  var kc = e.keyCode;
    e.preventDefault();

    if ( kc === 37 ) {Keys.left = 0;}
    else if ( kc === 38 ) Keys.up = 0;
    else if ( kc === 39 ) Keys.right = 0;
    else if ( kc === 40 ) Keys.down = 0;
}
function update() {
  if ( Keys.up ) {
    document.querySelector( 'div' ).style.transform += 'translateY( -'+Keys.up+'px )';
  }
  else if ( Keys.down ) {
    document.querySelector( 'div' ).style.transform += 'translateY( '+Keys.down+'px )';
  }

  if ( Keys.left ) {
    document.querySelector( 'div' ).style.transform += 'rotate( -'+Keys.left+'deg )';
  }
  else if ( Keys.right ) { 
    document.querySelector( 'div' ).style.transform += 'rotate( '+Keys.right+'deg )';
  }

    requestAnimationFrame( update );
}
requestAnimationFrame( update );

Answer 3

已更新。由于另一个类似问题的答案基于此先前版本的答案，因此我已将答案更改为更好的答案。

变形、加速、阻力和火箭飞船。

有很多方法可以将运动应用到小行星类型的游戏中。这个答案展示了最基本的方法，然后给出了一个例子来展示产生不同感觉的基本方法的变化。该答案还简要概述了如何使用矩阵 (2D)

设置 CSS 转换

基础知识

在最基本的情况下，您有一个数字代表位置或旋转的某些组成部分。要移动你添加一个常量 x += 1; 一次移动 x 一个单位，当你放开你不添加的控件并停止时。

但事情不会那样移动，它们会加速。因此，您创建了第二个值来保存速度（以前来自 x += 1 的值）并将其命名为 dx（delta X）。当您获得输入时，您会稍微提高速度 dx += 0.01，以便及时逐渐提高速度。

但问题是你按住控件的时间越长，你走得越快，当你松开控件时，船会继续前进（这对 space 来说很正常，但在游戏中很痛苦）所以你需要限制速度并逐渐降低到零。您可以通过对每帧的 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;
}

这是最基本的space游戏动作。

正在设置 CSS 转换。

设置 CSS 转换最容易通过矩阵命令应用。例如设置默认转换 element.style.transform = "matrix(1,0,0,1,0,0)";

常命名为a,b,c,d,e 'matrix(a,b,c,d,e,f)' 或m11, m12, m21, m22, m31, m32 或 水平缩放、水平倾斜、垂直倾斜、垂直缩放、水平移动、垂直移动并表示 3 x 3 二维矩阵的缩短版本。

我发现关于这个矩阵如何工作以及为什么不经常使用它的大部分混淆部分是由于变量的命名。我更喜欢描述为 x axis x, x axis y, y axis x, y axis y, origin x, origin y 并简单描述 x 和 y 轴的方向和比例以及原点的位置都在 CSS 像素坐标.

下图说明了矩阵。红色框是已旋转 45 度（Math.PI / 4 弧度）的元素，其原点移动到 CSS 像素坐标 16,16。

_{图像网格显示 CSS 像素。右侧网格显示矩阵的缩放视图，显示 X 轴向量 (a,b) = (cos(45), sin(45))，Y 轴向量 (c,d) = (cos(45 + 90)， sin(45 + 90)) 和原点 (e,f) = (16, 16)}

因此我有一个元素在角度、位置 (x,y)、比例 (x,y) 方面的值。然后我们创建矩阵如下

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(",")+")";

由于大多数时候我们不会倾斜变换并使用统一比例，因此我们可以缩短代码。我更喜欢使用预定义的数组来帮助保持较低的 GC 命中率。

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(",")+")";
}

我在演示中使用了一个稍微不同的函数。 ship.updatePos 并使用 ship.pos 和 ship.displayAngle 设置相对于包含元素原点 (top,left)

的转换

_{注意 3D 矩阵虽然有点复杂（包括投影）但与 2D 矩阵非常相似，它描述了 x,y,和 z 轴作为 3 个向量，每个向量具有 3 个标量 (x,y,z)，y 轴与 x 轴成 90 度，z 轴与 x 轴和 y 轴成 90 度，可以通过叉积找到x 点 y 轴的。每个轴的长度为刻度，原点为点坐标(x,y,z)。}

演示：

该演示显示 4 5 个变体。使用键盘 1,2,3,4,5 到 select 一艘船（它会变成红色），然后使用方向键飞行。基本向上箭头你走，向左向右转。

每艘船的数学在对象中 ship.controls

requestAnimationFrame(mainLoop);
const keys = {
    ArrowUp : false,
    ArrowLeft : false,
    ArrowRight : false,
    Digit1 : false,
    Digit2 : false,
    Digit3 : false,
    Digit4 : false,
    Digit5 : false,
    event(e){ 
        if(keys[e.code] !== undefined){ 
            keys[e.code] = event.type === "keydown" ;
            e.preventDefault();
        } 
    },
}
addEventListener("keyup",keys.event);
addEventListener("keydown",keys.event);
focus();
const ships = {
    items : [],
    controling : 0,
    add(ship){ this.items.push(ship) },
    update(){
        var i;
        
        for(i = 0; i < this.items.length; i++){
            if(keys["Digit" + (i+1)]){
                if(this.controling !== -1){
                    this.items[this.controling].element.style.color = "green";
                    this.items[this.controling].hasControl = false;
                }
                this.controling = i;
                this.items[i].element.style.color = "red";
                this.items[i].hasControl = true;
            }
            this.items[i].updateUserIO();
            this.items[i].updatePos();
        }
    }
    
}
const ship = {
    element : null,
    hasControl : false,
    speed : 0,
    speedC : 0,  // chase value for speed limit mode
    speedR : 0,  // real value (real as in actual speed)
    angle : 0,
    angleC : 0,  // as above
    angleR : 0,
    engSpeed : 0,
    engSpeedC : 0,
    engSpeedR : 0,
    displayAngle : 0, // the display angle
    deltaAngle : 0,
    matrix : null,  // matrix to create when instantiated 
    pos : null,     // position of ship to create when instantiated 
    delta : null,   // movement of ship to create when instantiated 
    checkInView(){
        var bounds = this.element.getBoundingClientRect();
        if(Math.max(bounds.right,bounds.left) < 0 && this.delta.x < 0){
            this.pos.x = innerWidth;
        }else if(Math.min(bounds.right,bounds.left) > innerWidth  && this.delta.x > 0){
            this.pos.x = 0;
        }
        if(Math.max(bounds.top,bounds.bottom) < 0  && this.delta.y < 0){
            this.pos.y = innerHeight;
        }else if( Math.min(bounds.top,bounds.bottom) > innerHeight  && this.delta.y > 0){
            this.pos.y = 0;
        }
        
    },
    controls : {
        oldSchool(){
            if(this.hasControl){
                if(keys.ArrowUp){
                    this.delta.x += Math.cos(this.angle) * 0.1;
                    this.delta.y += Math.sin(this.angle) * 0.1;
                }
                if(keys.ArrowLeft){
                    this.deltaAngle -= 0.001;
                }
                if(keys.ArrowRight){
                    this.deltaAngle += 0.001;
                }
            }
            this.pos.x += this.delta.x;
            this.pos.y += this.delta.y;
            this.angle += this.deltaAngle;
            this.displayAngle = this.angle;
            this.delta.x *= 0.995;
            this.delta.y *= 0.995;
            this.deltaAngle *= 0.995;            
        },
        oldSchoolDrag(){
            if(this.hasControl){
                if(keys.ArrowUp){
                    this.delta.x += Math.cos(this.angle) * 0.5;
                    this.delta.y += Math.sin(this.angle) * 0.5;
                }
                if(keys.ArrowLeft){
                    this.deltaAngle -= 0.01;
                }
                if(keys.ArrowRight){
                    this.deltaAngle += 0.01;
                }
            }
            this.pos.x += this.delta.x;
            this.pos.y += this.delta.y;
            this.angle += this.deltaAngle;
            this.delta.x *= 0.95;
            this.delta.y *= 0.95;
            this.deltaAngle *= 0.9;
            this.displayAngle = this.angle;
        },
        speedster(){
            if(this.hasControl){
                
                if(keys.ArrowUp){
                    this.speed += 0.02;
                }
                if(keys.ArrowLeft){
                    this.deltaAngle -= 0.01;
                }
                if(keys.ArrowRight){
                    this.deltaAngle += 0.01;
                }
            }
            this.speed *= 0.99;
            this.deltaAngle *= 0.9;
            this.angle += this.deltaAngle;
            this.delta.x += Math.cos(this.angle) * this.speed;
            this.delta.y += Math.sin(this.angle) * this.speed;
            this.delta.x *= 0.95;
            this.delta.y *= 0.95;
            this.pos.x += this.delta.x;
            this.pos.y += this.delta.y;
            this.displayAngle = this.angle;
        },
        engineRev(){  // this one has a 3 control. Engine speed then affects acceleration. 
            if(this.hasControl){
                if(keys.ArrowUp){
                    this.engSpeed = 3
                }else{
                    this.engSpeed *= 0.9;
                }
                if(keys.ArrowLeft){
                    this.angle -= 0.1;
                }
                if(keys.ArrowRight){
                    this.angle += 0.1;
                }
            }else{
                this.engSpeed *= 0.9;
            }
            this.engSpeedC += (this.engSpeed- this.engSpeedR) * 0.05;
            this.engSpeedC *= 0.1;
            this.engSpeedR += this.engSpeedC;
            this.speedC += (this.engSpeedR - this.speedR) * 0.1;
            this.speedC *= 0.4;
            this.speedR += this.speedC;
            this.angleC += (this.angle - this.angleR) * 0.1;
            this.angleC *= 0.4;
            this.angleR += this.angleC;
            this.delta.x += Math.cos(this.angleR) * this.speedR * 0.1; // 0.1 reducing this as easier to manage speeds when values near pixel size and not 0.00umpteen0001
            this.delta.y += Math.sin(this.angleR) * this.speedR * 0.1;
            this.delta.x *= 0.99;
            this.delta.y *= 0.99;
            this.pos.x += this.delta.x;
            this.pos.y += this.delta.y;
            this.displayAngle = this.angleR;
        },
        speedLimiter(){
            if(this.hasControl){
    
                if(keys.ArrowUp){
                    this.speed = 15;
                }else{
                    this.speed = 0;
                }
                if(keys.ArrowLeft){
                    this.angle -= 0.1;
                }
                if(keys.ArrowRight){
                    this.angle += 0.1;
                }
            }else{
                this.speed = 0;
            }
            this.speedC += (this.speed - this.speedR) * 0.1;
            this.speedC *= 0.4;
            this.speedR += this.speedC;
            this.angleC += (this.angle - this.angleR) * 0.1;
            this.angleC *= 0.4;
            this.angleR += this.angleC;
            this.delta.x = Math.cos(this.angleR) * this.speedR;
            this.delta.y = Math.sin(this.angleR) * this.speedR;
            this.pos.x += this.delta.x;
            this.pos.y += this.delta.y;
            this.displayAngle = this.angleR;
        }
    },
    updateUserIO(){
    },
    updatePos(){
        this.checkInView();
        var m = this.matrix;
        m[3] = m[0] = Math.cos(this.displayAngle);
        m[2] = -(m[1] = Math.sin(this.displayAngle));
        m[4] = this.pos.x;
        m[5] = this.pos.y;
        this.element.style.transform = `matrix(${m.join(",")})`;
    },
    create(shape,container,xOff,yourRide){  // shape is a string
        this.element = document.createElement("div")
        this.element.style.position = "absolute";
        this.element.style.top = this.element.style.left = "0px";
        this.element.style.fontSize = "24px";
        this.element.textContent = shape;
        this.element.style.color  = "green";
        this.element.style.zIndex  = 100;

        container.appendChild(this.element);
        this.matrix = [1,0,0,1,0,0];
        this.pos = { x : innerWidth / 2 + innerWidth * xOff, y : innerHeight / 2 };
        this.delta = { x : 0, y : 0};
        this.updateUserIO = this.controls[yourRide];
        return this;
    }
}
var contain = document.createElement("div");
contain.style.position = "absolute";
contain.style.top = contain.style.left = "0px";
contain.style.width = contain.style.height = "100%";
contain.style.overflow = "hidden";
document.body.appendChild(contain);
window.focus();




ships.add(Object.assign({},ship).create("=Scl>",contain,-0.4,"oldSchool"));
ships.add(Object.assign({},ship).create("=Drg>",contain,-0.25,"oldSchoolDrag"));
ships.add(Object.assign({},ship).create("=Fast>",contain,-0.1,"speedster"));
ships.add(Object.assign({},ship).create("=Nimble>",contain,0.05,"speedLimiter"));
ships.add(Object.assign({},ship).create("=Rev>",contain,0.2,"engineRev"));
function mainLoop(){
    ships.update();
    requestAnimationFrame(mainLoop);
}

body {
  font-family : verdana;
  background : black;
  color : #0F0;
 }

   Click to focus then keys 1, 2, 3, 4, 5 selects a ship. Arrow keys to fly. Best full page.

不计其数的变体

还有许多其他变体和方法。我喜欢使用二阶导数（一阶导数 dx/dt（dt 是时间）来自 x += dx，二阶导数 de/dt 用于发动机功率）模拟发动机加速力量和收尾可以给人一种非常好的感觉。基本上是

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

适合你的游戏由你决定，你不必遵守规则，所以尝试不同的价值观和方法，直到你满意为止。

我如何给这艘宇宙飞船加速？

How do I give this spaceship acceleration?

javascript

css

animation

game-physics

css-transforms

变形、加速、阻力和火箭飞船。

基础知识

正在设置 CSS 转换。

演示：

不计其数的变体