Getting past point A

Hybrid View

  1. #1
    Marios's Mustache Wax Reputation: 10

    Join Date
    Aug 2010
    Location
    Surrey, UK
    Posts
    1
    Rep Power
    0

    Question Getting past point A

    Ok, here's the deal.
    I'm remotely familiar with html scripts. after spending 10 years messing around with online games, and making garbage with frontpage express... I've decided to put my lack of skills into making myself an experimental browser game.
    I've quickly realised that would be humanly impossible with programs that are specifically just for html page making, and have started learning html language.

    I'm already getting stuck. I can do most display-based presentations, but can't figure out how to include much of anything else.

    how can I set up values? strings? how can I use input? how can I set up 'if else' or 'if then' variables?
    Now someone mentioned to me it would have to be done with javascripting, rather than html, since html doesn't have such 'complex' capabilities.
    Kinda makes me miss the ZX Spectrum.

    Now my head is spinning and I am getting lost in the 90 billion tutorials online. I can't find anything past IMG SRC and BODY online. lolz!

    So where do I start? Please help...

  2. #2
    Crumbly, yet Good Reputation: 75
    Eriond's Avatar
    Join Date
    May 2006
    Location
    Montreal
    Posts
    1,798
    Rep Power
    0

    Default

    I found this website to be really good. It gives a whole ton of information about a number of languages.

    The ones you'll want to look at, are, as someone already told you, JavaScript or another language called PHP.

    Basic HTML as far as I know is completely static; i.e., you can't really do much with user input, or change the webpage to suit your needs once the page is up. PHP, runs on the server and allows you to modify the HTML that your webserver sends when it's requested, based on input from previous pages (forms, buttons, links), as well as the ability to write files, modify databses, and more, every time a page is requested. JavaScript, which I'm less familiar with, runs in your browser, and generated events based on a user's actions on a page.

    If you're looking to do a mostly text-based game, I'd say go with PHP. Otherwise, go with JavaScript. Of course, you can use both in tandem, with no problems. You can even generate javascript code through PHP.

    So yeah; look at that website, and checkout the JavaScript/PHP tutorials.
    THIS MA SIGNATURE

  3. #3
    Marios's Mustache Wax Reputation: 10

    Join Date
    Sep 2010
    Posts
    2
    Rep Power
    0

    Default Free Source Code

    The below code is a javascript 'engine' if you will that I've been writing in my free time. I've had a couple years of experience with programming, but that was in high school back in 03/04. When I say 'free time' I kinda mean - whenever I feel like it I'll add something new to it. haha


    This is my grass image file.

    This is degraded grass version 1.

    This is the degraded grass version 2. More like mud...


    Feel free to make any player image you want. You just need to name it 'player.jpg'.

    These images go in the same directory level as the .html file if you indeed use the below code.




    This was designed for use in Internet Explorer 8 ONLY.

    I have both Firefox4 and Google Chrome on my machine and neither is able to execute the javascript as intended. It's not a game, but more so an 'engine' in my opinion. I'm practicing my logic coding abilities with a syntax that offers a direct graphical depiction... as well as one that I know. Otherwise I'd have done this in opengl // directx (with c++).


    If you or anyone for that matter has issues understanding my coding or comments please let me know. I will clear up the misunderstandings. This isn't spell checked NOR have I double checked that a variable (specifically global ones) are not outdated. Could of sworn I saw a rogue variable or two that I don't use anymore as I removed their functions.

    The code does currently work as is though.


    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    <!--
    
    /*NOTE: Use Ctrl+F and search for TESTLATER to find code that might be pointless.  Delete it, save, reload, and see if all works without.*/
    
    
    
    
    
    /*---------------------------------------*/
    /*The current running list of global variables necessary are: gblx, gbly, xyposition, xynumber, history, x, y, timeframe, & time*/
    /*---------------------------------------*/
    var timeframe=0;
    	//Based on 10 second intervals, this variable increases as the game time goes by. Displayed in ghost text box within page.
    var time;
    	//A hidden element of time only seen in the code. Creates a 10 second delay between each reiteration of the startTime function.
    var xyposition = new Array();
    	//this is the array that will store all the unid tile IDs that we've stepped on, eventually it gets sorted in the history function
    var xynumber = new Array();
    	//this is the array that stores purely the occurance numbers of each unid id in the xyposition array, the counting occurs in the history function
    var gbly = new Array();
    	//this is the global y array used for the playing field creation and coloring too
    var gblx = new Array();
    	//this array is our global x variable that is used for making our playing field and coloring it
    var x;
    	//The player's X coordinate. Often updated or looked at within other functions.
    var y;
    	//The player's Y coordinate. Often updated or looked at within other functions.
    var history = new Array();
    	//this is the history array for all movements made by our player, it is called upon in the history function, sorted, and then scrawled through
    	//in order to present data to the xyposition and xynumber arrays
    var original;
    	//The original variable is storing the tile that you are stepping onto and off of to preserve it's appearance in regards to what it
    	//was before you stepped on it.  That way grass remains grass, and dirt remains dirt.
    var saveface;
    	//Comically named this because we want to save the direction the player is facing to a variable for when the degrade function runs.
    	//Currently the degrade function is drawing on our character so this variable will be called at the end of the function to ensure that
    	//if the player is standing on a degraded tile, he will not change into that tile during the function.
    /*---------------------------------------*/
    
    
    /*---------------------------------------*/
    /*Game Load - Function-------------------*/
    /*---------------------------------------*/
    function load()
    {
    startTime();
    	//Start in game time.
    loadMap();
    	//Load the statically defined(size) map.
    loadTextures();
    	//Loads game textures. Grass for now.
    loadPlayer();
    	//Loads the player into the playing field instantly at the coodrinates 1,1.
    }
    /*---------------------------------------*/
    
    
    
    
    
    
    
    
    
    /*---------------------------------------*/
    /*This is the game time.  The world clock if you will.
    This should be the first piece of code that runs when
    the webpage starts.  I'll edit it to eventually flow 
    in that order.  When time starts in the game, then it
    can call on all other functions in the game that need
    to run such as the creation of the player field if I 
    decide to make that an automatic process.  Essentially
    this code runs and grabs the gametime which starts at 
    0 and it adds one to it every ten seconds.  That is 
    because this function is rerun every ten seconds which 
    means that anything that should only happen once, such 
    as the world creator function, insRow, should never be 
    called within this function unless it is isolated.  I 
    don't need such functions sucking up resources.  We 
    have a local variable call environment counter that will
    cycle through the history array based on it's length.
    (this might be a flaw since history by default is much 
    larger than xynumber which is the counter for how often
    a single tile is stepped on meaning i might should 
    consider revising which arrays I call on.  
    environmentcounter will cycle through the length of history
    array and we have two variables that take the xynumber
    and the xyposition. these two new local variables are 
    'number' and 'position'. if number which is the new local 
    variable for occurance is greater than 5, a picture of our
    player image will be placed on the tile associated with 
    the current unid ID loaded into the 'position' variable 
    which represents the current unid tile ID seen in our 
    xyposition array at that time. otherwise nothing happens,
    hence the empty else statement*/ 
    /*---------------------------------------*/
    function startTime()
    {
    
    document.getElementById('gametime').value=timeframe;
    	//This is purely an ingame clock based on the 10 second timer.
    timeframe=timeframe+1;
    	//And this is the contents of that clock.  It happens every 10 seconds.
    time=setTimeout("startTime()",10000);
    	//Here is our timer which re runs the startTime function every 10 seconds.
    
    degrade();
    	//Our degeneration function.
    	//Currently used with terrain.
    }
    /*---------------------------------------*/
    
    
    
    
    
    
    /*---------------------------------------*/
    /*Terrain degeneration*/
    /*---------------------------------------*/
    function degrade()
    {
    var counter;
    	//I'm using this variable to run through all the values stored in the history array below in the for loop.
    var number;
    	//This variable becomes whatever the contents of the stored location in our history array is within the for loop.
    var position;
    	//Down below, this variable is converted from a number to a string to access the Uniq ID of our coordinates on the playing field.
    var xsaveface= history.length; 
    	//I gave this variable a funny name because I wanted to make sure the player image file is not over written when degrading the tiles.
    for (counter=0;counter<history.length;counter++)
    	//For loop that runs through the entire history array.
    	{
    number = history[counter]
    	//Making the 'number' variable take on whatever contents the history array is currently at based on the 'counter' variable.
    		if (counter < 10)
    			//If the counter is less than 10, we don't want to store a 'not a number' NULL value into our coordinate X position.
    		{
    			position = 0 + "" + counter;
    				//So if our numerical value is less than two digits long(x and y) then we will add a 0 and a non space character
    				//to it in order to make it a string with two digits(0 and 1-9)
    		}
    		else
    		{
    			position = counter + "";
    				//This is us taking the numerical value of 'position' and turning it into a string by adding a non space character.
    		}
    		
    		if (number > 3) 
    			//Here's the degraded terrain feature of our proof of concept game.
    			//If number, the value stored in a Uniq position within our history array
    			//based on the number of times a Uniq coordinate(tile) has been stepped on
    			//is seen to be larger than whatever value is listed in the if statement
    			//above, we will do whatever code follows.  In this case, we switch the
    			//uniq ID terrain tile with an update tile.
    			{
    
    				document.getElementById(position).background="grass2.jpg";
    					//This is our terrain file becoming degraded due to usage.
    				
    				if (counter == xy) //when we get to the coordinate in the history file that our player is standing on...
    					{
    						original="grass2.jpg"
    							//we need to make sure that our 'memory' tile is updated correctly if it's been stepped on enough
    					}
    			}
    
    		if (number > 5)
    	
    			{
    	
    				document.getElementById(position).background="grass3.jpg";
    					//A higher level of degradation!
    				
    				if (counter == xy) //when we get to the coordinate in the history file that our player is standing on...
    					{
    						original="grass3.jpg"
    							//we need to make sure that our 'memory' tile is updated correctly if it's been stepped on enough
    					}	
    			}
    
    		if (counter + 1 == xsaveface)
    			{
    
    				document.getElementById(xy).background=saveface;
    
    			}
    	
    	}
    
    }
    /*---------------------------------------*/
    
    
    
    
    
    
    
    
    /*---------------------------------------*/
    /*The loadMap() function is used on page load 
    currently(8/8/2010) in order to load a static 
    playing field.  it does this by using two for 
    loops, one internal to the other.  both of these 
    for loops are statically defined to be 10 
    reiterations in length which will account for 
    100 reiterations of the code 'within'.  the code
    referred to is specifically used to assigned a 
    visible value to the cells of a table that is 
    being generated by the code.  each iteration of 
    the code will create a cell within the table or 
    a new row for cells to be placed in.  after a 
    cells creation it is then filled with it's unique
    identifier so that we may call on it later without
    worrying about affecting other cells on the table.
    the cell's unique id is displayed visually currently.*/
    /*---------------------------------------*/
    function loadMap()
    {
    var locy=0;
    	//a local variable, used to represent the y coordinate in our table as a coordinate
    		
    		for (x=0;x<10;x++)
    			//for loop to statically define our initial table to only be 10 cells wide
    			
    			{
    				var locx=0;
    					//a local variable, used to represent the x coordinate in our table as a coordinate
    				var spanx = document.getElementById('myTable').insertRow(0);
    					//runs within the outer for loop to add new rows to our table
    					for (z=0;z<10;z++)
    						//internal for loop statically defined as 10 cells in height
    						{	
    								var c=locx + "" + locy;	//local variable that will allow us to merger x and y coordinates as a single #
    								var spanc = spanx.insertCell(0); 
    									//spanc(spancell)is a variable that's used to  
    									//adjust features of each new cell that we add
    								spanc.id=c;
    									//now we identify each cell with it's X and Y coordinate, these are unique
    								spanc.width="24";
    								spanc.height="24";
    									//we set the size of the cell's width so we can see it clearly
    								spanc.innerHTML=c;
    									//currently this is used to see the uniq ID of each cell
    								
    								locx++;
    									//now we cycle our X coordinate by positive 1 to start the next cell
    						}
    				gblx = gbly = (gbly.concat(locy));
    					/*so the global variables for our coordinate system are two seperate arrays.
    					one of them is called gblx(global x) and the other gbly(global y).  They
    					are global because I intend on referencing them at some point in time for
    					specific purposes such as collision detection.  This piece of code takes
    					the current uniq ID that is being generated for the Y variable and adding
    					it to the global Y array and at the same time it copies it to the global X
    					array as well.  This code will eventually have to be rewritten to support
    					the idea of our global X and Y not being the same sizes.*/
    				locy++;
    					//add one to global Y variable because we finished the 10 cell deep for loop from above and need a new row now
    				
    		}
    
    var i = (locy * locx);
    	//Variable 'i' is storing the size of our playing field so we can prefil our movement history array 'history' with zeros(numbers) for later calculations
    var j;
    	//Variable 'j' is our incrementer for the history array
    for (j=0;j<i;j++)
    	//Our loop lasting as long as it takes to get the entire playing field in the array.
    	{		
    		
    		history[j] = 0;
    			//This is us presetting history arrays values to zero during the map load.
    	}
    }
    /*---------------------------------------*/
     
     
    
    
    
    
    
    
    
    
    
    /*---------------------------------------*/
    /* Load Textures Function ---
    The below function is created for the purpose of taking our predesigned table and appending 
    a grass jpeg image as the background to each individual cell in the table.  We use the global
    variable for 'x' and 'y' which were defined within the insRow function as being 10 in size and use
    those within a for loop below to match the original table design size.  This way our for
    loop below will only attempt to color table cells that actually exist currently.*/
    /*---------------------------------------*/
    function loadTextures()
    {
     
    var j=0;	
    	//a local variable that we will adjust to change the position we are at in our global array
    	
    	for (x=0;x<gbly.length;x++)
    		//for loop for global variable 'y'
    	
    			{
    			var i=0;
    				//a local variable that we will adjust to change the position we are at in our global array
    	
    					for (z=0;z<gblx.length;z++) 
    						//for loop for global variable 'x'
    							{	
    								var a=gblx[i];
    									//'a' represents each position of global array 'x'
    								var b=gbly[j];
    									//'b' represents each position of global array 'y'
    								var combine = a+""+b;
    									//'combine' is created this way so as to not ADD the two digits
    									//this allows us to represent the elementID specific to each table
    									//cell because they were defined uniquely in the insRow function above.
    								document.getElementById(combine).background="grass.jpg";
    									/*alert(combine);//For Debug reasons
    									as you can see we are taking the combine
    									variable to single out each cell at a time
    									starting with the lowest row per depth and
    									increasing by one each time.*/
    								document.getElementById(combine).innerHTML="";
    									//Hide the Unique ID for the tiles in our game.
     
    								i++;
    									/*'i' will increase by one each time this 'z' for loop continues
    									allowing us to slide one place higher in the global 'x' array.
    									Basically the entire 'z' for loop starts by taking 10 cells at a time
    									changes their background images to grass.jpg.  This starts with [0.0].
    									After the first run through of the loop, it naturally adds 1 to 'z' and 
    									continues running like this until 'z' = the global 'x' value of 10. 
    									Now that 'i' has become 1(because of i++), we will take	all of the cell's
    									with an ID of 1.# and change their background images.  This will take place
    									when this for loop starts again.*/
    				}
    				j++;
    				
    	}		
    		
    		
    }
    /*---------------------------------------*/
     
     
    
    
    
    
    
    
    
    
    
    
    
    
    
    /*---------------------------------------*/
    /*The loadPlayer function is created to give us a way to interact directly with our 
    table in a game environment.  This code simple takes the user's input coordinates from two 
    seperate text boxes and if they exist on the playing field as unique XY locations(notice that
    it has to be both an X AND Y location that exists) then a player will be 'spawned' there.*/
    /*---------------------------------------*/
    function loadPlayer()
    {
     
    var a = 1;//Player's static starting location on the X axis.
    var b = 1;//Player's static starting location on the Y axis.
    
    var c=a+ "" +b;
    	//Player's combined XY location using a nonspace character in between to keep from adding the coordinates by accident.
    original = document.getElementById(c).background;
    document.getElementById(c).background="player.jpg";
    	//Now we are taking our unid ID coordinate and choosing the appropriate cell with the cooresponding ID and changing it's image to player.jpg
    x=a;//Passing our static variables to our global variables just to update them.
    y=b;//Same as x=a above; this might be pointless to have in here, will TESTLATER.
    
    }
    /*---------------------------------------*/
    
    
    
    
    
    
    
    
    
    
    
     
     
    /*---------------------------------------*/
    function keycheck(e)
    {
    var key;
    
    var first;
    	//'first' takes the storage of the tile name out of our global memory 'original'.
    var second;
    	//next is a variable to store the next tile without compromising the original tile that is saved globally based on any direction movement.
    var a;
    	//This variable is going to represent the place of the Uniq value location inside the history array.
    var b;
    	//This variable used to add a number in the array location that 'a' currently is.
    var playerx=x;
    	//Takes our global X coordinate and pulls it to use in this function.
    var playery=y;
    	//Takes our global Y coordinate and pulls it to use in this function.
    var playerxy=playerx+ "" +playery;
    	//this local variable takes the two variables from above and places them side by side using a non space character so as to not add them
     
    	key=e?e.which:window.event.keyCode;
    		//a little bit of javascript code that detects keys
    		switch(key)
    			//switch statment used to determine the key pressed and execute it's respective code
    		{
    			case 37:
    				//left arrow key numerical #
    			if (x > 8)
    				//this is a very simple collision detection, since x is our global coordinate variable
    				//if it is larger than our static table's deminsion then we do nothing
    				{
    				break;
    					//this is us doing nothing when we attempt to move left when 1 tile away from the far left tile
    				}
    			else
    				//this is us doing something when we aren't too far to the left
    			{
    			xy=x+""+y;
    				//calculate the coordinates of x and y
    			document.getElementById(xy).background=original;
    				//replace the player image with the one saved in memory
    			x++;
    				//this is us adding one to our x coordinate
    			a = (x*10) + y;
    				//Here we take our coordinates as a number value rather than a string. Notice x is multiplied by ten to assume the first space
    				//In the sequence of XY.			
    			b = history[a];
    				//This is the 'b' variable becoming equal to the location within our array, whether that's a 0-infinite.
    			b+=1;
    				//Now we increment because we stepped on something.			
    			history[a]=b;
    				//And we replace the previous value with the new one.
    			xy=x+""+y;
    				//and now we update our variable 'xy' which doesn't seem to be defined locally or globally. i'll need to research this...
    			original = document.getElementById(xy).background;
    				//This saves the original texture image file to global memory so that any direction can pull it.
    			document.getElementById(xy).background="playerwalkleft.jpg";
    				//and this is use replacing the tile we just moved to with our new graphic of our player
    			saveface=document.getElementById(xy).background;
    				//saving the appearance of our character for when the degrade function finishes running
    			break;
    				//ok, that's enough code for this movement, break time
    			}
     
    
    
    
    
    
    			case 38:
    				//this is up arrow key
    			if (y > 8)
    				//this is a very simple collision detection, since y is our global coordinate variable
    				//if it is larger than our static table's deminsion then we do nothing
    				{
    				break;
    					//once again, us doing nothing
    				}
    			else
    				//this is us doing something when we aren't too close to the top of our playing field
    			{
    			xy=x+""+y;
    				//calculate the coordinates of x and y
    			document.getElementById(xy).background=original;
    				//replace the player image with the one saved in memory
    			y++;
    				//this is us adding one to our y coordinate
    			a = (x*10) + y;
    				//Here we take our coordinates as a number value rather than a string. Notice x is multiplied by ten to assume the first space
    				//In the sequence of XY.			
    			b = history[a];
    				//This is the 'b' variable becoming equal to the location within our array, whether that's a 0-infinite.
    			b+=1;
    				//Now we increment because we stepped on something.			
    			history[a]=b;
    				//And we replace the previous value with the new one.
    			xy=x+""+y;
    				//and now we update our variable 'xy' so we know where we just moved to when we reference the player image load below
    			original = document.getElementById(xy).background;
    				//This saves the original texture image file to global memory so that any direction can pull it.
    			document.getElementById(xy).background="playerwalkup.jpg";
    				//player image load occurs here using the updated 'xy' location
    			saveface=document.getElementById(xy).background;
    				//saving the appearance of our character for when the degrade function finishes running
    			break;
    				//and we're through
    			}
     
    
    
    
    
    
    			case 39:
    				//now we are looking at the right arrow key
    			if (x < 1)
    				//and if we move too far to the right, we stop doing all actions within this specific if area
    				{
    				break;
    					//see, we did nothing
    				}
    			else
    				//but if we didn't move too far to the right, we can do this stuff below
    			{
    			xy=x+""+y;
    				//calculate the coordinates of x and y
    			document.getElementById(xy).background=original;
    				//replace the player image with the one saved in memory
    			x--;
    				//update the global x coordinate so our player image knows where to load itself
    			a = (x*10) + y;
    				//Here we take our coordinates as a number value rather than a string. Notice x is multiplied by ten to assume the first space
    				//In the sequence of XY.			
    			b = history[a];
    				//This is the 'b' variable becoming equal to the location within our array, whether that's a 0-infinite.
    			b+=1;
    				//Now we increment because we stepped on something.			
    			history[a]=b;
    				//And we replace the previous value with the new one.
    			xy=x+""+y;
    				//update our reference variable for our x and y coordinates
    			original = document.getElementById(xy).background;
    				//This saves the original texture image file to global memory so that any direction can pull it.
    			document.getElementById(xy).background="playerwalkright.jpg";
    				//this is us moving the player image file to the new x and y coordinate
    			saveface=document.getElementById(xy).background;
    				//saving the appearance of our character for when the degrade function finishes running
    			break;
    				//nothing more needs to be done here
    			}
     
    
    
    
    
    
    			case 40:
    				//this is the down arrow key, the final movement key thus far
    			if (y < 1)
    				//this is if we move too far down on the playing field
    				{
    				break;
    					//this is us doing nothing when we push the down arrow key while too far south on the playing field
    				}
    			else
    				//this is us wanting to do something since we are not too far south
    			{
    			xy=x+""+y;
    				//calculate the coordinates of x and y
    			document.getElementById(xy).background=original;
    				//replace the player image with the one saved in memory			
    			y--;
    				//us updating the global y coordinate for us later
    			a = (x*10) + y;
    				//Here we take our coordinates as a number value rather than a string. Notice x is multiplied by ten to assume the first space
    				//In the sequence of XY.			
    			b = history[a];
    				//This is the 'b' variable becoming equal to the location within our array, whether that's a 0-infinite.
    			b+=1;
    				//Now we increment because we stepped on something.			
    			history[a]=b;
    				//And we replace the previous value with the new one.
    			xy=x+""+y;
    				//updating our coordinate xy variable because it's used to replace the image of the location we are moving to
    			original = document.getElementById(xy).background;
    				//This saves the original texture image file to global memory so that any direction can pull it.
    			document.getElementById(xy).background="playerwalkdown.jpg";
    				//now we've just updated the tile we moved to with our player image		
    			saveface=document.getElementById(xy).background;
    				//saving the appearance of our character for when the degrade function finishes running
    			
    			break;
    				//no more code needed for this movement
    			}
    		}
     
    }
    /*---------------------------------------*/
     
    
     
    
    
    
    
    
    
    
    
    
    
    
    
    /*---------------------------------------*/
    /*I wrote this function purely to show me the contents of my arrays that I'm concerned about at the time.*/
    /*---------------------------------------*/
    /*Function Debugger*/
    /*---------------------------------------*/
    function debug()
    {
    alert(history);//This outputs the history array with the number of times a coordinate was stepped on placed in the Uniq ID Container within the array.
    alert(original);//This shows me the image file loaded into global memory so as to replace the tile I'm leaving with it before I move on.
    alert(saveface);
    }
    /*---------------------------------------*/
    
    
    
    
    
    
    
    
    
    /*---------------------------------------*/
    /*Check for key presses.                 */
    /*---------------------------------------*/
    document.onkeydown = keycheck;
    		//a little bit of javascript that detects key presses
    			if(document.layers)
     
    				{
     
    				document.captureEvents(Event.KEYDOWN);
     
    				}
    /*---------------------------------------*/
    
    
    
    
    -->
    </script>
    </head><body onLoad=load()>
    <table id="myTable" border="0" cellpadding="0" cellspacing="0">
    
    </table>
    <br />
    
    
    
    
    
    <input type="text" id="gametime" disabled=true>Game Timer
    <br>
    
    <input type="button" id="debugger" value="Debug" onclick="debug()">
    <br>
    
    </body>
    </html>



    I figured I'd be nice and include the ORIGINAL that I started long ago. Once again, I only ever touch this when I'm bored and feel like adding or editing. THIS VERSION is more like a skeleton in my opinion than the original.



    Code:
    <html>
    <head>
     
    <script type="text/javascript"> 
    <!--
     
     
     
     
     
     
     
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*The current running list of global variables necessary are: gblx, gbly, xyposition, xynumber, history, x, y, timeframe, & time*/
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    var gblx = new Array();
    	//this array is our global x variable that is used for making our playing field and coloring it
    var gbly = new Array();
    	//this is the global y array used for the playing field creation and coloring too
    var xyposition = new Array();
    	//this is the array that will store all the unid tile IDs that we've stepped on, eventually it gets sorted in the history function
    var xynumber = new Array();
    	//this is the array that stores purely the occurance numbers of each unid id in the xyposition array, the counting occurs in the history function
    var history = new Array();
    	//this is the history array for all movements made by our player, it is called upon in the history function, sorted, and then scrawled through
    	//in order to present data to the xyposition and xynumber arrays
    var x;
    	//this is one out of two of the most important variables, our location in this entire proof of concept game
    var y;
    	//this is most important variable number two. without which we can't do many things, similarly with variable x
    var timeframe=0;
    	//??? add comments after reading our environment timer
    var time;
    	//??? same as timeframe
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
     
     
     
     
     
     
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*This is the game time.  The world clock if you will.  This should be the first piece of code that runs when the webpage starts.  I'll edit it to eventually
    flow in that order.  When time starts in the game, then it can call on all other functions in the game that need to run such as the creation of the player field
    if I decide to make that an automatic process.  Essentially this code runs and grabs the gametime which starts at 0 and it adds one to it every ten seconds.  That
    is because this function is rerun every ten seconds which means that anything that should only happen once, such as the world creator function, insRow, should never
    be called within this function unless it is isolated.  I don't need such functions sucking up resources.  We have a local variable call environment counter that
    will cycle through the history array based on it's length.(this might be a flaw since history by default is much larger than xynumber which is the counter for how
    often a single tile is stepped on meaning i might should consider revising which arrays I call on.  environmentcounter will cycle through the length of history
    array and we have two variables that take the xynumber and the xyposition. these two new local variables are 'number' and 'position'. if number which is the
    new local variable for occurance is greater than 5, a picture of our player image will be placed on the tile associated with the current unid ID loaded into
    the 'position' variable which represents the current unid tile ID seen in our xyposition array at that time. otherwise nothing happens, hence the empty else statement*/ 
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    function envtimer()
    {
    document.getElementById('gametime').value=timeframe;
    timeframe=timeframe+1;
    time=setTimeout("envtimer()",10000);
    var envcounter;
    for (envcounter=0;envcounter<history.length;envcounter++)
    {
    var number = xynumber[envcounter];
    var position = xyposition[envcounter];
    if (number > 5)
    {
    document.getElementById(position).background="player.jpg";
    }
    else
    {
     
    }
    }
    }
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
     
     
     
     
     
     
     
     
     
     
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    function keycheck(e)
    {
    var key;
     
    var playerx=document.getElementById('insx').value;
    	//loads the user's input value into this local variable. i think this could cause 'cheating' if not changed
    var playery=document.getElementById('insy').value;
    	//loads the user's input value into this local variable. i think this could cause 'cheating' if not chnaged
    var playerxy=playerx+ "" +playery;
    	//this local variable takes the two variables from above and places them side by side using a non space character so as to not add them
     
    	key=e?e.which:window.event.keyCode;
    		//a little bit of javascript code that detects keys
    		switch(key)
    			//switch statment used to determine the key pressed and execute it's respective code
    		{
    			case 37:
    				//left arrow key numerical #
    			if (x > 8)
    				//this is a very simple collision detection, since x is our global coordinate variable
    				//if it is larger than our static table's deminsion then we do nothing
    				{
    				break;
    					//this is us doing nothing when we attempt to move left when 1 tile away from the far left tile
    				}
    			else
    				//this is us doing something when we aren't too far to the left
    			{
    			xy=x+""+y;
    				//we take the two global coordinate variables and place them together with a non space character which makes them unique
    			document.getElementById(xy).background="grass.jpg";
    				//this is us taking the current x and y coordinates which should corrilate with our player's x & y position
    				//since our player is moving within this else statement, we need to change the tile he was just on back to
    				//grass otherwise we will have two player images on the map
    			x++;
    				//this is us adding one to our x coordinate
    			history = (history.concat(xy));
    				//this is us adding our movements to a history array for tracking purposes
    			xy=x+""+y;
    				//and now we update our variable 'xy' which doesn't seem to be defined locally or globally. i'll need to research this...
    			document.getElementById(xy).background="player.jpg";
    				//and this is use replacing the tile we just moved to with our new graphic of our player
    			break;
    				//ok, that's enough code for this movement, break time
    			}
     
    			case 38:
    				//this is up arrow key
    			if (y > 8)
    				//this is a very simple collision detection, since y is our global coordinate variable
    				//if it is larger than our static table's deminsion then we do nothing
    				{
    				break;
    					//once again, us doing nothing
    				}
    			else
    				//this is us doing something when we aren't too close to the top of our playing field
    			{
    			xy=x+""+y;
    				//we take the global coordinate variables and place them together with a non space character which makes them unique
    			document.getElementById(xy).background="grass.jpg";
    				//this is us taking the current x and y coordinates which should corrilate with our player's x & y position
    				//since our player is moving within this else statement, we need to change the tile he was just on back to
    				//grass otherwise we will have two player images on the map
    			y++;
    				//this is us adding one to our y coordinate
    			history = (history.concat(xy));
    				//this is us adding our movements to a history array for tracking purposes
    			xy=x+""+y;
    				//and now we update our variable 'xy' so we know where we just moved to when we reference the player image load below
    			document.getElementById(xy).background="player.jpg";
    				//player image load occurs here using the updated 'xy' location
    			break;
    				//and we're through
    			}
     
    			case 39:
    				//now we are looking at the right arrow key
    			if (x < 1)
    				//and if we move too far to the right, we stop doing all actions within this specific if area
    				{
    				break;
    					//see, we did nothing
    				}
    			else
    				//but if we didn't move too far to the right, we can do this stuff below
    			{
    			xy=x+""+y;
    				//update our xy coordinates YAY
    			document.getElementById(xy).background="grass.jpg";
    				//replace the recently left tile with a grass image, maybe later this will be something that isn't sooo grassy
    			x--;
    				//update the global x coordinate so our player image knows where to load itself
    			history = (history.concat(xy));
    				//update the history file with what we've just stepped on
    			xy=x+""+y;
    				//update our reference variable for our x and y coordinates
    			document.getElementById(xy).background="player.jpg";
    				//this is us moving the player image file to the new x and y coordinate
    			break;
    				//nothing more needs to be done here
    			}
     
    			case 40:
    				//this is the down arrow key, the final movement key thus far
    			if (y < 1)
    				//this is if we move too far down on the playing field
    				{
    				break;
    					//this is us doing nothing when we push the down arrow key while too far south on the playing field
    				}
    			else
    				//this is us wanting to do something since we are not too far south
    			{			
    			xy=x+""+y;
    				//this is us finding out where we currently are before moving and saving it to the x and y coordinate variable 'xy'
    			document.getElementById(xy).background="grass.jpg";
    				//this is us updating the tile we were previously on with the grass image since we are always on grassy stuff thus far
    			y--;
    				//us updating the global y coordinate for us later
    			history = (history.concat(xy));
    				//saving our movement to a history array
    			xy=x+""+y;
    				//updating our coordinate xy variable because it's used to replace the image of the location we are moving to
    			document.getElementById(xy).background="player.jpg";
    				//now we've just updated the tile we moved to with our player image
    			break;
    				//no more code needed for this movement
    			}
    		}
     
    }
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
     
     
     
     
     
     
     
     
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*I wrote this function purely to show me the contents of my arrays that I'm concerned about at the time.*/
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*Function Debugger*/
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    function debug()
    {
    alert(history);//this should show me numerically all the coordinates I stepped on.
    alert(xynumber);//this should show me, following the numerical sequence of the history alert, the NUMBER of times i stepped on those tiles.
    }
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
     
     
     
     
     
     
     
     
     
     
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*The insPla(insert player) function is created to give us a way to interact directly with our 
    table in a game environment.  This code simple takes the user's input coordinates from two 
    seperate text boxes and if they exist on the playing field as unique XY locations(notice that
    it has to be both an X AND Y location that exists) then a player will be 'spawned' there.*/
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    function insPla()
    {
     
    var a=document.getElementById('insx').value;
    	//a local variable to store the value the user entered in the X coordinate text box
    var b=document.getElementById('insy').value;
    	//a local variable to store the value the user entered in the Y coordinate text box
    var c=a+ "" +b;
    	//a local variable to store the X and Y variables GIVEN to the website in the same
    	//style that our table uses to identify a unique cell(by it's X & Y both).
    document.getElementById(c).background="player.jpg";
    	//Now we are taking our unid ID coordinate and choosing the appropriate cell with the cooresponding ID and changing it's image to player.jpg
    x=document.getElementById('insx').value;
    	//the global x value is used to track our player's progression in the game along the x coordinate. we update it here to match what was given earlier
    y=document.getElementById('insy').value;
    	//the global y value is used to track our player's progression in the game along the y coordinate. we update it here to match what was given earlier
     
    }
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
     
     
     
     
     
     
     
     
     
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*The insRow(insert row) function is used on page load currently(8/8/2010) in order
    to load a static playing field.  it does this by using two for loops, one internal 
    to the other.  both of these for loops are statically defined to be 10 reiterations
    in length which will account for 100 reiterations of the code 'within'.  the code
    referred to is specifically used to assigned a visible value to the cells of a table
    that is being generated by the code.  each iteration of the code will create a cell
    within the table or a new row for cells to be placed in.  after a cells creation it
    is then filled with it's unique identifier so that we may call on it later without
    worrying about affecting other cells on the table.  the cell's unique id is displayed
    visually currently.*/
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    function insRow()
    {
     
    var locy=0;
    	//a local variable, used to represent the y coordinate in our table as a coordinate
    		
    		for (x=0;x<10;x++)
    			//for loop to statically define our initial table to only be 10 cells wide
    			
    			{
    				var locx=0;
    					//a local variable, used to represent the x coordinate in our table as a coordinate
    				var spanx = document.getElementById('myTable').insertRow(0);
    					//runs within the outer for loop to add new rows to our table
    					for (z=0;z<10;z++)
    						//internal for loop statically defined as 10 cells in height
    						{	
    								var c=locx + "" + locy;	//local variable that will allow us to merger x and y coordinates as a single #
    								var spanc = spanx.insertCell(0); 
    									//spanc(spancell)is a variable that's used to  
    									//adjust features of each new cell that we add
    								spanc.id=c;
    									//now we identify each cell with it's X and Y coordinate, these are unique
    								spanc.width="22";
    									//we set the size of the cell's width so we can see it clearly
    								spanc.innerHTML=c;
    									//currently this is used to see the uniq ID of each cell
    								
    								locx++;
    									//now we cycle our X coordinate by positive 1 to start the next cell
    						}
    				gblx = gbly = (gbly.concat(locy));
    					/*so the global variables for our coordinate system are two seperate arrays.
    					one of them is called gblx(global x) and the other gbly(global y).  They
    					are global because I intend on referencing them at some point in time for
    					specific purposes such as collision detection.  This piece of code takes
    					the current uniq ID that is being generated for the Y variable and adding
    					it to the global Y array and at the same time it copies it to the global X
    					array as well.  This code will eventually have to be rewritten to support
    					the idea of our global X and Y not being the same sizes.*/
    				locy++;
    					//add one to global Y variable because we finished the 10 cell deep for loop from above and need a new row now
    				
    		}
    		
    }
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
     
     
     
     
     
     
     
     
     
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Change Color Function ---
    The below function is created for the purpose of taking our predesigned table and appending 
    a grass jpeg image as the background to each individual cell in the table.  We use the global
    variable for 'x' and 'y' which were defined within the insRow function as being 10 in size and use
    those within a for loop below to match the original table design size.  This way our for
    loop below will only attempt to color table cells that actually exist currently.*/
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    function chg()
    {
     
    var j=0;	
    	//a local variable that we will adjust to change the position we are at in our global array
    	
    	for (x=0;x<gbly.length;x++)
    		//for loop for global variable 'y'
    	
    			{
    			var i=0;
    				//a local variable that we will adjust to change the position we are at in our global array
    	
    					for (z=0;z<gblx.length;z++) 
    						//for loop for global variable 'x'
    							{	
    								var a=gblx[i];
    									//'a' represents each position of global array 'x'
    								var b=gbly[j];
    									//'b' represents each position of global array 'y'
    								var combine = a+""+b;
    									//'combine' is created this way so as to not ADD the two digits
    									//this allows us to represent the elementID specific to each table
    									//cell because they were defined uniquely in the insRow function above.
    								document.getElementById(combine).background="grass.jpg";
    									/*alert(combine);//For Debug reasons
    									as you can see we are taking the combine
    									variable to single out each cell at a time
    									starting with the lowest row per depth and
    									increasing by one each time.*/
     
    								i++;
    									/*'i' will increase by one each time this 'z' for loop continues
    									allowing us to slide one place higher in the global 'x' array.
    									Basically the entire 'z' for loop starts by taking 10 cells at a time
    									changes their background images to grass.jpg.  This starts with [0.0].
    									After the first run through of the loop, it naturally adds 1 to 'z' and 
    									continues running like this until 'z' = the global 'x' value of 10. 
    									Now that 'i' has become 1(because of i++), we will take	all of the cell's
    									with an ID of 1.# and change their background images.  This will take place
    									when this for loop starts again.*/
    				}
    				j++;
    				
    	}		
    		
    		
    }
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
     
     
     
     
     
     
     
     
     
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*The purpose of this function is to take the array called history which is added to from the key down event and sort it and count the number of times
    a specific number occurs within that array afterwards.  Basically when you push an arrow key the 'keycheck' function is logging the coordinates for the
    cell that you just left.  That coordinate is stored in an array called history which is global.  We then call history within the 'his' function and run
    a for loop based on the size of the history array.  While the for loop is running it first takes and sorts the array from lowest to highest number.  
    After the sort is run, we create two local variables inside the function for the sake of pulling the first and second number in the history array.  We
    then compare these two variables to see if they are identical.  If they are identical we will take the 'z' variable which is used to determine the number
    of occurances of a specific number within the history array and we increase it by one.  If the for loop runs again and determines that the next variable is
    identical to the preceding one once more, then the 'z' variable increases again and so forth.  Each time the loop runs we take the z variable and add it
    into the xynumber array.  The 'xynumber' array is used to count the number of timeS an instance has occured.  If the original number and the next number
    in the history array are not similar however, we will keep z at 1 and enter that into the xynumber array as such and continue on down the history array to 
    the next number.  This for loop continues until history's length is finished being counted and sorted.*/
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    function his()
    {
     
    var b = history.length;
    	//local variable that is identical in size to our coordinate history(path we traveled)
    history.sort();
    	//sorts the entire history array into a numerical sequence of lowest to highest
    var z = 1;
    	//this variable is going to be used to track the number of times a single coordinate appears in our history array
     
    	for (p=0;p<b;p++)
    		//beginning a for loop that is the same size as our history array so that we hit every coordinate and don't add or miss one by mistake
    	{	
    		
    		
    		var x = history[p];
    			//since p is zero, this variable is the equivalent of the first number AFTER NUMERICAL SECQUENCING in our history array. lowest first
    		
    		var w = p + 1;
    			//this makes 'w' the 'next' number in our coordinate history. notice i say next, it is ONE higher in the array than 'x'.
    		
    		var y = history[w];
    			//y is the next number in the history array directly after 'x'.  this will be used below in the if statment
    		
    		if (x == y)
    			//is the number in the array we are looking at identical to the proceeding number?
    		{
    		//alert("EQUAL"); //a bit of debug code to check, was written during implementation. can be deleted.
    		z+=1;
    			//z, our counter of occurance, will increase by one if the x number and y number are identical.
    		
    	
    		}		
     
    		else if (x != y)
    			//this is where you go if the x number and y number are not identical.
    			//basically we skip the process of raising our occurance counter 'z' 
    		{
    		//alert("Not EQUAL"); //debug code written during implementation. can be deleted..
    			if (z > 1)
    				//we'll take the current value of z now and add that to an
    				//array called xynumber because we wanna save a value 
    				//representing how many times our duplicate coordinates appeared
    			{
    				xyposition = (xyposition.concat(x));
    					//lets save our coordinates now in a numerical sequence lowest to highest in this array
    				
    				xynumber = (xynumber.concat(z));
    					//now lets save the value of z, our occurance counter, to the xynumber array for use later on
     
    				z = 1;
    					//since this function might need to run more than once, duh, we reset z
    					//back to one in order to not fudge the counting on a later coordinate
    							
    			}
    			else
    				//if z is not greater than 1, I honestly think we'd have problems... since it's default at 1.
    				//I'm thinking the two pieces of code below are pointless?  logically they are...
    			{
    				xyposition = (xyposition.concat(x));//this might need to be deleted because logically it should never run based on my if statement.
    				xynumber = (xynumber.concat(z));//this might need to be deleted because logically it should never run based on my if statement.
    			}
    		
    		}
    		
    		
    		
    		
    	}
     
     
     
    }
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
     
     
     
     
     
     
     
     
     
     
    	document.onkeydown = keycheck;
    		//a little bit of javascript that detects key presses
    			if(document.layers)
     
    				{
     
    				document.captureEvents(Event.KEYDOWN);
     
    				}
     
    -->
    </script>
    </head><body onLoad=insRow()>
    <table id="myTable" border="0" cellpadding="0" cellspacing="0">
     
    </table>
    <br />
     
    <input type="button" id="chg" onclick="chg()"
    value="Change Color">
    <br>
     
    <input type="text" id="insx" value="InsertX">
     
    <input type="text" id="insy" value="InsertY">
    <br>
     
    <input type="button" id="pla" value="Insert Player" onclick="insPla()">
    <br>
     
    <input type="button" id="history" value="Generate History" onclick="his()">
    <br>
     
    <input type="button" id="debugger" value="Debug" onclick="debug()">
    <br>
     
    <input type="button" value="envtimer function" onclick="envtimer()">
    <br>
     
    <input type="text" id="gametime" disabled=true>Game Timer
    <br>
     
    </body>
    </html>
    Last edited by nodlain; 09-13-2010 at 12:20 AM.

  4. #4
    Marios's Mustache Wax Reputation: 10

    Join Date
    Sep 2010
    Posts
    2
    Rep Power
    0

    Default

    Decided to add a new feature. Growing grass...

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    <!--
    
    /*NOTE: Use Ctrl+F and search for TESTLATER to find code that might be pointless.  Delete it, save, reload, and see if all works without.*/
    
    
    
    
    
    /*---------------------------------------*/
    /*The current running list of global variables necessary are: gblx, gbly, xyposition, xynumber, history, x, y, timeframe, & time*/
    /*---------------------------------------*/
    var timeframe=0;
    	//Based on 10 second intervals, this variable increases as the game time goes by. Displayed in ghost text box within page.
    var time;
    	//A hidden element of time only seen in the code. Creates a 1 second delay between each reiteration of the startTime function.
    var regentime;
    	//A timer for the regen function.
    var xyposition = new Array();
    	//this is the array that will store all the unid tile IDs that we've stepped on, eventually it gets sorted in the history function
    var xynumber = new Array();
    	//this is the array that stores purely the occurance numbers of each unid id in the xyposition array, the counting occurs in the history function
    var gbly = new Array();
    	//this is the global y array used for the playing field creation and coloring too
    var gblx = new Array();
    	//this array is our global x variable that is used for making our playing field and coloring it
    var x;
    	//The player's X coordinate. Often updated or looked at within other functions.
    var y;
    	//The player's Y coordinate. Often updated or looked at within other functions.
    var history = new Array();
    	//this is the history array for all movements made by our player, it is called upon in the history function, sorted, and then scrawled through
    	//in order to present data to the xyposition and xynumber arrays
    var original;
    	//The original variable is storing the tile that you are stepping onto and off of to preserve it's appearance in regards to what it
    	//was before you stepped on it.  That way grass remains grass, and dirt remains dirt.
    var saveface;
    	//Comically named this because we want to save the direction the player is facing to a variable for when the degrade function runs.
    	//Currently the degrade function is drawing on our character so this variable will be called at the end of the function to ensure that
    	//if the player is standing on a degraded tile, he will not change into that tile during the function.
    /*---------------------------------------*/
    
    
    /*---------------------------------------*/
    /*Game Load - Function-------------------*/
    /*---------------------------------------*/
    function load()
    {
    startTime();
    	//Start in game time.
    loadMap();
    	//Load the statically defined(size) map.
    loadTextures();
    	//Loads game textures. Grass for now.
    loadPlayer();
    	//Loads the player into the playing field instantly at the coodrinates 1,1.
    regen();
    	//
    }
    /*---------------------------------------*/
    
    
    
    
    
    
    
    
    
    /*---------------------------------------*/
    /*This is the game time.  The world clock if you will.
    This should be the first piece of code that runs when
    the webpage starts.  I'll edit it to eventually flow 
    in that order.  When time starts in the game, then it
    can call on all other functions in the game that need
    to run such as the creation of the player field if I 
    decide to make that an automatic process.  Essentially
    this code runs and grabs the gametime which starts at 
    0 and it adds one to it every ten seconds.  That is 
    because this function is rerun every ten seconds which 
    means that anything that should only happen once, such 
    as the world creator function, insRow, should never be 
    called within this function unless it is isolated.  I 
    don't need such functions sucking up resources.  We 
    have a local variable call environment counter that will
    cycle through the history array based on it's length.
    (this might be a flaw since history by default is much 
    larger than xynumber which is the counter for how often
    a single tile is stepped on meaning i might should 
    consider revising which arrays I call on.  
    environmentcounter will cycle through the length of history
    array and we have two variables that take the xynumber
    and the xyposition. these two new local variables are 
    'number' and 'position'. if number which is the new local 
    variable for occurance is greater than 5, a picture of our
    player image will be placed on the tile associated with 
    the current unid ID loaded into the 'position' variable 
    which represents the current unid tile ID seen in our 
    xyposition array at that time. otherwise nothing happens,
    hence the empty else statement*/ 
    /*---------------------------------------*/
    function startTime()
    {
    
    document.getElementById('gametime').value=timeframe;
    	//This is purely an ingame clock based on the 1 second timer.
    timeframe=timeframe+1;
    	//And this is the contents of that clock.  It happens every 1 second.
    time=setTimeout("startTime()",1000);
    	//Here is our timer which re runs the startTime function every 1 second.
    
    degrade();
    
    	//Our degeneration function.
    	//Currently used with terrain.
    }
    /*---------------------------------------*/
    
    
    
    
    
    
    
    
    
    
    
    
    
    /*---------------------------------------*/
    /*Terrain regeneration*/
    /*---------------------------------------*/
    function regen()
    {
    regentime=setTimeout("regen()",5000);
    var a;
    var b;
    var counter;
    for (counter=0;counter<history.length;counter++)
    	{
    
    a = history[counter];
    	
    	if (a>0)
    
    		{
    			
    			b = a - 1;
    			a = b;
    			history[counter] = a;
    			
    		}
    		
    	}
    
    }
    /*---------------------------------------*/
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /*---------------------------------------*/
    /*Terrain degeneration*/
    /*---------------------------------------*/
    function degrade()
    {
    var counter;
    	//I'm using this variable to run through all the values stored in the history array below in the for loop.
    var number;
    	//This variable becomes whatever the contents of the stored location in our history array is within the for loop.
    var position;
    	//Down below, this variable is converted from a number to a string to access the Uniq ID of our coordinates on the playing field.
    var xsaveface= history.length; 
    	//I gave this variable a funny name because I wanted to make sure the player image file is not over written when degrading the tiles.
    for (counter=0;counter<history.length;counter++)
    	//For loop that runs through the entire history array.
    	{
    number = history[counter]
    	//Making the 'number' variable take on whatever contents the history array is currently at based on the 'counter' variable.
    		if (counter < 10)
    			//If the counter is less than 10, we don't want to store a 'not a number' NULL value into our coordinate X position.
    		{
    			position = 0 + "" + counter;
    				//So if our numerical value is less than two digits long(x and y) then we will add a 0 and a non space character
    				//to it in order to make it a string with two digits(0 and 1-9)
    		}
    		else
    		{
    			position = counter + "";
    				//This is us taking the numerical value of 'position' and turning it into a string by adding a non space character.
    		}
    		
    		if (number == 0)
    			{
    		
    			//Here's the degraded terrain feature of our proof of concept game.
    			//If number, the value stored in a Uniq position within our history array
    			//based on the number of times a Uniq coordinate(tile) has been stepped on
    			//is seen to be larger than whatever value is listed in the if statement
    			//above, we will do whatever code follows.  In this case, we switch the
    			//uniq ID terrain tile with an update tile.
    			
    
    				document.getElementById(position).background="grass.jpg";
    					//This is our terrain file becoming degraded due to usage.
    				
    				if (counter == xy) //when we get to the coordinate in the history file that our player is standing on...
    					{
    						original="grass2.jpg"
    							//we need to make sure that our 'memory' tile is updated correctly if it's been stepped on enough
    					}
    		}
    
    		if (number > 2)
    		
    		{
    		
    			//Here's the degraded terrain feature of our proof of concept game.
    			//If number, the value stored in a Uniq position within our history array
    			//based on the number of times a Uniq coordinate(tile) has been stepped on
    			//is seen to be larger than whatever value is listed in the if statement
    			//above, we will do whatever code follows.  In this case, we switch the
    			//uniq ID terrain tile with an update tile.
    			
    
    				document.getElementById(position).background="grass2.jpg";
    					//This is our terrain file becoming degraded due to usage.
    				
    				if (counter == xy) //when we get to the coordinate in the history file that our player is standing on...
    					{
    						original="grass2.jpg"
    							//we need to make sure that our 'memory' tile is updated correctly if it's been stepped on enough
    					}
    		}
    		if (number > 5)
    		
    		{			
    	
    				document.getElementById(position).background="grass3.jpg";
    					//A higher level of degradation!
    				
    				if (counter == xy) //when we get to the coordinate in the history file that our player is standing on...
    					{
    						original="grass3.jpg"
    							//we need to make sure that our 'memory' tile is updated correctly if it's been stepped on enough
    					}	
    		}
    			
    			
    
    
    		if (counter + 1 == xsaveface)
    			{
    
    				document.getElementById(xy).background=saveface;
    
    			}
    
    	}
    
    }
    /*---------------------------------------*/
    
    
    
    
    
    
    
    
    /*---------------------------------------*/
    /*The loadMap() function is used on page load 
    currently(8/8/2010) in order to load a static 
    playing field.  it does this by using two for 
    loops, one internal to the other.  both of these 
    for loops are statically defined to be 10 
    reiterations in length which will account for 
    100 reiterations of the code 'within'.  the code
    referred to is specifically used to assigned a 
    visible value to the cells of a table that is 
    being generated by the code.  each iteration of 
    the code will create a cell within the table or 
    a new row for cells to be placed in.  after a 
    cells creation it is then filled with it's unique
    identifier so that we may call on it later without
    worrying about affecting other cells on the table.
    the cell's unique id is displayed visually currently.*/
    /*---------------------------------------*/
    function loadMap()
    {
    var locy=0;
    	//a local variable, used to represent the y coordinate in our table as a coordinate
    		
    		for (x=0;x<10;x++)
    			//for loop to statically define our initial table to only be 10 cells wide
    			
    			{
    				var locx=0;
    					//a local variable, used to represent the x coordinate in our table as a coordinate
    				var spanx = document.getElementById('myTable').insertRow(0);
    					//runs within the outer for loop to add new rows to our table
    					for (z=0;z<10;z++)
    						//internal for loop statically defined as 10 cells in height
    						{	
    								var c=locx + "" + locy;	//local variable that will allow us to merger x and y coordinates as a single #
    								var spanc = spanx.insertCell(0); 
    									//spanc(spancell)is a variable that's used to  
    									//adjust features of each new cell that we add
    								spanc.id=c;
    									//now we identify each cell with it's X and Y coordinate, these are unique
    								spanc.width="24";
    								spanc.height="24";
    									//we set the size of the cell's width so we can see it clearly
    								spanc.innerHTML=c;
    									//currently this is used to see the uniq ID of each cell
    								
    								locx++;
    									//now we cycle our X coordinate by positive 1 to start the next cell
    						}
    				gblx = gbly = (gbly.concat(locy));
    					/*so the global variables for our coordinate system are two seperate arrays.
    					one of them is called gblx(global x) and the other gbly(global y).  They
    					are global because I intend on referencing them at some point in time for
    					specific purposes such as collision detection.  This piece of code takes
    					the current uniq ID that is being generated for the Y variable and adding
    					it to the global Y array and at the same time it copies it to the global X
    					array as well.  This code will eventually have to be rewritten to support
    					the idea of our global X and Y not being the same sizes.*/
    				locy++;
    					//add one to global Y variable because we finished the 10 cell deep for loop from above and need a new row now
    				
    		}
    
    var i = (locy * locx);
    	//Variable 'i' is storing the size of our playing field so we can prefil our movement history array 'history' with zeros(numbers) for later calculations
    var j;
    	//Variable 'j' is our incrementer for the history array
    for (j=0;j<i;j++)
    	//Our loop lasting as long as it takes to get the entire playing field in the array.
    	{		
    		
    		history[j] = 0;
    			//This is us presetting history arrays values to zero during the map load.
    	}
    }
    /*---------------------------------------*/
     
     
    
    
    
    
    
    
    
    
    
    /*---------------------------------------*/
    /* Load Textures Function ---
    The below function is created for the purpose of taking our predesigned table and appending 
    a grass jpeg image as the background to each individual cell in the table.  We use the global
    variable for 'x' and 'y' which were defined within the insRow function as being 10 in size and use
    those within a for loop below to match the original table design size.  This way our for
    loop below will only attempt to color table cells that actually exist currently.*/
    /*---------------------------------------*/
    function loadTextures()
    {
     
    var j=0;	
    	//a local variable that we will adjust to change the position we are at in our global array
    	
    	for (x=0;x<gbly.length;x++)
    		//for loop for global variable 'y'
    	
    			{
    			var i=0;
    				//a local variable that we will adjust to change the position we are at in our global array
    	
    					for (z=0;z<gblx.length;z++) 
    						//for loop for global variable 'x'
    							{	
    								var a=gblx[i];
    									//'a' represents each position of global array 'x'
    								var b=gbly[j];
    									//'b' represents each position of global array 'y'
    								var combine = a+""+b;
    									//'combine' is created this way so as to not ADD the two digits
    									//this allows us to represent the elementID specific to each table
    									//cell because they were defined uniquely in the insRow function above.
    								document.getElementById(combine).background="grass.jpg";
    									/*alert(combine);//For Debug reasons
    									as you can see we are taking the combine
    									variable to single out each cell at a time
    									starting with the lowest row per depth and
    									increasing by one each time.*/
    								document.getElementById(combine).innerHTML="";
    									//Hide the Unique ID for the tiles in our game.
     
    								i++;
    									/*'i' will increase by one each time this 'z' for loop continues
    									allowing us to slide one place higher in the global 'x' array.
    									Basically the entire 'z' for loop starts by taking 10 cells at a time
    									changes their background images to grass.jpg.  This starts with [0.0].
    									After the first run through of the loop, it naturally adds 1 to 'z' and 
    									continues running like this until 'z' = the global 'x' value of 10. 
    									Now that 'i' has become 1(because of i++), we will take	all of the cell's
    									with an ID of 1.# and change their background images.  This will take place
    									when this for loop starts again.*/
    				}
    				j++;
    				
    	}		
    		
    		
    }
    /*---------------------------------------*/
     
     
    
    
    
    
    
    
    
    
    
    
    
    
    
    /*---------------------------------------*/
    /*The loadPlayer function is created to give us a way to interact directly with our 
    table in a game environment.  This code simple takes the user's input coordinates from two 
    seperate text boxes and if they exist on the playing field as unique XY locations(notice that
    it has to be both an X AND Y location that exists) then a player will be 'spawned' there.*/
    /*---------------------------------------*/
    function loadPlayer()
    {
     
    var a = 1;//Player's static starting location on the X axis.
    var b = 1;//Player's static starting location on the Y axis.
    
    var c=a+ "" +b;
    	//Player's combined XY location using a nonspace character in between to keep from adding the coordinates by accident.
    original = document.getElementById(c).background;
    document.getElementById(c).background="player.jpg";
    	//Now we are taking our unid ID coordinate and choosing the appropriate cell with the cooresponding ID and changing it's image to player.jpg
    x=a;//Passing our static variables to our global variables just to update them.
    y=b;//Same as x=a above; this might be pointless to have in here, will TESTLATER.
    
    }
    /*---------------------------------------*/
    
    
    
    
    
    
    
    
    
    
    
     
     
    /*---------------------------------------*/
    function keycheck(e)
    {
    var key;
    
    var first;
    	//'first' takes the storage of the tile name out of our global memory 'original'.
    var second;
    	//next is a variable to store the next tile without compromising the original tile that is saved globally based on any direction movement.
    var a;
    	//This variable is going to represent the place of the Uniq value location inside the history array.
    var b;
    	//This variable used to add a number in the array location that 'a' currently is.
    var playerx=x;
    	//Takes our global X coordinate and pulls it to use in this function.
    var playery=y;
    	//Takes our global Y coordinate and pulls it to use in this function.
    var playerxy=playerx+ "" +playery;
    	//this local variable takes the two variables from above and places them side by side using a non space character so as to not add them
     
    	key=e?e.which:window.event.keyCode;
    		//a little bit of javascript code that detects keys
    		switch(key)
    			//switch statment used to determine the key pressed and execute it's respective code
    		{
    			case 37:
    				//left arrow key numerical #
    			if (x > 8)
    				//this is a very simple collision detection, since x is our global coordinate variable
    				//if it is larger than our static table's deminsion then we do nothing
    				{
    				break;
    					//this is us doing nothing when we attempt to move left when 1 tile away from the far left tile
    				}
    			else
    				//this is us doing something when we aren't too far to the left
    			{
    			xy=x+""+y;
    				//calculate the coordinates of x and y
    			document.getElementById(xy).background=original;
    				//replace the player image with the one saved in memory
    			x++;
    				//this is us adding one to our x coordinate
    			a = (x*10) + y;
    				//Here we take our coordinates as a number value rather than a string. Notice x is multiplied by ten to assume the first space
    				//In the sequence of XY.			
    			b = history[a];
    				//This is the 'b' variable becoming equal to the location within our array, whether that's a 0-infinite.
    			b+=1;
    				//Now we increment because we stepped on something.			
    			history[a]=b;
    				//And we replace the previous value with the new one.
    			xy=x+""+y;
    				//and now we update our variable 'xy' which doesn't seem to be defined locally or globally. i'll need to research this...
    			original = document.getElementById(xy).background;
    				//This saves the original texture image file to global memory so that any direction can pull it.
    			document.getElementById(xy).background="playerwalkleft.jpg";
    				//and this is use replacing the tile we just moved to with our new graphic of our player
    			saveface=document.getElementById(xy).background;
    				//saving the appearance of our character for when the degrade function finishes running
    			break;
    				//ok, that's enough code for this movement, break time
    			}
     
    
    
    
    
    
    			case 38:
    				//this is up arrow key
    			if (y > 8)
    				//this is a very simple collision detection, since y is our global coordinate variable
    				//if it is larger than our static table's deminsion then we do nothing
    				{
    				break;
    					//once again, us doing nothing
    				}
    			else
    				//this is us doing something when we aren't too close to the top of our playing field
    			{
    			xy=x+""+y;
    				//calculate the coordinates of x and y
    			document.getElementById(xy).background=original;
    				//replace the player image with the one saved in memory
    			y++;
    				//this is us adding one to our y coordinate
    			a = (x*10) + y;
    				//Here we take our coordinates as a number value rather than a string. Notice x is multiplied by ten to assume the first space
    				//In the sequence of XY.			
    			b = history[a];
    				//This is the 'b' variable becoming equal to the location within our array, whether that's a 0-infinite.
    			b+=1;
    				//Now we increment because we stepped on something.			
    			history[a]=b;
    				//And we replace the previous value with the new one.
    			xy=x+""+y;
    				//and now we update our variable 'xy' so we know where we just moved to when we reference the player image load below
    			original = document.getElementById(xy).background;
    				//This saves the original texture image file to global memory so that any direction can pull it.
    			document.getElementById(xy).background="playerwalkup.jpg";
    				//player image load occurs here using the updated 'xy' location
    			saveface=document.getElementById(xy).background;
    				//saving the appearance of our character for when the degrade function finishes running
    			break;
    				//and we're through
    			}
     
    
    
    
    
    
    			case 39:
    				//now we are looking at the right arrow key
    			if (x < 1)
    				//and if we move too far to the right, we stop doing all actions within this specific if area
    				{
    				break;
    					//see, we did nothing
    				}
    			else
    				//but if we didn't move too far to the right, we can do this stuff below
    			{
    			xy=x+""+y;
    				//calculate the coordinates of x and y
    			document.getElementById(xy).background=original;
    				//replace the player image with the one saved in memory
    			x--;
    				//update the global x coordinate so our player image knows where to load itself
    			a = (x*10) + y;
    				//Here we take our coordinates as a number value rather than a string. Notice x is multiplied by ten to assume the first space
    				//In the sequence of XY.			
    			b = history[a];
    				//This is the 'b' variable becoming equal to the location within our array, whether that's a 0-infinite.
    			b+=1;
    				//Now we increment because we stepped on something.			
    			history[a]=b;
    				//And we replace the previous value with the new one.
    			xy=x+""+y;
    				//update our reference variable for our x and y coordinates
    			original = document.getElementById(xy).background;
    				//This saves the original texture image file to global memory so that any direction can pull it.
    			document.getElementById(xy).background="playerwalkright.jpg";
    				//this is us moving the player image file to the new x and y coordinate
    			saveface=document.getElementById(xy).background;
    				//saving the appearance of our character for when the degrade function finishes running
    			break;
    				//nothing more needs to be done here
    			}
     
    
    
    
    
    
    			case 40:
    				//this is the down arrow key, the final movement key thus far
    			if (y < 1)
    				//this is if we move too far down on the playing field
    				{
    				break;
    					//this is us doing nothing when we push the down arrow key while too far south on the playing field
    				}
    			else
    				//this is us wanting to do something since we are not too far south
    			{
    			xy=x+""+y;
    				//calculate the coordinates of x and y
    			document.getElementById(xy).background=original;
    				//replace the player image with the one saved in memory			
    			y--;
    				//us updating the global y coordinate for us later
    			a = (x*10) + y;
    				//Here we take our coordinates as a number value rather than a string. Notice x is multiplied by ten to assume the first space
    				//In the sequence of XY.			
    			b = history[a];
    				//This is the 'b' variable becoming equal to the location within our array, whether that's a 0-infinite.
    			b+=1;
    				//Now we increment because we stepped on something.			
    			history[a]=b;
    				//And we replace the previous value with the new one.
    			xy=x+""+y;
    				//updating our coordinate xy variable because it's used to replace the image of the location we are moving to
    			original = document.getElementById(xy).background;
    				//This saves the original texture image file to global memory so that any direction can pull it.
    			document.getElementById(xy).background="playerwalkdown.jpg";
    				//now we've just updated the tile we moved to with our player image		
    			saveface=document.getElementById(xy).background;
    				//saving the appearance of our character for when the degrade function finishes running
    			
    			break;
    				//no more code needed for this movement
    			}
    		}
     
    }
    /*---------------------------------------*/
     
    
     
    
    
    
    
    
    
    
    
    
    
    
    
    /*---------------------------------------*/
    /*I wrote this function purely to show me the contents of my arrays that I'm concerned about at the time.*/
    /*---------------------------------------*/
    /*Function Debugger*/
    /*---------------------------------------*/
    function debug()
    {
    alert(history);//This outputs the history array with the number of times a coordinate was stepped on placed in the Uniq ID Container within the array.
    //alert(original);//This shows me the image file loaded into global memory so as to replace the tile I'm leaving with it before I move on.
    //alert(saveface);
    }
    /*---------------------------------------*/
    
    
    
    
    
    
    
    
    
    /*---------------------------------------*/
    /*Check for key presses.                 */
    /*---------------------------------------*/
    document.onkeydown = keycheck;
    		//a little bit of javascript that detects key presses
    			if(document.layers)
     
    				{
     
    				document.captureEvents(Event.KEYDOWN);
     
    				}
    /*---------------------------------------*/
    
    
    
    
    -->
    </script>
    </head><body onLoad=load()>
    <table id="myTable" border="0" cellpadding="0" cellspacing="0">
    
    </table>
    <br />
    
    
    
    
    
    <input type="text" id="gametime" disabled=true>Game Timer
    <br>
    
    <input type="button" id="debugger" value="Debug" onclick="debug()">
    
    
    </body>
    </html>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •