Javascript - Canvas，如何使Zig zag中的球行進

嘿，我有一個JavaScript在畫布上的問題。基本上，我無法弄清楚如何讓球以曲折形式前進。我是JavaScript新手，仍然在學習它，所以如果你們中的任何人都可以幫助我，那將不勝感激。所以我的問題是，我將如何去做一個曲折曲折的球行進？目前它只是從左到右做一條直線。Javascript - Canvas，如何使Zig zag中的球行進

這裏是我的代碼

// JavaScript Document 
window.addEventListener('load', eventWindowLoaded, false); 

function eventWindowLoaded() { 
    canvasApp(); 
} 

function canvasSupport() { 
    return Modernizr.canvas; 
} 

function canvasApp() { 

    // test if Modernizr has been loaded 
    if (!canvasSupport()) { 
     return; 
    } 

    var pointImage = new Image(); 
    // put an image into an image object 
    pointImage.src = "point.png"; 

    function drawScreen() { 

     // fill the background 
     context.fillStyle = '#EEEEEE'; 
     context.fillRect(0, 0, theCanvas.width, theCanvas.height); 
     // Draw a Box around the fill 
     context.strokeStyle = '#000000'; 
     context.strokeRect(1, 1, theCanvas.width - 2, theCanvas.height-2); 

     // Create ball 

     if (moves > 0) { 
      moves--; 
      ball.x += xunits; 
      ball.y += yunits; 
     } 

     // Draw points to illustrate path 

     points.push({ 
      x: ball.x, 
      y:ball.y 
     }); 

     // for loop with drawImage inside the loop to draw the points 

     for (var i = 0; i < points.length; i++) { 
      context.drawImage(pointImage, points[i].x, points[i].y, 1, 1); 
     } 
     context.fillStyle = "#000000"; 
     context.beginPath(); 
     context.arc(ball.x, ball.y, ball_radius, 0, Math.PI * 2, true); 
     context.closePath(); 
     context.fill(); 
    } 

    var speed = 10; 
    // coordinates of the left hand point 
    var p1 = { 
     x: 20, 
     y: 250 
    }; 
    var p2 = { 
     x: 480, 
     y: 250 
    }; 
    // distance between left and right x coordinates 
    var dx = p1.x - p2.x; 
    var dy = p1.y - p2.y; 
    // Calculate the distance between points 
    var distance = Math.sqrt(dx * dx + dy * dy); 
    var moves = distance/speed; 
    var xunits = (p2.x - p1.x)/moves; 
    var yunits = (p2.y - p1.y)/moves; 
    var ball = { 
     x: p1.x, 
     y: p1.y 
    }; 
    var points = new Array(); 
    var the_interval = 20 
    var ball_radius = 5 

    // save the context in a variable 
    theCanvas = document.getElementById("canvasOne"); 
    context = theCanvas.getContext("2d"); 

    // call the drawscreen function every 33 miliseconds 
    setInterval(drawScreen, the_interval); 

}

我使用Modernizr來幫助我。

來源

2013-02-26 user2110609

不寫瘋狂的數學函數，也許它是一個好主意，使用正弦波作爲「之字形」。退房http://www.w3schools.com/jsref/jsref_sin.asp或https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Math/sin

來源

2013-02-26 10:09:11

好的謝謝，但我不明白如何使用這個我在哪裏把這種方法？我無法分辨它是否只是被遺忘，或者我一直在盯着這個完全相同的代碼6個小時，這讓我看起來似乎無法看到它。 – user2110609 2013-02-26 10:11:24

Calculate velocity and direction of a ball to ball collision based on mass and bouncing coefficient

 -Your answer can be found in there. The problem with your original code was that you calculated the total change in distance over the total time. If the zig zag is going to move left to right at a 45 degree angle then the absolute value of the speed of |y| == x. create a listener or loop to switch the value of y from positive to negative values depending when you want to zig or zag. check out that older post it should clear things up

來源

2013-02-26 11:50:13

你是對的，它直接從左到右直線走，只要它像這樣[甚至是Zig Zag]，它甚至不管它走向哪裏（http://www.html5canvastutorials.com/食譜/ ch1/1369_01_05 /）謝謝你提供幫助。 – user2110609 2013-02-27 05:08:25

這聽起來好像有些功課:-)反正你在這裏用了仙解決方案。用它創建之字形絕對不是個壞主意，因爲你沒有定義更接近你需要的確切形狀。

(function() { 
    var startPoint = { x: 0, y: 250 }, 
     endPoint = { x: 500, y: 250 }, 
     ball = { x: startPoint.x, y: startPoint.y }, 
     canvas = document.getElementById('canvas'), 
     context = canvas.getContext('2d'); 

    window.requestAnimFrame = (function(){ 
     return window.requestAnimationFrame  || 
       window.webkitRequestAnimationFrame || 
       window.mozRequestAnimationFrame || 
       window.oRequestAnimationFrame  || 
       window.msRequestAnimationFrame  || 
       function(callback){ 
       window.setTimeout(callback, 1000/60); 
       }; 
    })(); 

    function draw() { 

    var dx = endPoint.x - startPoint.x, 
     dy = endPoint.y - startPoint.y, 
     a = (function() { if (dy !== 0) { return dx/dy; } else { return 0; }})(), 
     b = startPoint.y - a*startPoint.x, 
     y = function (x) { return a*x + b; }; 

    ball.x = ball.x + 1; 
    ball.y = y(ball.x) + Math.sin(ball.x*0.1)*10; 

    context.fillStyle = '#EEEEEE'; 
    context.fillRect(0, 0, canvas.width, canvas.height); 
    context.strokeStyle = '#000000'; 
    context.strokeRect(1, 1, canvas.width-2, canvas.height-2); 

    context.fillStyle = "#000000"; 
    context.beginPath(); 
    context.arc(ball.x, ball.y, 5, 0, Math.PI*2, true); 
    context.closePath(); 
    context.fill(); 

    window.requestAnimFrame(draw); 
    } 

    window.requestAnimFrame(draw); 

})();

只Z字形的Y，但你可以使用這個想法，添加或更改自己的「偏差」在X和Y您還可以添加Modernizr的檢測畫布，但我認爲，在這個問題它是不折不扣的。希望它有幫助;-)你可以在這裏試試 - >http://jsbin.com/ahefoq/1 < - 。請享用！

來源

2013-02-28 09:17:46 mariozski

Javascript - Canvas，如何使Zig zag中的球行進

回答

相關問題