1 decade ago by Cavalier
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
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
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">♠ Blue</option> <option value="2" style="background-color:red">♥ Red</option> <option value="3" style="background-color:green">♣ Green</option> <option value="4" style="background-color:yellow">♦ 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); },