微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：编程问答

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

这是我作业的问题

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

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

我试图解决它，但它似乎对我不起作用。

这是我页面的代码。

我想通过 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,800,600);  //clear
    ctx.clearRect(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,2 * Math.PI);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.linewidth = 4;
    ctx.strokeStyle = '#black';
    ctx.stroke();


    ctx.beginPath();
    ctx.arc(cir2,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" width="800" height="600"> 
  <!-- 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>

解决方法

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

开始和停止

我用这个来重复运行这个函数

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

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

要停止动画，只需用 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,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,2 * Math.PI);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.lineWidth = 4;
        ctx.strokeStyle = '#black';
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(cir2,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" width="800" height="600">
        <!-- 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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot