Search code examples
javascripthtmlrotationkineticjspuzzle

KineticJs different angle rotation


i am using the latest version of kineticJs, right now I am doing puzzle games, which requires my puzzle pieces to rotate after scramble, anyone have any idea how to rotate different angle and not 2-3 pieces rotate of the same angle? thanks :)

                    fillPatternImage:imageObj,
                    fillPatternOffsetX :i * pieceWidth,
                    fillPatternOffsetY :j * pieceHeight,
                    stroke: "#000000",
                    strokeWidth: 4,
                    lineCap: "round",
        rotation : Math.PI * 28.5 * Math.floor(Math.random() * 2), <-- rotation part
                    draggable: true,
  offset : [ pieceWidth / 2 + pieceWidth * 0.3,pieceHeight / 2 + pieceHeight * 0.3 ],
                x:0+ (Math.random()*6)*((stage.getWidth()+pieceWidth)/16),
                y:0+ (Math.random()*4)*((stage.getHeight()+pieceHeight)/16),

My fiddle : http://jsfiddle.net/e70n2693/34/


Solution

  • the code Math.floor(Math.random() * 2) gives either 0 or 1, which is then multiplied by PI*28.5, giving either a rotation of 0 or PI*28.5.

    increase the multiplier of Math.random() to desired number of possible rotations.

    you may have to change the value multiplying PI also to give a better spread of possible angles (reduce it)

    something like below should give a wider range of results

    var numberOfDifferentAngles = 50;
    var differenceBetweenAngles = Math.PI * 2;
    
    rotation : differenceBetweenAngles  
       * Math.floor(Math.random() * numberOfDifferentAngles ),