确定数字何时停止增加

时间:2016-03-30 23:23:10

标签: javascript loops

你在javascript循环中:

循环吐出随机数增加或减少1.它从10开始并开始循环:

10, 9, 8, 7, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 4, 5, 6, 7, 6

我想记录峰值数字。因此,在上面的列表中,10, 9, 7

所以我假设我需要记录最后3个数字作为脚本循环。 2 numbers ago(a), 1 number ago(b), current number(c)并检查是否c<b && a<b然后记录b,如果结果为真。

我不确定如何在不被覆盖的情况下实际存储这3个数字。所以说我做了let current = [current number];因为它是一个永远是当前数字的循环,但是如何保留前两个数字而不让它们在循环中保持不变?

更新:

我试图抓住球的弹跳最高时的y值。因此,如果它反弹3次,我会得到3个y值(当球达到峰值3次时)。

数字正在控制台中记录。

***在整页视图中运行代码

'use strict';

// Todo
// - Make the ball spin
// - Make the ball squish
// - Add speed lines
// - Clear only the ball not the whole canvas


(function () {

  const canvas = document.getElementsByClassName('canvas')[0],
        c = canvas.getContext('2d');


  // -----------------------------------
  // Resize the canvas to be full screen
  // -----------------------------------

  window.addEventListener('resize', resizeCanvas, false);

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // ---------
    // Variables
    // ---------

    var circleRadius = 40,
        circleHeight = circleRadius * 2,
        x = (canvas.width/2) - circleRadius, // inital x position of the ball
        y = (canvas.height/2) - circleRadius, // inital y position of the ball
        fallHeight = y,
        vx = 0, // velocity
        vy = 0, // velocity
        groundHeight = circleHeight,
        bouncePoints = [],
        gravity = 0.8,
        dampening = 0.5,
        pullStrength = 0.04,
        segments = 4,
        bezieCircleFormula = (4/3)*Math.tan(Math.PI/(2*segments)), // http://stackoverflow.com/a/27863181/2040509
        pointOffset = {
          positive: bezieCircleFormula*circleRadius,
          negative: circleRadius-(bezieCircleFormula*circleRadius)
        },
        // Each side has 3 points, bezier 1, circle point, bezier 2
        // These are listed below in clockwise order.
        // So top has: left bezier, circle point, right bezier
        // Right has: top bezier, circle point, bottom bezier
        circlePoints = {
          top: [
            [x+pointOffset.negative, y],
            [x+circleRadius, y],
            [x+pointOffset.positive+circleRadius, y]
          ],
          right: [
            [x+circleHeight, y+pointOffset.negative],
            [x+circleHeight, y+circleRadius],
            [x+circleHeight, y+pointOffset.positive+circleRadius]
          ],
          bottom: [
            [x+pointOffset.positive+circleRadius, y+circleHeight],
            [x+circleRadius, y+circleHeight],
            [x+pointOffset.negative, y+circleHeight]
          ],
          left: [
            [x, y+pointOffset.positive+circleRadius],
            [x, y+circleRadius],
            [x, y+pointOffset.negative]
          ]
        };



    // --------------------
    // Ball squish function
    // --------------------
    // For `side` you can pass `top`, `right`, `bottom`, `left`
    // For `amount` use an interger

    function squish (side, squishAmount) {
      for (let i = 0; i < circlePoints[side].length; i++) {
        if (side === 'top') {
          circlePoints[side][i][1] += squishAmount;
        } else if (side === 'right') {
          circlePoints[side][i][0] -= squishAmount;
        } else if (side === 'bottom') {
          circlePoints[side][i][1] -= squishAmount;
        } else if (side === 'left') {
          circlePoints[side][i][0] += squishAmount;
        }
      }
    }



    // ------------------
    // Animation Function
    // ------------------

    function render () {

      // Clear the canvas
      c.clearRect(0, 0, canvas.width, canvas.height);



      // -----------------
      // Draw the elements
      // -----------------

      // Ground
      c.beginPath();
      c.fillStyle = '#9cccc8';
      c.fillRect(0, canvas.height - groundHeight, canvas.width, groundHeight);
      c.closePath();

      // Shadow
      let distanceFromGround = parseFloat(((y - canvas.height/2) + circleHeight) / (canvas.height/2 - groundHeight/2)).toFixed(4),
          shadowWidth = circleRadius * (1-distanceFromGround+1),
          shadowHeight = circleRadius/6 * (1-distanceFromGround+1),
          shadowX = (x + circleRadius) - shadowWidth/2,
          shadowY = canvas.height - groundHeight/2,
          shadowOpacity = 0.15 * distanceFromGround; // The first value here represents the opacity that will be used when the ball is touching the ground

      c.beginPath();
      c.fillStyle = 'rgba(0,0,0, ' + shadowOpacity + ')';
      c.moveTo(shadowX, shadowY);
      c.bezierCurveTo(shadowX, shadowY - shadowHeight, shadowX + shadowWidth, shadowY - shadowHeight, shadowX + shadowWidth, shadowY);
      c.bezierCurveTo(shadowX + shadowWidth, shadowY + shadowHeight, shadowX, shadowY + shadowHeight, shadowX, shadowY);
      c.fill();
      c.closePath();

      // Bezier circle
      c.beginPath();
      c.fillStyle = '#cf2264';
      c.moveTo(circlePoints.left[1][0], circlePoints.left[1][1]);
      c.bezierCurveTo(circlePoints.left[2][0], circlePoints.left[2][1], circlePoints.top[0][0], circlePoints.top[0][1], circlePoints.top[1][0], circlePoints.top[1][1]);
      c.bezierCurveTo(circlePoints.top[2][0], circlePoints.top[2][1], circlePoints.right[0][0], circlePoints.right[0][1], circlePoints.right[1][0], circlePoints.right[1][1]);
      c.bezierCurveTo(circlePoints.right[2][0], circlePoints.right[2][1], circlePoints.bottom[0][0], circlePoints.bottom[0][1], circlePoints.bottom[1][0], circlePoints.bottom[1][1]);
      c.bezierCurveTo(circlePoints.bottom[2][0], circlePoints.bottom[2][1], circlePoints.left[0][0], circlePoints.left[0][1], circlePoints.left[1][0], circlePoints.left[1][1]);
      c.stroke();
      c.closePath();



      // -------------------------------
      // Recalculate circle co-ordinates
      // -------------------------------

      circlePoints = {
        top: [
          [x+pointOffset.negative, y],
          [x+circleRadius, y],
          [x+pointOffset.positive+circleRadius, y]
        ],
        right: [
          [x+circleHeight, y+pointOffset.negative],
          [x+circleHeight, y+circleRadius],
          [x+circleHeight, y+pointOffset.positive+circleRadius]
        ],
        bottom: [
          [x+pointOffset.positive+circleRadius, y+circleHeight],
          [x+circleRadius, y+circleHeight],
          [x+pointOffset.negative, y+circleHeight]
        ],
        left: [
          [x, y+pointOffset.positive+circleRadius],
          [x, y+circleRadius],
          [x, y+pointOffset.negative]
        ]
      };



      // -----------------
      // Animation Gravity
      // -----------------


      // Increment gravity
      vy += gravity;

      // Increment velocity
      y += vy;
      x += vx;



      // ----------
      // Boundaries
      // ----------

      // Bottom boundary
      if (y + circleHeight > canvas.height - groundHeight/2) {
        y = canvas.height - groundHeight/2 - circleHeight;
        vy *= -1;

        // Dampening
        vy *= dampening;
        vx *= dampening;

        // If the Y velocity is less than the value below, stop the ball
        if (vy > -2.4) {
          dampening = 0;
        }

        fallHeight = fallHeight*dampening;
      }

      // Right boundary
      if (x + circleHeight > canvas.width) {
        x = canvas.width - circleHeight;
        vx *= -1;

        // Dampening
        vy *= dampening;
        vx *= dampening;
      }

      // Left boundary
      if (x + circleHeight < 0 + circleHeight) {
        x = 0;
        vx *= -1;

        // Dampening
        vy *= dampening;
        vx *= dampening;
      }

      // Top boundary
      if (y < 0) {
        y = 0;
        vy *= -1;

        // Dampening
        vy *= dampening;
        vx *= dampening;
      }


      console.log(y);

      requestAnimationFrame(render);
    }



    // -----------
    // Click event
    // -----------

    canvas.addEventListener('mousedown', function (e) {
      let dx = e.pageX - x,
          dy = e.pageY - y;

      if (dampening === 0) {
        dampening = 0.5;
      }

      vx += dx * pullStrength;
      vy += dy * pullStrength;

    });

    render();

  }
  resizeCanvas();

})();
body{
  margin: 0;
}

