如何让这个元素移动得更慢？答案

【问题标题】：How do I make this element move slower?如何让这个元素移动得更慢？
【发布时间】：2018-09-15 23:57:44
【问题描述】：

我正在尝试制作这个 JavaScript 小游戏。我是编码新手，不确定是什么导致了下降元素的速度。我如何操纵这些元素的下降速度？

    var canvas = document.getElementById("c1"),
      ctx = canvas.getContext("2d"),
      width = 400,
      height = 400,
      player = {
        x: 200,
        y: 200,
        width: 10,
        height: 10
      },
      keys = [];

    canvas.width = width;
    canvas.height = height;

    var block = {
      width: 150,
      height: 25,
      velocity: 3,
      x: 125,
      y: 300
    };

    var wasTouching = false;

    function update() {

      if (keys[38] || keys[32]) {
        player.y -= 5;
      }

      if (keys[39]) {
        player.x += 5;
      }
      if (keys[37]) {
        player.x -= 5;
      }
      if (keys[40]) {
        player.y += 5;
      }

      if (player.width + player.x > 400) {
        player.x -= 5;
      }

      if (player.width + player.x < 10) {
        player.x += 5;
      }

      if (player.height + player.y < 10) {
        player.y = player.y + 15;

      }

      if (player.height + player.y > 400) {
        player.y -= 5;
      }

      //block 1
      if (player.x < block.x + block.width && player.x + player.width > block.x &&
          player.y < block.y + block.height && player.y + player.height >= block.y) {
        if(!wasTouching) {
          //console.log("The objects are touching");
        }
        player.y = block.y - player.height;
        wasTouching = true;
      } else {
        wasTouching = false;
      }

      ctx.beginPath();
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "red";
      ctx.fillRect(player.x, player.y, player.width, player.height);

      ctx.beginPath();
      ctx.fillStyle = "blue";
      ctx.fillRect(block.x, block.y, block.width, block.height);

      function gravity() {
        if (player.y < 390 && !wasTouching) {

          player.y = player.y + 2;

        }
      }

      function moveblock() {
      if( block.x < 400){
        block.x = block.velocity;

      }
    }

      requestAnimationFrame(update);
      requestAnimationFrame(gravity);
      requestAnimationFrame(moveblock);
    }

    document.body.addEventListener("keydown", function(e) {
      keys[e.keyCode] = true;
    });

    document.body.addEventListener("keyup", function(e) {
      keys[e.keyCode] = false;
    });

    window.addEventListener("load", function() {
      update();
    });

<html lang="en">
     <head>
       <meta charset="UTF-8">
       <title> Test File </title>
       <style type="text/css">
        canvas {
            border: 1px solid black;
        }
        body {
            margin 0;
        }
    </style>
     </head>
    <body>
    <canvas id= "c1" width = "400" height = "400"></canvas>
    
    </body>
    </html>

这是代码，如果你想用它来看看我做错了什么，我还没有找到解决方案，如果你能找到，那就太好了。

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

如果你想控制红框的下降速度：你必须添加<select>元素框和变量fallingSpeed和speed。变量fallingSpeed 在更改后从<select> 元素框获取其值。并且变量speed 依赖于变量fallingSpeed，但是如果您添加第二个<select> 元素框，您可以独立进行。

如果您想从蓝色框控制速度：您必须添加第二个<select> 元素框。变量block.velocity 的值来自 <select> 更改后的元素框。我在初始化时将block.velocity 设置为1。

解决方案示例

var canvas = document.getElementById("c1"),
    ctx = canvas.getContext("2d"),
    width = 400,
    height = 400,
    player =
    {
        x: 200,
        y: 200,
        width: 10,
        height: 10
    },
    block =
    {
        x: 125,
        y: 300,
        width: 150,
        height: 25,
        velocity: 1 //it is changed from 3 to 1
    };
    keys = [],
    wasTouching = false,
    fallingSpeed = 2;
    speed = 5;

canvas.width = width;
canvas.height = height;

function changeBlueBoxSpeed(obj)
{
    block.velocity = +obj.options[obj.selectedIndex].text;
    obj.blur() //select obj lost focus
}

function changeFallingSpeed(obj)
{
    fallingSpeed = +obj.options[obj.selectedIndex].text;
    speed = fallingSpeed * 2.5;
    obj.blur() //select obj lost focus
}

function update()
{
    if(keys[38] || keys[32])
    {
        player.y -= speed;
    }

    if(keys[39])
    {
        player.x += speed;
    }

    if(keys[37])
    {
        player.x -= speed;
    }

    if (keys[40])
    {
        player.y += speed;
    }


    if(player.width + player.x > 400)
    {
        player.x -= speed;
    }

    if(player.width + player.x < 10)
    {
        player.x += speed;
    }

    if(player.height + player.y < 10)
    {
        player.y += speed * 3;
    }

    if(player.height + player.y > 400)
    {
        player.y -= speed;
    }

    //block 1
    if(player.x < block.x + block.width && player.x + player.width > block.x &&
        player.y < block.y + block.height && player.y + player.height >= block.y)
    {
        if(!wasTouching)
        {
            //console.log("The objects are touching");
        }
        player.y = block.y - player.height;
        wasTouching = true;
    }
    else
    {
        wasTouching = false;
    }

    ctx.beginPath();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "red";
    ctx.fillRect(player.x, player.y, player.width, player.height);

    ctx.beginPath();
    ctx.fillStyle = "blue";
    ctx.fillRect(block.x, block.y, block.width, block.height);

    function gravity()
    {
        if(player.y < 390 && !wasTouching)
        {
            player.y += fallingSpeed;
        }
    }

    function moveblock()
    {
        if(block.x < 400)
        {
            //here was mistake too: I wrote "+=" instead of "="
            block.x += block.velocity;
        }
    }

    requestAnimationFrame(update);
    requestAnimationFrame(gravity);
    requestAnimationFrame(moveblock);
}

document.body.addEventListener("keydown", function(e)
{
    keys[e.keyCode] = true;
});

document.body.addEventListener("keyup", function(e)
{
    keys[e.keyCode] = false;
});


window.addEventListener("load", function()
{
    update();
});

canvas {border: 1px solid black}
body {margin: 0}

<br>
Change falling speed of red box: <select onchange="changeFallingSpeed(this)">
    <option>1</option>
    <option selected>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select><br>
Change speed of blue box: <select onchange="changeBlueBoxSpeed(this)">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
<br><br>
<canvas id= "c1" width = "400" height = "400"></canvas>

【讨论】：

再次见到你，但这不是我想要的，我试图让蓝色块移动得慢一点，如果你能再次看到它的移动我不会让这些努力白费我很感激很多~真诚的乔乔
@Jojo，但有问题的是你写了关于下降速度的文章。无论如何，现在您可以使用这两个框进行操作了。
我现在明白了我的错误我仍然无法相信你会抽出时间来帮助我解决这个问题，对不起，如果我打扰了你，但非常感谢你~真诚的 Jojo