...

View Full Version : Javascript map array



pdiddles03
07-18-2012, 03:09 AM
Ok, So I want to create a game that uses an array to create a map. Each letter specifies a 50x50 px division.

map Array =[[a,a,a,b,b,a,a],
[a,a,a,b,b,a,a],
[a,a,b,b,a,a,a],
[a,a,b,b,a,a,a]];

I want my guy who is a absolutely positioned and 50x50 px. I want him to move along the path of the variable b which is going to be the path or road. "a" will be the grass that the guy cannot go on. How do I write the collision detection for this little game?

Thanks for your help.

rnd me
07-18-2012, 06:52 AM
I want my guy who is a absolutely positioned and 50x50 px. I want him to move along the path of the variable b which is going to be the path or road. "a" will be the grass that the guy cannot go on. How do I write the collision detection for this little game?
.




GAME=(function _game(){

var a=0,
b=1,
GAME={ pos: [0,0] };



GAME.map =[ /*
COLUMN
0,1,2,3,4,5,6 */
[a,a,a,b,b,a,a], // 0 R
[a,a,a,b,b,a,a], // 1 O
[a,a,b,b,a,a,a], // 2 W
[a,a,b,b,a,a,a] // 3
];

GAME.onPosChange=function _draw(e){ //demo-level example
alert("Current position: " + GAME.pos);
}

GAME.move=function move(addRow, addCol){
addCol= +addCol || 0;
addRow= +addRow || 0;
var tmpPos=[GAME.pos[0]+ addRow, GAME.pos[1]+ addCol ];
if( Math.abs(addRow)>1 || Math.abs(addCol)>1 ){ return false; }
if(GAME.map[tmpPos[0]][tmpPos[1]]){
GAME.pos[0]=tmpPos[0];
GAME.pos[1]=tmpPos[1];
GAME.onPosChange();
return GAME.pos;
}
return false;
}

return GAME;
}());


GAME.pos=[ 0, 3 ] // (row #, col #)
GAME.move(0,-1); // no
GAME.move(1,0); // 1,3
GAME.move(0,-1); // no
GAME.move(0,-1); // no
GAME.move(0,-1); // no
GAME.move(0,1); // 1,4
GAME.move(1,-1); // 2,3

pdiddles03
07-18-2012, 07:58 PM
One more question, how do you display the array without using document.write. I don't want the HTML5 way. If i use document.write, I get abunch of commas I can't remove. I can remove like 3 of them using .join but that's it.

Old Pedant
07-18-2012, 09:16 PM
<style type="text/css">
div#themap {
position: relative;
}
div#themap div {
position: absolute;
width: 50px;
height: 50px;
}
.grass {
background-color: green;
}
.path {
background-color: lightgrey;
}
</style>
...
<div id="themap"></div>
...
<script type="text/javascript">
...
GAME.map =[
[a,a,a,b,b,a,a],
[a,a,a,b,b,a,a],
[a,a,b,b,a,a,a],
[a,a,b,b,a,a,a]
];
...
GAME.draw = function() {
var gamemap = document.getElementById("themap");
for ( var row = 0; row < GAME.map.length; ++row )
{
var maprow = GAME.map[row];
for ( var col = 0; col < maprow.length; ++col )
{
var cell = document.createElement("div");
cell.style.top = ( row * 50 ) + "px";
cell.style.left = ( col * 50 ) + "px";
cell.className = maprow[col] == "a" ? "grass" : "path";
gamemap.appendChild(cell);
}
}
} // end of draw function
...

That's just an example. You would surely want to tweak it to your own usage.

