用畫布制作動畫方塊

Question

我正在嘗試使我的“ YellowTrack”變量移動，但我快瘋了，但我無法實現。 我不知道為什么，但是“ y”坐標不會更新，因此它不會移動。 我已經嘗試了很多情況，但是其中任何一個都可以解決運動問題。有人可以幫助我嗎？ PD：對不起，我寫錯了代碼

代碼如下：

function startGame() {

myGameLines1 = new DrawingLines(200, 0, 200, 600, "black");
myGameLines2 = new DrawingLines(350, 0, 350, 600, "black");
myGameLines3 = new DrawingLines(500, 0, 500, 600, "black");
myGameLines4 = new DrawingLines(650, 0, 650, 600, "black");
myGameLines5 = new DrawingLines(800, 0, 800, 600, "black");

myGameFinalLine = new FinalLine(100, 500, 800, 20, "purple");

myGameFixedSquare1 = new DrawingFixedSquares(171, 475, 60, 60, "yellow");  
myGameFixedSquare2 = new DrawingFixedSquares(321, 475, 60, 60, "red");
myGameFixedSquare3 = new DrawingFixedSquares(471, 475, 60, 60, "#F34621");
myGameFixedSquare4 = new DrawingFixedSquares(621, 475, 60, 60, "blue");
myGameFixedSquare5 = new DrawingFixedSquares(771, 475, 60, 60, "green");

myGameArea.start();


YellowTrack = new DrawingFixedSquares(171, 200, 60, 60, "yellow");

animate(YellowTrack, canvas, ctx, startTime);   

}

var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
    this.canvas.width = 1000;
    this.canvas.height = 600;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.frameNo = 0;
    this.interval = setInterval(updateGameArea, 20);
},

clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}       
}

  var ctx = myGameArea.context;
  var canvas = myGameArea.canvas;

        function DrawingLines(x1, y1, x2, y2, color) {  

            this.x1 = x1;
            this.y1 = y1;
            this.x2 = x2;
            this.y2 = y2;

            this.update = function(){       
                ctx = myGameArea.context;
                ctx.fillStyle = color;
                ctx.lineWidth="2";
                ctx.strokeStyle="black";
                ctx.moveTo(this.x1,this.y1);
                ctx.lineTo(this.x2,this.y2);
                ctx.stroke();   
            }
        }



        function DrawingFixedSquares(x, y, width, height, color) { 
            this.height = height;
            this.width = width;
            this.x = x;
            this.y = y;
            this.update = function(){
                ctx = myGameArea.context;
                ctx.fillStyle = color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }   

        }

        function FinalLine(x, y, width, height, color) {  

            this.height = height;
            this.width = width;
            this.x = x;
            this.y = y;
            this.update = function(){
                ctx = myGameArea.context;
                ctx.fillStyle = color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
        }


        function updateGameArea() {

            myGameArea.clear();
            myGameLines1.update();
            myGameLines2.update();
            myGameLines3.update();
            myGameLines4.update();
            myGameLines5.update();
            myGameFinalLine.update();
            myGameFixedSquare1.update();
            myGameFixedSquare2.update();
            myGameFixedSquare3.update();
            myGameFixedSquare4.update();
            myGameFixedSquare5.update();

            YellowTrack.update();
        }


        function animate(YellowTrack, canvas, ctx, startTime) {

            var time = (new Date()).getTime() - startTime;

            var linearSpeed = 100;

            var newY = linearSpeed * time / 1000;

            if(newY < canvas.height) {
              YellowTrack.y = newY;
            }


            ctx.clearRect(0, 0, canvas.width, canvas.height);

              requestAnimFrame(function() {
              animate(YellowTrack, canvas, ctx, startTime);
            });
          }


          setTimeout(function() {
            var startTime = (new Date()).getTime();
            animate(YellowTrack, canvas, ctx, startTime);
          }, 1000);

Answer 1

使用window.requestAnimationFrame在畫布上制作動畫非常容易。

 <!doctype html> <html> <head> <meta charset="utf-8"> <style> body { background-color: black; } canvas { position: absolute; margin: auto; left: 0; right: 0; border: solid 1px white; border-radius: 10px; } </style> </head> <body> <canvas id="canvas"></canvas> <script type="application/javascript"> // Anonymous closure to sandbox my code void function() { // Tells the JS engine to use strict syntax rules // eg creating variables without var, let or const // creates an error in strict mode "use strict"; var canvasWidth = 180; var canvasHeight = 160; var canvas = null; var ctx = null; var mouse = {x: 0.0, y: 0.0}; var box = {x: 0.0, y: 0.0, width: 20, height: 20}; var boxMoveSpeed = 25.0; // Called whenever the mouse moves // (canvas.onmousemove can be used too) window.onmousemove = function(e) { if (canvas) { // Gets the canvas' offset from the top left of the screen var boundingRect = canvas.getBoundingClientRect(); mouse.x = e.clientX - boundingRect.left; mouse.y = e.clientY - boundingRect.top; } } // Game loop function loop() { // Tick (Update game logic) box.x += (mouse.x - box.x - box.width * 0.5) / boxMoveSpeed; box.y += (mouse.y - box.y - box.height * 0.5) / boxMoveSpeed; // Render ctx.fillStyle = "#333333"; ctx.fillRect(0,0,canvasWidth,canvasHeight); ctx.lineWidth = 3; ctx.strokeStyle = "black"; ctx.fillStyle = "darkred"; ctx.beginPath(); ctx.rect(box.x,box.y,box.width,box.height); ctx.fill(); ctx.stroke(); // Handy function that loops this // function at 60Hz (60 fps) for me. requestAnimationFrame(loop); } // Called when the page finishes loading // I treat it like a 'main method' you see // in other languages window.onload = function() { canvas = document.getElementById("canvas"); canvas.width = canvasWidth; canvas.height = canvasHeight; ctx = canvas.getContext("2d"); loop(); } }(); </script> </body> </html>