制作卡车和按钮以提高速度，通过 jQuery 使用 html/js 改变方向

Posted 2023-03-25

技术标签:

【中文标题】制作卡车和按钮以提高速度，通过 jQuery 使用 html/js 改变方向【英文标题】：making a truck and buttons to increase speed, change direction using html/js via jQuery 【发布时间】：2021-05-27 00:57:04 【问题描述】：

这是我的作业问题

您需要在 Canvas 中创建相同的动画。这可以是任何对象：卡车、汽车、自行车、飞机等。Blackboard 中提供了许多示例代码以供您帮助，我也在讲座中为您提供了提示。

加载页面时，该对象应位于屏幕左侧。将有五个按钮：开始、停止、+、- 和改变方向。您可以显示或隐藏您想要的任何按钮。这取决于你。当点击开始按钮时，对象应该开始移动。当您单击停止按钮时，对象应该停止移动。当你点击“改变方向”按钮时，对象应该改变方向。当您单击 + 按钮时，对象的速度应该增加，当您单击 - 按钮时，速度应该降低。在按钮下方，应该有做这道题的学生的名字。

我试图解决它，但它似乎不适用于我。

这是我页面的代码。

我想通过 jQuery 使用 html/js 制作改变方向按钮。

$(document).ready(function() 
  var canvas = $("#myCanvas");
  var ctx = canvas.get(0).getContext("2d");
  var playAnimation = true;
  var startButton = $("#startAnimation");
  var stopButton = $("#stopAnimation");
  var increaseButton = $("#increase");
  var decreaseButton = $("#decrease")
  var x = 0;
  var b = 200;
  var t = 200;
  var w = 200;
  var q = 255;
  var cir = 240;
  var cir2 = 90;
  var ctx;
  startButton.hide();

  startButton.click(function() 
    $(this).hide();
    stopButton.show();
    playAnimation = true;
    animate();
  );

  stopButton.click(function() 
    $(this).hide();
    startButton.show();
    playAnimation = false;
  );

  /*function increase() 
  speed += 10; 
  ;*/


  increaseButton.click(function() 
    var interval = 1000;
    timer = function() 
      interval--;
      //do your thing here

      interval = interval < 40 ? 40 : interval;
      setTimeout(timer, interval);
    ;
    timer();
  );

  /*stopButton.click.(function()
            if(mouseX >= 335 && mouseX <= 390 && mouseY >= 15 && mouseY <= 115)
                x++;//Make faster
            
            if(mouseX >= 335 && mouseX <= 390 && mouseY >= 295 && mouseY <= 395)
                x--;//Make slower
                if(speed < 0)
                    speed++;//Make faster, I said IT CAN'T GO TO 0 or less...
                
            
            
        );*/
  //var increase = x++;
  //var decrease = x--;


  function animate() 
    x++;
    b++;
    t++;
    w++;
    q++;
    cir++;
    cir2++;
    //y++;                          //update
    //ctx.clearRect(0, 0, 800, 600);  //clear
    ctx.clearRect(0, 0, canvas.width(), canvas.height());
    ctx.fillRect(x, 350, 190, 120);
    ctx.fillRect(b, 410, 60, 60);

    ctx.beginPath();
    ctx.moveTo(t, 350);
    ctx.lineTo(w, 400);
    ctx.lineTo(q, 400);
    ctx.closePath();
    ctx.fillStyle = "#black";
    ctx.fill();

    //var c = document.getElementById("myCanvas");
    //var ctx = c.getContext("2d");

    ctx.beginPath();
    ctx.arc(cir, 490, 18, 0, 2 * Math.PI);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.lineWidth = 4;
    ctx.strokeStyle = '#black';
    ctx.stroke();


    ctx.beginPath();
    ctx.arc(cir2, 490, 18, 0, 2 * Math.PI);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.lineWidth = 4;
    ctx.strokeStyle = '#black';
    ctx.stroke();
    //draw();
    // removed for snippet: console.log(x);
    if (playAnimation)
      setTimeout(animate, 20);
    //repeat
  ;

  animate();

);

/* for snippet - a huge gap at the top makes it unviewable */
#myCanvas  margin-top: -340px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<canvas id="myCanvas"  > 
  <!-- Insert fallback content here --> 
</canvas>
<div>
  <button id="startAnimation">Start</button>
  <button id="stopAnimation">Stop</button>
  <button id="increase"> Increase the speed</button>
  <button id="decrease"> Decrease the speed</button>
</div>

【问题讨论】：

