Creating map maker

**Willdawg** · 07-26-2005, 12:06 AM

Okay I'm creating a tilebased engine for a game I'm creating and anyways here's the script in action:
http://www.cyberpunkgame.0nyx.com/mapmaker.html
here's what I have :
<html>
<head>
<title>Map builder</title>
<script type="text/javascript">
map1=new Array(1,1,1,1,1,1,1,1,1,1,
0,1,1,1,1,1,0,1,1,1,
0,1,1,1,1,1,0,1,1,1,
1,1,1,1,1,1,1,1,1,1);

function createmap(map){
//change row
for(k=0;k<map.length/10;k++){
//across
for(i=0;i<map.length/4;i++){
valuex=18*i;
valuey=18*k;
if(map[i] == 1){
document.write('<img src="block.bmp" style="position:absolute;Left:'+ valuex +';Top:'+ valuey +'">');
}
if(map[i] == 0){
document.write('<img src="other.bmp" style="position:absolute;Left:'+ valuex +';Top:'+ valuey +'">');
}
}
}
}
createmap(map1);
</script>
</head>
<body>

</body>
</html>

And here's my problem other.bmp is red yet I can't get it to build the red blocks I don't know what my problem is. So I figured you js experts could tell me the error in my ways :P.

PS. Thanks ahead of time.

**Willdawg** · 07-26-2005, 08:57 PM

no one interested in helping a poor lost soul

.

**Willdawg** · 07-27-2005, 12:21 AM

Although no one really seemed intrested through thinking about it I finally realized the error in my ways. The i was reseting after 10 so only the first ten in the array were being put down. I commented on every part of the code and here it is:

<html>
<head>
<title>Map builder</title>
<script type="text/javascript">
//Linear map array
map1=new Array(0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,1,1,1,1,1);
//function createmap to create map :P
function createmap(map){
//counter to measure place in array
counter=0;
//down row
for(l=0;l<map.length/10;l++){
//across row
for(i=0;i<map.length/2;i++){
//image x value
valuex=18*i;
//image y value
valuey=18*l;
//if array = 1 then blah.bmp
if(map1[counter] == 1){
document.write('<img src="blah.bmp" style="position:absolute;Left:'+ valuex +';Top:'+ valuey +'">');
}
//if array = 0 then block.bmp
if(map1[counter] == 0){
document.write('<img src="block.bmp" style="position:absolute;Left:'+ valuex +';Top:'+ valuey +'">');
}
//add one to the counter
counter++
}
}
}
//call function
createmap(map1);
</script>
</head>
<body>

</body>
</html>

I'm sure eventually someone would've helped me :P.

**bubba.daniel** · 07-27-2005, 12:47 AM

HAHA, or either noone knew what the heck you were doing that was on in the last 1 DAY! lol

**jscheuer1** · 07-27-2005, 02:08 AM

If no one else picks this up I'll have a serious look sooner or later, that doesn't mean I'll be able to crack it.

**Willdawg** · 07-27-2005, 02:51 AM

js I already fixed it. By the way it's for creating maps from arrays for a game I'm working on :P. The working script is on :http://www.cyberpunkgame.0nyx.com/mapmaker.html
and if you're intrested in the game I'm making it's on :http://www.cyberpunkgame.0nyx.com/cyberpunk.html
not really too operational arrow keys to move space to shoot. doesn't work on mozilla sorry(I use it too).
and here's the main site for my game not very good but I just whipped it up:http://www.cyberpunkgame.0nyx.com/
js thanks again for the help on my other script it was much appreciated. I shouldn't need too much more help from you guys plus most of you don't know anything about making graphical games with javascript :P(no offense).

**Twey** · 07-27-2005, 07:46 AM

This was all in the space of one day fifteen minutes. Have patience!

Also, if I may make a suggestion, you never need to use bitmaps for the web. Bitmaps are totally uncompressed, so they take a long time to load. For a low-intricacy image that won't be too messed up if a few pixels get moved around (which a block of colour certainly is!), JPEG format is probably best. If you had a very delicate image, you should use GIF or PNG. PNG is generally better, but IE/PC doesn't support transparency in PNG images. These are examples of "lossless" compression: they don't compress as small as a JPEG, but the final image isn't altered in any way.

Will not work on Mozilla sorry.

Writing a graphical game entirely in Javascript is quite a venture. Personally, I'd use Java. I did think about this a while back, but it never took off. To get decent graphics, you'd have to manipulate each pixel individually! That's a lot of code.