Code viewer [Ancient Brain]

Code viewer for World: canvas 2d

// ==== Starter World =================================================================================================
// This code is designed for use on the Ancient Brain site.
// This code may be freely copied and edited by anyone on the Ancient Brain site.
// To include a working run of this program on another site, see the "Embed code" links provided on Ancient Brain.
// ====================================================================================================================




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






// ===================================================================================================================
// === 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  = 5;   
  
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;
}





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 
}




AB.world.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 
};



AB.world.nextStep = function()
{
    AB.msg ( "Step: " + AB.step );
	draw();
};






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

 AB.backgroundMusic ( MUSIC_BACK );