canvas {
  background: #ddf6f5;
  display: block;
}
<canvas class="canvas"></canvas>

4 个答案:

答案 0 :(得分:2)

for(var a=0,b=1,c=2; c < input.length;) 
{ 
  if(input[b] > input[a] && input[b] > input[c])
  {
    console.log(input[b]);
  }  
  a++;b++;c++;
}

答案 1 :(得分:2)

正如我解释的那样,将它们推入阵列。

var nums = [10, 9, 8, 7, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 4, 5, 6, 7, 6];
var peaks = [];
nums.forEach(function(val, index, arr){ 
    var isPrevLess = index==0 || arr[index-1]<val,  //is the last number less
        isNextLess = index==arr.length-1 || arr[index+1]<val;  //is the next number less
    if (isPrevLess && isNextLess) {  //if both are less it is a peak
        peaks.push(val);
    } 
});
console.log(peaks);

答案 2 :(得分:1)

如果我理解正确,长度为arr的数组li位置有一个峰值,如果满足其中任何一个:

  • 0 = i < l-1arr[i] > arr[i+1]
  • 0 < i < l-1arr[i-1] < arr[i] > l-1
  • 0 < i = l-1arr[i] > arr[i-1]
  • 0 = i = l-1

然后,您可以使用

var peaks = arr.filter(function(n, i, a) {
  return (i===0 || n > a[i-1]) && (i===a.length-1 || n > arr[i+1]);
});

答案 3 :(得分:1)

你真的应该发布一个能说你所说的功能,然后你尝试一个解决方案。因为那个...... ...

&#13;
&#13;
function foo(startNum, count) {
  var prev = -Infinity;
  var sense = 'up';
  var curr = startNum;
  
  for (var i=0; i<count; i++) {

    // Randomly add or subtract one from current
    curr += Math.random() < 0.5? -1 : 1;
    
    // If it's a peak, do something. If it's not a peak, do something else
    if (sense == 'up' && curr < prev) {  // Hit peak
      document.write('<br>peak: ' + prev + ' going ' + sense);
    } else {
      document.write('<br>Not peak: ' + prev + ' going ' + sense);
    }

    // Prepare for next loop
    sense = prev > curr? 'down' : prev < curr? 'up' : sense;
    prev = curr;
  }
}

foo(10,20);
&#13;
&#13;
&#13;