Forked from:: keim_at_Si's Arena Shooting in 100 Lines

Now you too can understand how Arena Shooting in 100 Lines works

UPDATE: Now the code is fully commented,
I have finished the remaining parts.
by the way it is nice to fit so much functionality into 100 lines
Hats off keim_at_Si!
What I have done to the code:
- renaming variables/functions
- explaining constructs
- moving functions outside the main constructor
What I haven't done:
- modifying the internal logic
- refactoring. (I am trying to perserve the original forms)
Arena Shooting in 100 Lines.
Movement;[Arrow key], Shot;[Ctrl], Slow & Head fix;[Shift]

kalevionni

forked:2
favorite:17
lines:239
license : MIT License
modified : 2010-01-27 08:38:23

Embed: Tweet

// UPDATE: Now the code is fully commented, 
// I have finished the remaining parts.

// forked from Arena Shooting in 100 Lines
// by the way it is nice to fit so much functionality into 100 lines
// Hats off keim_at_Si!

// What I have done to the code:
// - renaming variables/functions
// - explaining constructs
// - moving functions outside the main constructor

// What I haven't done:
// - modifying the internal logic
// - refactoring. (I am trying to perserve the original forms)

// Arena Shooting in 100 Lines.
//  Movement;[Arrow key], Shot;[Ctrl], Slow & Head fix;[Shift]
package {
import flash.display.*;
import flash.events.*;
import flash.filters.*;
import flash.geom.*;
import flash.text.*;
[SWF(width = "465", height = "465", frameRate = "30", backgroundColor = "#ffffff")]

public class HundredLinesArena extends Sprite {
	
	// title text
    private var title_text:TextField = new TextField();
    
    // used in enterframeEnemy
    private var level:int=0;    
	//player movieclip
    private var player:MovieClip; 
	//field?
    private var field:Sprite = stage.addChild(new Sprite()) as Sprite;
    //array for bullet movieclips
    private var bullets:Array=[];
    //array for contatining shot movieclips
    private var shots:Array=[];
//    private var ii:*;

//glows are placed into an array because they will
	//be assigned as the filter property of movieclips 
    private var blueglow:Array = [new GlowFilter(0x0000ff)]; // player and shot
    private var redglow:Array = [new GlowFilter(0xff0000)]; // enemy bullet

private var score:int=0;
    
	// ever increasing frame count
    private var cnt:int = 0;
	// a bit field for keys
    private var keys:uint = 0;
	//keymap
    private var kmap:Array=[32,16,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,4,8];
    
	//this vector server as the direction for the player
    private var unit_vector:Point = new Point(1,0);

// general movieclip setter
	// mc: the movieclip object
	// props: object that will be used to set the properites of the mc
	// color: line color
	// commands: array of 1s and 2s. 1 == moveto, 2 == lineto
	// vertices: for every command there is a number pair in this array (a coordinate)

// example:                         moveto   lineto  lineto  lineto  lineto
	// commands: [1,2,2,2,2], vertices: [-1,-1,   1,-1,   1,1,   -1,1,   -1,-1]
	// this draws a rectangle
	private function $(mc:*, props:*,color:uint = 0, 
	                  commands:Array = null, vertices:Array = null) : void {
			
		//adding the props' object properties and values to the mc movieclip
		for (var p:String in props) mc[p] = props[p];
		
		// setting the linestyle color
		if (color) mc.graphics.lineStyle(1, color, 1, false, "normal", null, null, 3);
		
		// uses the commands and the vertices arrays to pass them to drawPath
		if (commands) mc.graphics.drawPath(Vector.<int>(commands), Vector.<Number>(vertices), "nonZero");
		// http://livedocs.adobe.com/flex/3/langref/flash/display/Graphics.html#drawPath()
		
		// The enterframe function of the movieclip
		if (props.fn) mc.addEventListener(Event.ENTER_FRAME, props.fn);
		
		// if props has an 'ar' propery (which is an array)
		// mc will be added to the end of this
		if (props.ar) 
			mc.ar.push(mc);
	}

//enter frame event for the player object
    private function enterframePlayer(e:Event) : void {   // player

// 00100000b = 32 dec is the bit for the shift key
        // when shift is not pressed r = 9,
        // when shift pressed r = 6
        // r will be the amount of movement 
        var r:Number = (keys & 32)?6:9;
		
		// man... I hope your collagues don't have to read your code. so...
		// in the keys     00000100b == 4dec is the bit for the right key 
		//                 00000001b == 1dec is the bit for the left key
		//                 00001000b == 8dec is the bit for the down key
		//                 00000010b == 2dec is the bit for the up key
		//
		//   example: (keys & 4) is the bitwise AND operation.
		//            also called masking. In this case 00000100b 
		//            binary field is used. This is a mask which selects
		//            the bit for the right key.

//   the >> is the bit shift operator.
		//   here you can see why shifting by two is used together with the (keys & 4)
		//   bitmask. the (... >> 2) shifts the position 2 bit to the position 0.
		//   after the shifting the value of ((keys&4) >> 2) is either 0 or 1 depending on the bit.
		
		var keydir:Point = new Point((( (keys & 4) >> 2) - (keys & 1)) * r, 
		                             (((keys & 8) >> 3) - ((keys & 2) >> 1)) * r);
		// summary: keydir.x = 9  when right is pressed
		//          keydir.x = -9 when left is pressed
		//          keydir.y = 9 when down is pressed
		//          keydir.y = -9 when up is pressed
		//  we have 6 instead of 9 when the shift is hold.  
		
		
		
		
		// if the future position player.x+keydir.x
		// is both bigger than -390 and less then 390 then
		// add the player position the difference
		// essentially this part is responsible for
		// ensuring that the player doesn't wander outside the map
        player.x += (player.x+keydir.x>-390 && player.x+keydir.x<390) ? keydir.x : 0;
        player.y += (player.y+keydir.y>-390 && player.y+keydir.y<390) ? keydir.y : 0;

// to make sure the player stays in the center we have to move the field too
        //this would place the player to the top left corner:
        //field.x = (-player.x);         //field.y = (-player.y);
         
		//we need the 232 offset, (approx half of the 465 witdth and height)
		//to place the player to the center :
		//field.x = (232-player.x); field.y = (232-player.y);
		
		//this is the same as:
		//field.x += (232-player.x)-field.x;
		//think of that by adding the amount on the right we 
		//move the map closer to its ideal position
		
		// when we enclose this into a paren ()*0.1, we say that 
		// by each frame we move 10% closer to the ideal position
		// that helps easing the movement.
		
        field.x += ((232-player.x) - field.x)*0.1;
        field.y += ((232-player.y) - field.y)*0.1;

// if the shift is not pressed
        if (!(keys&32)) {
        	
        	//unit_vector stores the direction of the player
        	// offset actually adds to the x and y coordinates
        	//       dir.x  ==      -9, 0, 9
        	// dir.x * 0.05 ==   -0.45, 0, 0.45
        	
        	
        	// this is how the smooth turning works.
        	// by always adding(the offset) the keydir*0.05 (-0.45,+0.45) and normalizing it,
        	// the unit_vector will get closer to the keydir direction with each frame.
        	// http://en.wikipedia.org/wiki/Euclidean_vector#Addition_and_subtraction
        	// here keydir is the vector defined by the arrow keys
        	// and the unit_vector is the actual direction of the player
            unit_vector.offset(keydir.x*0.05, keydir.y*0.05);
            unit_vector.normalize(1); // make vector length 1
            
            // it is an interesting question why the player can do a 180 degree
            // turn after advancing in one direction.
            // the answer is simple: after the first turn the unit vector perserves
            // a little bit of the previous direction. This is because the fact, that by
            // adding to one (I) vector to another (J) many times won't make (J) point to
            // the exact same direction as (I). So, when you see your player advancing to
            // the right, the unit_vector.x is usually not exactly 1.
            
            // Ofcourse if you don't add that another direction into your unit-vector
            // the 180 degree turn won't be possible. This is the reason that right after
            // start when you press the LEFT key, the player won't do the 180 deg turn.
            
            // to investigate the issue more uncomment the following line (I have added
            // my wonderfl_trace to the code) then move left and right, notice that x 
            // remains 1, now move up and down a bit and see how it works
            // trace("unit_vector.x: " + unit_vector.x)
             
			
			//rotates the player into direction
            player.rotation = Math.atan2(unit_vector.y, unit_vector.x)*(180/Math.PI);
        }
		
		// kf&16 is true when CTRL is down
		// cnt is increased by one on every frame
		// cnt&1 is true if the first bit of cnt is 1 and that happens every other frame

if (!title_text.visible && (keys&16) && (cnt&1)) {    // create shot
            var shotprops:Object=
		      {x:player.x,y:player.y,    //same pos as player
			  v:new Point(unit_vector.x*24,unit_vector.y*24), 
			  						     // v for commonMoveObject, the perframe move
			                             // go same direction as player, 24 unit/frame
			                             
			  rotation:player.rotation,  // face the same direction as player
			  r:0,                       // rotation per frame is none (needed by commonMoveObj)
			  filters:blueglow,          // ... yeah. right.
			  fn:commonMoveObject,       // use the commonMoveObject
			  ar:shots};                 // add every shot to the shots array
            					  
            //now let's draw our rectangle-buster, blue beams, this should be obvious
            $(field.addChild(new MovieClip()), shotprops, 0x80ffff, [1,2,1,2], [6,6,-6,6,6,-6,-6,-6]);
        }
    }
        
	private function enterframeExplosion(e:Event) : void {   // explosion
	    if ((e.target.alpha = (--e.target.cnt)*0.03) == 0) kill(e.target);
	    else {
	        e.target.v.x *= 0.95; // v is the velocity vector for the partice. 
	        e.target.v.y *= 0.95; // this is code for slowing the particles to 95% every frame
	        commonMoveObject(e);
	    }
	}

private function commonMoveObject(e:Event) : void {   // common motion
		// used for movieclips with both an r (rotation per frame)
		// and a v.x & v.y property (movement per frame)
		
		// here event.target is the movieclip which the event belongs to
		// the r propery is set by the $ function and it is the per frame rotation
		// for a particular object
        e.target.rotation += e.target.r;
		
		// v is a vector which has an X and an Y propery
		// and it defines the per frame movement for the object
        e.target.x += e.target.v.x;
        e.target.y += e.target.v.y;
		
		// objects wandering outside the x[-400;+400] y[-400;+400] territory will be killed.
        if (e.target.x<-400 || e.target.y<-400 || e.target.x>400 || e.target.y>400) kill(e.target);
    }

// The distance between t and every object in the list array
	// will be calculated. If that distance is lower then
	// the sqare root of r2 (r2 == distance^2) then
	// t.life will be decreased
	// if t.life falls below 1, hit returns true
    private function hit(t:*, list:Array, r2:Number) : Boolean {   // hit evaluation
    
    
    // t.l seems to be the life of the t object
    // 
    //                                                             /|
    // http://en.wikipedia.org/wiki/Pythagorean_theorem         /   |
    // a^2 = (list[i].x-t.x)*(list[i].x-t.x)               c /      | b
    // b^2 = (list[i].y-t.y)*(list[i].y-t.y)              /         |
    // c^2 = r2                                        /____________|
    //                                                        a
    // condition (a^2 + b^2 < r2)
    // is the same as (square_root(a^2 + b^2) < sqaure_root(r2)) where
    // square_root(a^2 + b^2) is the distance between the 2 points
    //
    // The condition in the if is essetially responsible for calculating 
    // the distance between the t object and each element in the list array
    // if the distance is less then square_root(r2)
    // then kill the colliding object in the list
    // and decrease the life of the t object
    // if life falls below 1, return ture 
    
    
        for (var i:int = 0; i<list.length; i++) // iterating over the list.
            if ((list[i].x-t.x)*(list[i].x-t.x)+(list[i].y-t.y)*(list[i].y-t.y) < r2) {
                kill(list[i]);
                if (--t.life <= 0) return true;
            }
        return false;
    }

private function kill(mc:*) : void {   // kill object
		
		// a very ugly way to detach the movieclip from its parent and remove its
		// enterframe event in one step
        mc.parent.removeChild(mc).removeEventListener("enterFrame", mc.fn);
		
		// if the mc has an array element (which also means that it is part of that array)
		// then remove
        if (mc.ar) mc.ar = mc.ar.splice(mc.ar.indexOf(mc), 1);
    }

private function enterframeEnemy(e:Event) : void {   // enemy
    var i:int;
        e.target.cnt++; // increase the cnt propery of the enemy. cnt stores the number
                        // of frames an enemy is staying on the scrren
                        
        // (!title_text.visible): if the game is on 
        // !(e.target.cnt % (80-level)): 
        // and if the enemy's frame counter (e.target.cnt) is divisible by (80-level)
        // % is the division-remainder operator, the remainder is 0 when the stuff is divisible.
        // "!" inverts truthvalue
        // so, if level is 0 then this will be true every 80th frame
        // by each level the bullets are coming more and more rapidly            
        if (!title_text.visible && !(e.target.cnt % (80-level))) {  // create bullet
            var v:Point = new Point(player.x - e.target.x, player.y - e.target.y); 
            // v is pointing to the player
            
            //http://livedocs.adobe.com/flex/3/langref/flash/geom/Point.html#normalize()
            v.normalize((Math.random()*0.06+0.03)*(50+level)); 
						   // random and level defines the length of the vector
                           // pointing to the player
                           // and this lenth will be used to set the per frame
                           // advancing
            
            var bulletprops:Object =  
            {x:e.target.x, y:e.target.y, // parent pos 
            v:v,                         // previous v
            r:-5,                        // slow counterclockwise rotation
			fn:commonMoveObject,         // give it the commonMoveObject as enterframe event 
			ar:bullets,                  // place it to the bullets array 
			filters:redglow};            //glow glow
            
            // I have detailed quite a few of these calls, check the $ function and other $ calls.						
            $(field.addChild(new MovieClip()), bulletprops, 0xffffff, [1, 2, 2, 2, 2], [3,3,-3,3,-3,-3,3,-3,3,3]);
        }
        
        // check the enemy and the shots for collision.
        // if shot distance <= 20 then destroy, check the description of hit.
        if (hit(e.target, shots, 400)) {  // destruction
            kill(e.target);
            
            // in the following line increase the score
            level = (++score<30) ?                //if score < 30  then 
            				(score*2) :           //level = score * 2
            				   (score<60) ?       //else if score < 60 then
            				     (score*0.5+45)   // level = score*0.5+45
            				          : 75;       // else level = 75

// now an enemy dies. here is the part for creating the nice explosion effect            				          
            for (i=0; i<8; i++) {   // create particles (8)
                v = new Point(Math.random()*16-8, Math.random()*16-8); 
                //each around the enemy x:+-8 y:+-8
                
                var particleprops:Object = 
					{x:e.target.x, y:e.target.y, //same position as enemy 
					v:v,  // same velocity vector
					r:20, // 20 rotation (have you noticed? they are all rotating clockwise)
					fn:enterframeExplosion, // give them their enterFrame function 
					cnt:30, // this is the count used to control the fadeout effect
					filters:blueglow}; //.. yeah yeah. Nice glow!
                							
                //if this is not trivial, check out other descriptions of the $ call.  							
                $(field.addChild(new MovieClip()), particleprops, 0x80ffff, [1, 2, 2, 2, 2], [5,5,5,-5,-5,-5,-5,5,5,5]);
            }
        }
        // the enemies user the commonMoveObj to rotate (r per frame) and 
        // move towards their (v.x, v.y) direction
        
        // every frame
        commonMoveObject(e);
    }

function HundredLinesArena() {
    	WTrace.initTrace(stage);
    	
        var i:int;

// score board
        var scoreboard:TextField = new TextField();

$(title_text,{
            x:180,
            y:230,
            htmlText:"<font color='#406080' size='40' face='_sans'>100Lines Arena</font>",
            width:282
            });
        
        
        addChild(scoreboard);
        addChild(title_text);
        
        // check out bitwise operators to understand how this works.
        // in short: each bit is responsible for storing a key status
        // later you find some more detail, but this is fairly easy to
        // understand if you know the operators and binary arithmetic
        stage.addEventListener(KeyboardEvent.KEY_DOWN,
                     function(e:KeyboardEvent) : void { keys |=  kmap[e.keyCode-16]; }); //set bit
                               
        stage.addEventListener(KeyboardEvent.KEY_UP,  
                     function(e:KeyboardEvent) : void { keys &= ~kmap[e.keyCode-16]; }); //clear bit
        
		// Enter Frame Function
		addEventListener(Event.ENTER_FRAME, 
            function(e:Event) : void {
               scoreboard.htmlText="<font color='#80c0ff' size='20' face='_sans'>Score:" + String(score) + "</font>";
            if (title_text.visible && cnt>30 && keys!=0) title_text.visible = Boolean(level = score = 0);
            
            // yuck!
            // first, when the title_text is not visible it means that the game 
            // is on (!title_text.visible)
            
            // then we have (title_text.visible = !(player.visible = !hit(player, bullets, 36)))
            // lets start from the inside
            // player.visible = !hit(player, bullets, 36)
            // hit compares the distance^2 of each bullet to the player 
            // so, if a bullet is 6 unit or closer to the player, 
            // then the hit returns true (otherwise hit returns false)
            
            // when hit returns true, the player.visible gets false
            // and then title_text.visible gets true.
            // and this is our second condition.
            // to roll it  back: 1. when the game is on (title_text invisible)
            //                   2. and the player gets a hit (hit returns ture)
            //                   3. then hide player (!true)
            //					 4. then show the title_text (game off)
            //                   5. reset cnt (the global frame count)
            if (!title_text.visible && (title_text.visible = !(player.visible = !hit(player, bullets, 36)))) cnt = 0;

// cnt is ever growing
			// cnt&31 masks all the bits above the 5th bit, since & is the logical AND operator
			// 31 dec == 11111 bin
			// this means that cnt&31 selects the value of the first 5 bit of cnt
			// !(++cnt)&31 evaulates to true when (++cnt)&31 == 0, that is all the 5 bits are zero
			// this happens every 32th call of (++cnt)&31, approx every sec with framerate 32
			
            if (!((++cnt) & 31) && !title_text.visible) {

// r is a random number between 0-32
                var r:Number = Math.random() * 32;
				
				//The x position of the enemy depends on r
				//summary:
				// this expression
				// has 4 possible outcomes
				// for the x depending on the value of r
				// r[24..32[ : x = 0
				// r[16..24[ : x = 8
				// r[8..16[  : x = r - 8  //means x gets a random value between [0..8[
				// r[0..8[   : x = r      //means the same thing
                var x:Number = (r >= 24) ? 							// if r >= 24 then
											0: 						//  x = 0
											(r >= 16) ? 			// else if r >= 16
													8:				//  x = 8 
													(r >= 8) ?      // else if r >=8
														(r - 8) :   //  x = r-8
														r;          // else x = r
				
				// another one of these ugly bastards
                var y:Number = (r<8) ? 								// if r < 8 then
            						0:								//  y = 0
            						(r<16)?							// else if r < 16 then
            							8:							//  y =8
            							(r<24)?						// else if r < 24 then
            								(r-16):					//  y = r - 16
            								(r-24);					// else y = r - 24
            								
            	// if you look closely you will notice that the above stuff makes
            	// sure that one position will be on the side of the map
                
                var enemyprops:Object = 
						{x:x*100-400, y:y*100-400, 
						v:new Point(4-x,4-y), //direction of the enemy, 
											// ensures it proceeds towards the inner side of the map  
						fn:enterframeEnemy, // enemy enterframe
						cnt:0, 				// enemy cnt: number of frames he has been on the screen
						r:5,				// enemy rotation per frame 
						life:3,	 			// enemy life, decrease with every hit
						filters:redglow};	// enemy glow
                $(field.addChild(new MovieClip()), enemyprops, 0xffff80, [1, 2, 2, 2, 2], [20,20,  20,-20,  -20,-20,  -20,20,  20,20]);
            }
        });
        
        // creating the 8x8 field
        for (i=-400; i<=400; i+=100) 
               //$(field, {rotationX:-30}, 0x80c0ff, [1,2,1,2], [-400,i,400,i,i,-400,i,400]);
               $(field, 
			     {rotationX: -30 }, // -30: the tilt of the map
				                    // you can add z: 500 to increse the view distance
									// remove or decrese the rotation by changing rotationX
									
				 0x80c0ff,          // color
				 [1,2,1,2] // 1 == moveto, 2 == lineto
				  , 
				 [ -400, i, //moveto   //
				   400, i,  //lineto
				   i, -400, //moveto
				   i, 400]  //lineto
				 );
        
		
			   
		//This is the creation and the setting up of the player object
		//me is the variable which holds it
		
		// field is a movie clip (field)
		// field.addChild return the object
		// which gets passed to $
        $(  field.addChild(player = new MovieClip()), 
		    {fn:enterframePlayer,	// enter frame function 
		    life:0, 				// life. you can use 1 too. its the same. hit checks if life <= 0
		    						// so, the player dies after the hit anyways
		    						// I guess he used l:0 to make it harder to understand what it is ;)
		    filters:blueglow }, 	// filter
			0x80ffff, //color
			[1,2,2,2], //commands: 1 == moveto, 2 == lineto
			
			 [ -9, 6,   //moveto
			   -9, -6,  //lineto
			    9, 0,   //lineto
			   -9, 6]   //lineto
			);
        
  
    } // function HundredLinesArena (constructor)
} // class
} // package