pdiddles03
07-21-2012, 11:13 PM
<style type="text/css">
div#themap {
position: relative;
}
div#themap div {
position: absolute;
width: 50px;
height: 50px;
}
.grass {
background-color: green;
}
.path {
background-color: lightgrey;
}
</style>
...
<div id="themap"></div>
...
<script type="text/javascript">
...
GAME.map =[
[a,a,a,b,b,a,a],
[a,a,a,b,b,a,a],
[a,a,b,b,a,a,a],
[a,a,b,b,a,a,a]
];
...
GAME.draw = function() {
var gamemap = document.getElementById("themap");
for ( var row = 0; row < GAME.map.length; ++row )
{
var maprow = GAME.map[row];
for ( var col = 0; col < maprow.length; ++col )
{
var cell = document.createElement("div");
cell.style.top = ( row * 50 ) + "px";
cell.style.left = ( col * 50 ) + "px";
cell.className = maprow[col] == "a" ? "grass" : "path";
gamemap.appendChild(cell);
}
}
} // end of draw function
...

That's just an example. You would surely want to tweak it to your own usage.

Do you think you could elaborate on your code with more explanation? thanks!

Old Pedant
07-22-2012, 11:22 PM
Ummm...it's really pretty basic.

What you are going to END UP with is something that looks like this:


<div id="themap">
<!-- first row -->
<div class="path" style="top: 0px; left: 0px;"></div>
<div class="path" style="top: 0px; left: 50px;"></div>
<div class="path" style="top: 0px; left: 100px;"></div>
<div class="grass" style="top: 0px; left: 150px;"></div>
<div class="grass" style="top: 0px; left: 200px;"></div>
<div class="path" style="top: 0px; left: 250px;"></div>
<div class="path" style="top: 0px; left: 300px;"></div>
<!-- second row -->
<div class="path" style="top: 50px; left: 0px;"></div>
<div class="path" style="top: 50px; left: 50px;"></div>
<div class="path" style="top: 50px; left: 100px;"></div>
<div class="grass" style="top: 50px; left: 150px;"></div>
<div class="grass" style="top: 50px; left: 200px;"></div>
<div class="path" style="top: 50px; left: 250px;"></div>
<div class="path" style="top: 50px; left: 300px;"></div>
<!-- third row -->
<div class="path" style="top: 100px; left: 0px;"></div>
<div class="path" style="top: 100px; left: 50px;"></div>
<div class="grass" style="top: 100px; left: 100px;"></div>
<div class="grass" style="top: 100px; left: 150px;"></div>
<div class="path" style="top: 100px; left: 200px;"></div>
<div class="path" style="top: 100px; left: 250px;"></div>
<div class="path" style="top: 100px; left: 300px;"></div>
<!-- fourth row -->
<div class="path" style="top: 150px; left: 0px;"></div>
<div class="path" style="top: 150px; left: 50px;"></div>
<div class="grass" style="top: 150px; left: 100px;"></div>
<div class="grass" style="top: 150px; left: 150px;"></div>
<div class="path" style="top: 150px; left: 200px;"></div>
<div class="path" style="top: 150px; left: 250px;"></div>
<div class="path" style="top: 150px; left: 300px;"></div>
</div>

The outer <div> is position: relative so that all the inner ones can be position: absolute and so end up at the right locations.

The JS code is thus dirt simple:


...
GAME.map =[
[a,a,a,b,b,a,a],
[a,a,a,b,b,a,a],
[a,a,b,b,a,a,a],
[a,a,b,b,a,a,a]
];
...
GAME.draw = function() {
// we will put all the small <div>s inside of "themap" div:
var gamemap = document.getElementById("themap");

// we get each row of the GAME.map array, one at a time:
for ( var row = 0; row < GAME.map.length; ++row )
{
// this, then is one row:
var maprow = GAME.map[row];
// for example, the first row is the array [a,a,a,b,b,a,a]

// and then we get each column in that row
for ( var col = 0; col < maprow.length; ++col )
{
// we create a new <div> (one of the inner <div>s from diagram above
var cell = document.createElement("div");
// we position it...its top is 50pixels times its row number
cell.style.top = ( row * 50 ) + "px";
// its left is 50pixels times its column number
cell.style.left = ( col * 50 ) + "px";
// it is either "grass" (green background) or "path" (grey)
// depending on what letter was in the array:
cell.className = maprow[col] == "a" ? "grass" : "path";
// and then we simply make this 50x50 cell a child <div> of the outer <div>
gamemap.appendChild(cell);
} // loop on the columns
} // loop on the rows
} // end of draw function


