Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

1. ## Javascript map array

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?

• Originally Posted by pdiddles03
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?
.
Code:
```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
}

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```

• 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.

• Code:
```<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.

• Originally Posted by Old Pedant
Code:
```<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!

• Ummm...it's really pretty basic.

What you are going to END UP with is something that looks like this:
Code:
```<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:
Code:
```...
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.

• Originally Posted by Old Pedant
Ummm...it's really pretty basic.

What you are going to END UP with is something that looks like this:
Code:
```<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:
Code:
```...
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