///////  WONDERFL TRACE //////
import flash.display.Sprite;
import flash.display.Stage;
import flash.text.TextField;
import flash.text.TextFormat;

//global trace function
var trace:Function;

//wtreace class
class WTrace
{
        private static var FONT:String = "Fixedsys";
        private static var SIZE:Number = 12;
        private static var TextFields:Array = [];
        private static var trace_stage:Stage;
        
        public static function initTrace(stg:Stage):void
        {
            trace_stage = stg;
            trace = wtrace;
        }
        
        private static function scrollup():void
        {
            // maximum number of lines: 100
            if (TextFields.length > 100) 
            {
                var removeme:TextField = TextFields.shift();
                trace_stage.removeChild(removeme);
                removeme = null;
            }
            for(var x:Number=0;x<TextFields.length;x++)
            {
                (TextFields[x] as TextField).y -= SIZE*1.2;
            }
        }
    
        public static function wtrace(... args):void
        {
        
            var s:String="";
            var tracefield:TextField;
            
            for (var i:int;i < args.length;i++)
            {
                // imitating flash:
                // putting a space between the parameters
                if (i != 0) s+=" ";
                s+=args[i].toString();
            }

tracefield= new TextField();
            tracefield.autoSize = "left";
            tracefield.text = s;
            tracefield.y = trace_stage.stageHeight - 20;

var tf:TextFormat = new TextFormat(FONT, SIZE);
            tracefield.setTextFormat(tf);
            trace_stage.addChild(tracefield);
            scrollup();                      
            TextFields.push(tracefield);
            
        }
}

Code Fullscreen

Preview Fullscreen