0

嘿，伙计们，我在 Canvas 上遇到了一些 JavaScript 问题。基本上，我不知道如何让球以之字形移动。我是 JavaScript 新手，还在学习它，所以如果你们中的任何人能帮助我，我将不胜感激。所以我的问题是我将如何让球以之字形移动？目前它只是从左到右做一条直线。

这是我的代码 

// 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来帮助我解决这个问题。

4

3 回答 3

0

如果不写疯狂的数学函数，也许使用正弦波作为“之字形”是个好主意。查看http://www.w3schools.com/jsref/jsref_sin.asp或https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Math/sin

于 2013-02-26T10:09:11.997 回答
0

根据质量和弹跳系数计算球与球碰撞的速度和方向

     -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-26T11:50:13.070 回答
0

对我来说这听起来像是一些家庭作业:-) 无论如何，在这里你得到了使用 Sin 的解决方案。用它创建之字形绝对不是坏主意，因为您没有更接近地定义您需要的确切形状。

(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);

})();

它仅在 Y 上曲折，但您可以使用这个想法并在 X 和 Y 中添加或更改您自己的“偏差”。您也可以添加 Modernizr 来检测画布，但我认为在这个问题中它是无关紧要的。希望它有所帮助 ;-) 你可以在这里试试 --> http://jsbin.com/ahefoq/1 <--。享受！

mz

于 2013-02-28T09:17:46.703 回答