你是小白帽吗？学生？什么特别不适合你> 离题：免费课程 1：保持代码整洁。自动格式化是你的朋友。给您的问题：哪个位让您的卡车左右移动？一旦您回答了是什么让您的卡车移动的问题，请考虑一下，要求 3-6 本质上都是相同的。 【参考方案1】：

您似乎在animate() 内调用animate()，这不是一个好主意。

开始和停止

我用它来重复运行函数

var speed = 10;
var animation = setInterval(function () 
    animate();
, speed);

现在，animate() 将每 speed 毫秒运行一次，在本例中为 10 毫秒。（Canvas 会每 10ms 清除并更新一次）

要停止动画，只需用clearInterval(animation) 停止间隔，然后通过重新分配它重新开始。

startButton.click(function () 
    $(this).hide();
    stopButton.show();
    animation = setInterval(function () 
        animate();
    , speed);
);

变化速度

increaseButton.click(function () 
    changeSpeed(-10);
);

decreaseButton.click(function () 
    changeSpeed(10);
);

function changeSpeed(changeValue) 
    speed += changeValue;
    clearInterval(animation)
    animation = setInterval(function () 
        animate();
    , speed);

改变方向 我添加了名为direction 的新变量，这将使动画在1 时向前移动，在-1 时向后移动。我将您的代码替换为animate()

x++;
b++;
t++;
w++;
q++;
cir++;
cir2++;

与：

x += direction;
b += direction;
t += direction;
w += direction;
q += direction;
cir += direction;
cir2 += direction;

并添加允许其更改direction值的按钮

var changeDirection = $("#changeDirection");
changeDirection.click(function () 
    direction *= -1;
)

齐心协力：

$(document).ready(function () 
    var canvas = $("#myCanvas");
    var ctx = canvas.get(0).getContext("2d");
    var playAnimation = true;
    var startButton = $("#startAnimation");
    var stopButton = $("#stopAnimation");
    var increaseButton = $("#increase");
    var decreaseButton = $("#decrease");
    var changeDirection = $("#changeDirection");
    var x = 0;
    var b = 200;
    var t = 200;
    var w = 200;
    var q = 255;
    var cir = 240;
    var cir2 = 90;
    var ctx;
    var direction = 1;
    var speed = 10;

    startButton.hide();

    startButton.click(function () 
        $(this).hide();
        stopButton.show();
        animation = setInterval(function () 
            animate();
        , speed);
    );

    stopButton.click(function () 
        $(this).hide();
        startButton.show();
        clearInterval(animation)
    );

    increaseButton.click(function () 
        changeSpeed(-10);
    );

    decreaseButton.click(function () 
        changeSpeed(10);
    );

    changeDirection.click(function () 
        direction *= -1;
    )

    function changeSpeed(changeValue) 
        speed += changeValue;
        clearInterval(animation)
        animation = setInterval(function () 
            animate();
        , speed);
    

    function animate() 
        x += direction;
        b += direction;
        t += direction;
        w += direction;
        q += direction;
        cir += direction;
        cir2 += direction;

        //update
        ctx.clearRect(0, 0, canvas.width(), canvas.height());
        ctx.fillRect(x, 350, 190, 120);
        ctx.fillRect(b, 410, 60, 60);

        ctx.beginPath();
        ctx.moveTo(t, 350);
        ctx.lineTo(w, 400);
        ctx.lineTo(q, 400);
        ctx.closePath();
        ctx.fillStyle = "#black";
        ctx.fill();

        
        ctx.beginPath();
        ctx.arc(cir, 490, 18, 0, 2 * Math.PI);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.lineWidth = 4;
        ctx.strokeStyle = '#black';
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(cir2, 490, 18, 0, 2 * Math.PI);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.lineWidth = 4;
        ctx.strokeStyle = '#black';
        ctx.stroke();
    ;

    var animation = setInterval(function () 
        animate();
    , speed);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <canvas id="myCanvas"  >
        <!-- Insert fallback content here -->
    </canvas>
    <div>
        <button id="startAnimation">Start</button>
        <button id="stopAnimation">Stop</button>
        <button id="increase"> Increase the speed</button>
        <button id="decrease"> Decrease the speed</button>
        <button id="changeDirection"> Change direction</button>
    </div>
</body>

【讨论】：

以上是关于制作卡车和按钮以提高速度，通过 jQuery 使用 html/js 改变方向的主要内容，如果未能解决你的问题，请参考以下文章

传递参数 Byreference 以提高速度和效率

制作一个 JQuery 计算器，更改 innerHTML 但没有任何反应

我如何在 jquery 日期选择器中制作一个清晰的按钮

jQuery，沿弧线制作动画

从谷歌或微软引用 jQuery可以提高加载速度。

提高 Flash 中的渲染速度