As I said, it's just an example. You could change the class names, letters used, size of the array, etc., etc. It's just showing how to create the small <div>s inside the large outer one.

pdiddles03
07-31-2012, 09:47 PM
Ummm...it's really pretty basic.

What you are going to END UP with is something that looks like this:


<div id="themap">
<!-- first row -->
<div class="path" style="top: 0px; left: 0px;"></div>
<div class="path" style="top: 0px; left: 50px;"></div>
<div class="path" style="top: 0px; left: 100px;"></div>
<div class="grass" style="top: 0px; left: 150px;"></div>
<div class="grass" style="top: 0px; left: 200px;"></div>
<div class="path" style="top: 0px; left: 250px;"></div>
<div class="path" style="top: 0px; left: 300px;"></div>
<!-- second row -->
<div class="path" style="top: 50px; left: 0px;"></div>
<div class="path" style="top: 50px; left: 50px;"></div>
<div class="path" style="top: 50px; left: 100px;"></div>
<div class="grass" style="top: 50px; left: 150px;"></div>
<div class="grass" style="top: 50px; left: 200px;"></div>
<div class="path" style="top: 50px; left: 250px;"></div>
<div class="path" style="top: 50px; left: 300px;"></div>
<!-- third row -->
<div class="path" style="top: 100px; left: 0px;"></div>
<div class="path" style="top: 100px; left: 50px;"></div>
<div class="grass" style="top: 100px; left: 100px;"></div>
<div class="grass" style="top: 100px; left: 150px;"></div>
<div class="path" style="top: 100px; left: 200px;"></div>
<div class="path" style="top: 100px; left: 250px;"></div>
<div class="path" style="top: 100px; left: 300px;"></div>
<!-- fourth row -->
<div class="path" style="top: 150px; left: 0px;"></div>
<div class="path" style="top: 150px; left: 50px;"></div>
<div class="grass" style="top: 150px; left: 100px;"></div>
<div class="grass" style="top: 150px; left: 150px;"></div>
<div class="path" style="top: 150px; left: 200px;"></div>
<div class="path" style="top: 150px; left: 250px;"></div>
<div class="path" style="top: 150px; left: 300px;"></div>
</div>

The outer <div> is position: relative so that all the inner ones can be position: absolute and so end up at the right locations.

The JS code is thus dirt simple:


...
GAME.map =[
[a,a,a,b,b,a,a],
[a,a,a,b,b,a,a],
[a,a,b,b,a,a,a],
[a,a,b,b,a,a,a]
];
...
GAME.draw = function() {
// we will put all the small <div>s inside of "themap" div:
var gamemap = document.getElementById("themap");

// we get each row of the GAME.map array, one at a time:
for ( var row = 0; row < GAME.map.length; ++row )
{
// this, then is one row:
var maprow = GAME.map[row];
// for example, the first row is the array [a,a,a,b,b,a,a]

// and then we get each column in that row
for ( var col = 0; col < maprow.length; ++col )
{
// we create a new <div> (one of the inner <div>s from diagram above
var cell = document.createElement("div");
// we position it...its top is 50pixels times its row number
cell.style.top = ( row * 50 ) + "px";
// its left is 50pixels times its column number
cell.style.left = ( col * 50 ) + "px";
// it is either "grass" (green background) or "path" (grey)
// depending on what letter was in the array:
cell.className = maprow[col] == "a" ? "grass" : "path";
// and then we simply make this 50x50 cell a child <div> of the outer <div>
gamemap.appendChild(cell);
} // loop on the columns
} // loop on the rows
} // end of draw function


As I said, it's just an example. You could change the class names, letters used, size of the array, etc., etc. It's just showing how to create the small <div>s inside the large outer one.

Alright, I know your going to make fun of me again, but I don't know where GAME.draw=function() comesinto play. where is this function supposed to be called and where do I call it? I'm not sure I understand GAME.map either

Old Pedant
07-31-2012, 10:00 PM
My code was just building on RndMe's answer. Ask him.

You don't HAVE to use his construct-a-game object answer. If you are more comfortable with other approaches, use them.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum