// Cloned by test  on 13 Aug 2018 from World "canvas 2d " by Starter user 
// Please leave this clone trail here.
 


// ==== Starter World ===============================================================================================
// (c) Ancient Brain Ltd. All rights reserved.
// This code is only for use on the Ancient Brain site.
// This code may be freely copied and edited by anyone on the Ancient Brain site.
// This code may not be copied, re-published or used on any other website.
// To include a run of this code on another website, see the "Embed code" links provided on the Ancient Brain site.
// ==================================================================================================================




// Starter World for canvas API (no graphics library)
// 2D rendering 
// getContext("2d");

// user_span1 - Status line 





// ===================================================================================================================
// === Start of tweaker's box ======================================================================================== 
// ===================================================================================================================

// The easiest things to modify are in this box.
// You should be able to change things in this box without being a JavaScript programmer.
// Go ahead and change some of these. What's the worst that could happen?


AB.clockTick       = 20;            // many frames per second, with small moves, looks best  

AB.screenshotStep  = 50;   
  
AB.maxSteps        = 1000;     
	

const SKYCOLOR 	= "#ffffcc";				// this usage will be of color as a string, not as a number 

const MUSIC_BACK  = '/uploads/starter/Defense.Line.mp3' ;

const SQUARE_IMAGE = '/uploads/starter/latin.jpg';

  
// ===================================================================================================================
// === End of tweaker's box ==========================================================================================
// ===================================================================================================================


// You will need to be some sort of JavaScript programmer to change things below the tweaker's box.








// global vars 
// Warning: caution with making SQUARESIZE a fixed size 
// because this may run on mobile with very small canvas

var SQUARESIZE;
var MOVESIZE;



function randomMove()       // square makes random move of this size
{
    return ( AB.randomIntAtoB ( - MOVESIZE , MOVESIZE ) ); 
}


function goodPoint ( x, y )   
// keep square inside the canvas    
// x,y is top LHS point of square
{
    if ( x < 0 ) return false;
    if ( y < 0 ) return false;
    if ( x + SQUARESIZE > ABWorld.canvas.width ) return false;
    if ( y + SQUARESIZE > ABWorld.canvas.height ) return false;
    return true;
}




function World() 
{ 

var x, y;           // current location of square 
 
var dx;             // current move increment per step
var dy;

var img = new Image();



function draw() 
{
	var ctx = ABWorld.getContext ( "2d" );
	
	                    
    // clear the whole canvas:
    //      ctx.clearRect( 0, 0, ABWorld.canvas.width, ABWorld.canvas.height );
 
	// clear the last drawn square: 
    //        ctx.clearRect ( x-1, y-1, SQUARESIZE+1, SQUARESIZE+1 );

// draw entire canvas in background color or else get black background in screenshots:
    ctx.fillStyle = SKYCOLOR;
    ctx.fillRect ( 0, 0, ABWorld.canvas.width, ABWorld.canvas.height );

    
    if ( ! goodPoint ( x + dx, y + dy ) )       // hit bounds, need to change direction 
    {
     do
     {
         dx = randomMove();
         dy = randomMove();
     }
     while ( ! goodPoint ( x + dx, y + dy ) );
    }
    
    // move the square and draw it 
    x = x + dx;
    y = y + dy;
    
//    	ctx.fillStyle = '#000000';								// set up foreground color
//      ctx.fillRect ( x, y, SQUARESIZE, SQUARESIZE );          // fill with solid color 
    
        ctx.drawImage( img, x, y, SQUARESIZE, SQUARESIZE );     // fill with image 
}




this.newRun = function() 
{
    ABWorld.init (  SKYCOLOR  ); 

	// now that canvas exists:	

	SQUARESIZE  = ABWorld.canvas.width / 5;     // square size relative to canvas width 
	MOVESIZE    = SQUARESIZE / 20;                 // small moves per frame, lots of frames per second  
	 
	x = ABWorld.canvas.width / 2;               // initial position 
	y = ABWorld.canvas.height / 2;
	 
    dx = randomMove();                     // initial direction 
    dy = randomMove();

    img.src = SQUARE_IMAGE ;		// set up image 

    initMusic();
};



this.nextStep = function()
{
    $("#user_span1").html( "Step: " + ABRun.step );
	draw();
};


}





// --- music ----------------------------------------


var backmusic = new Audio ( MUSIC_BACK );
 

function initMusic()	
{
	backmusic.loop = true;                 // loop forever 
	backmusic.play();

	AB.standardAudioButtons ( backmusic );		// insert standard play/pause buttons 

}