mkirank / questions-answers Goto Github PK

1. how to create a spritesheet:

   - download Texture Packer from http://www.texturepacker.com/

   - open Texture Packer and select JSON data format in the Output
     section in the left panel

   - select Basic algorithm in the Layout section in the left panel

   - clear Allow Rotation and Trim fields in the Layout section in the
     left panel

   - use Add Sprites/Add Folder and Publish buttons at the top to
     generate and save your spritesheet

   - Texture Packer should create two files: a text file with
     extension .json, that contains the spritesheet mapping data, and
     a PNG image that contains the spritesheet

   - paste the contents of the .json file in to main.js file between
     the lines

     // BEGIN TEXTUREPACKER JSON
     // END TEXTUREPACKER JSON

     This will effectively set the FRAMES variable to be equal to the
     JSON data structure generated by Texture Packer.

   - set SPRITESHEET_URL variable to the name of the spritesheet PNG
     image above (assuming that the file will be stored in the same
     directory as the HTML page that runs main.js file.

   - the names of the sprites in the code will be the same as the
     names of the original image files that were used to generate the
     spritesheet.

2. code variables that need to be changed to customize the game behavior:

   - ANSWER_TWEEN_DURATION
     the duration of all animations in milliseconds

   - BITMAPS_ANSWERS
     an array of names of the answer sprites

   - BITMAPS_QUESTIONS
     an object that associates names of the question sprites with the
     names of the corresponding answer sprites

   - DROP_TARGET.POSITION
     the coordinates of the center of the drop target circle inside
     the canvas (the origin is at the upper left corner of the canvas)

   - DROP_TARGET.RADIUS
     the radius of the drop target circle

   - DROP_TARGET.STROKE.COLOR
     DROP_TARGET.STROKE.WIDTH
     the color and the stroke width in pixels of the drop target
     circle

   - QUESTION_POSITION
     the canvas coordinates of the geometrical center of the question
     sprite

   - REQUIRED_SIZE
     the required width and heigh of the canvas

   - change function get_answer_position to generate the positions of
     the question sprites

     this function is invoked for each answer sprite in the
     BITMAP_ANSWERS array above, it takes two parameters:

     - current is the Bitmap object of the answer sprite that is being displayed

     - prev is the Bitmap object of the answer sprite that was
       displayed before the current one; this is useful if you want to
       position answers relative to each other, if you do not, then
       ignore it

3. to start the game

   call window.game_start and give it the div element that will
   contain the canvas, and the actual width and height of the canvas
   in pixels (the canvas will be scaled using REQUIRED_SIZE above to
   fit in these dimentions)