2016-03-30 20 views
1

Sie in einer Javascript-Schleife sind:wenn Zahl gestoppt hat zunehmende

Die Schleife spuckt Zufallszahlen Erhöhen oder Verringern von 1. Es befindet sich auf 10 startet und beginnt eine Schleife:

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

I möchte die Peak-Nummern protokollieren. Also in der obigen Liste wäre das 10, 9, 7

Also ich nehme an, ich würde die letzten 3 Zahlen als Skript Loops protokollieren müssen. 2 numbers ago(a), 1 number ago(b), current number(c) und prüfen Sie, ob c<b && a<b dann log b, wenn das wahr wurde.

Ich bin unsicher, wie man diese 3 Zahlen tatsächlich speichert, ohne dass sie überschrieben werden. Also sage ich, ich tat let current = [current number];, weil es eine Schleife ist, die immer die aktuelle Nummer wäre, aber wie würde ich die vorherigen 2 Zahlen speichern, ohne dass sie konstant überschrieben werden, während sie in der Schleife bleiben?

UPDATE:

Ich versuche, den y Wert für greifen, wenn der Ball höchsten springt. Also, wenn es 3 Mal springt, würde ich 3 y Werte haben (wenn der Ball 3 Mal seinen Höhepunkt erreicht hat).

Die Nummern werden in der Konsole protokolliert.

*** Führen Sie den Code in voller Seitenansicht

'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>

+2

sie also in ein Array schieben. – epascarello

+0

Tut mir leid, ich bin mir nicht sicher, ob ich das verstehe, könntest du es ausarbeiten - was dränge ich in ein Array? – MarioD

+0

Ich glaube, ich verstehe, schieben Sie alle Zahlen in der Schleife in ein Array.Vergleichen Sie dann die letzten 3 Zahlen im Array, während die Schleife läuft. Vielen Dank. – MarioD

Antwort

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++; 
} 
+0

Was ist, wenn "Eingang.Länge <3"? – Oriol

2

Wie ich bereits erklärt, sie in das Array schieben.

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); 
+0

Ich habe ein paar Code zu der Frage hinzugefügt, ich werde versuchen, diese Methode jetzt zu implementieren - danke! – MarioD

1

Wenn ich richtig verstehe, Array arr der Länge l eine Spitze bei Position i wenn eine dieser Bedingungen erfüllt ist:

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

Dann können Sie

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

Ich habe ein paar Code zu der Frage hinzugefügt, ich werde versuchen, diese Methode jetzt zu implementieren - danke! – MarioD

1

verwenden Sie sollten wirklich eine Funktion schreiben, das tut, was Sie sagen, dann Versuch einer Lösung. Da, was fehlt ...

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

Verwandte Themen