Forums » Help » Using html form to manipulate some game variables

How do I get the values submitted inside a typical html form and set them to the game's entities?
I know I can use ig.system.context or .canvas to get those respective variables, but my form is in a div outside the canvas. Should I put it inside instead? Do I have to use jquery inside the entities' code?

<div id="skirmish">
	<form action="" method="get">
	 <table>
	   <tr>
	    <td>Nickname: <input type="text" name="playername" value="Player 1" /></td>
		<td>Color: <select id="pl1color">
				  <option value="1" style="background-color:blue; color:white">&spades; Blue</option>
				  <option value="2" style="background-color:red">&hearts; Red</option>
				  <option value="3" style="background-color:green">&clubs; Green</option>
				  <option value="4" style="background-color:yellow">&diams; Yellow</option>
				</select> 
         </td></tr>
	   <tr><td colspan=2 align="center">Map
	   </td></tr>
	   <tr><td>
		Width: <select id='mapwidth'>
				  <option value=28 >20</option>
				  <option value=28 >28</option>
				  <option value=36 >36</option>
				  <option value=54 >54</option>
				  <option value=72 >72</option>
				</select>
				</td>
		<td>Height: <select id='mapheight'>
				  <option value=16 >16</option>
				  <option value=28 >28</option>
				  <option value=36 >36</option>
				  <option value=54 >54</option>
				  <option value=72 >72</option>
				</select>
	   </td></tr>
	   <tr><td colspan=2 align="center">
		Tileset <select id='tileset'>
				  <option value=1 >Grass</option>
				  <option value=2 >Dirt</option>
				  <option value=3 >Rocky</option>
				  <option value=4 >Snow</option>
				  <option value=5 >City</option>
				</select>
	   </td></tr>
	 </table>
	 <input type="submit" value="START!" /> 
	</form>

One of the things I want to randomly generate is the map. The function already works nicely, and I want the player to be able to choose the tileset (what 2 frames are used) and size

generateMap: function(rows, columns){
		var maparray = [];
		var rowarray = [];
		var colmaprow = [];
		var colmap = [];
		var tilefactor = 2;
		var collision = 0;
		this.mapheight = 30;
		this.mapwidth = 20;
		
		for (var y = 0; y < this.mapheight; y++) {
			for (var x = 0; x < this.mapwidth; x++) {
				if ((y > 1 && y < this.mapheight) && 
					rowarray.length > 0 && rowarray.length < this.mapwidth - 1) {
					var tile = Math.random();
					if (tile > 0.85) {
						//Collision background
						collision = 1;
						tile = 2+tilefactor;
					} else {
						//Not collision
						collision = 0;
						tile = 1+tilefactor;
					}
					rowarray.push(tile);
					colmaprow.push(collision);
				} else {
					//Borders are black with collisions
					rowarray.push(0);
					colmaprow.push(1);
				}
			}
			maparray.push(rowarray);
			colmap.push(colmaprow);
			var rowarray = [];
			var colmaprow = [];
		}
		this.collisionMap = new ig.CollisionMap( 32, colmap );
        var bgmap = new ig.BackgroundMap( 32, maparray, this.maptile );
		this.backgroundMaps.push(bgmap);
	},

What I would do is create one page called play.html which has your canvas game. Another page called something like form.html would contain your HTML form. Just make sure you use <form action="play.html"> in the form.

How to pass variables to ImpactJS using _GET form submission.

Is that kind of what you meant?

Not exactly, i was hoping for a more dynamic approach, without actually having to send the form.
Using pure javascript, i could call

var form = document.forms['form_id'];
var playername = form.elements['playername'];
alert(playername.value);#

Instead of sending the information with a submit action, I'd just hide the div and make a call inside the game main's update to actually start running and set all the values.

So I'm wondering if there's a way to call the document object like it's possible to call the context

Why can't you use document.getElemenyById?

IE:

//html
<input type="text" id="playername" value="Player 1"  />

//js
var playerName = document.getElementById('playername');
console.log(playerName.value);
player.name = playerName.value

Damn, I feel stupid. I can call the document object inside the game's classes without a problem, turns out a small syntax error wasn't allowing me.
Yes, I can forgo using a form altogether and just calling with document.getElementById('input_id') too.

Thanks for the help guys!