Question

我正在尝试制作这个小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>

这是代码，如果您想使用它查看我做错了什么，我还没有找到解决方案，如果可以的话，那会很棒。

Answer 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>

如何使此元素的移动速度变慢？

1 个答案: