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

Question

这是我的作业题目

You are required to create the same animation in Canvas. This can be any object: a truck, a car, a cycle an airplane, etc. Many example codes are provided in Blackboard for your help, and I have given you hints in the lecture as well.

The object should be at the left of the screen when you load the page.

There will be five buttons: start, stop, +, -, and change direction. You can show or hide whichever button you want. It is up to you.

The object should start moving when click on the start button.

The object should stop moving when you click on the stop button.

The object should change the direction when you click on “change direction” button.

When you click on the + button, the speed of the object should be increased and when you click on the - button, the speed should be decreased.

Below the buttons, there should be names of the students who did that question.

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

这是我页面的代码。

我想通过 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" 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>

Answer 1

您似乎在 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, 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" 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>

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

making a truck and buttons to increase speed, change direction using html/js via jQuery

javascript

jquery

html5-canvas