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

Thread: Javascript Map

  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Javascript Map

    This is for some inspiration for whomever it may help. I decided to try to make an isometric game map with some 3d aspects to it. This is what I came up with so far.

    http://teststuff.freehostingcloud.com

    Basically, the whole map is just made up of javascript. I made the initial map1, and map2 divs inside the play area tag. Map 1 is the basic floor tiles, map 2 is for 3d boxes and other things. It sits right on top of map one.

    Using javascript, I checked each array and told it whenever it was a specific number in the map 1 and map 2 arrays to create a new element and assign a specific ID to that div giving it a specific background color or image.

    For the boxes, I just took the tile div and said when it checked the array, and parse and integer that was 6, create 3 divs and i then skewed each div in css3 to make them take each side of the polygon which created the 3d box.

    Tell me what you all think about it. I'm doing all of this just to better understand javascript and so on. I say that in the past 2 months i have progressed alot!

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    It looks good

    Please add a DOCTYPE declaration to your page, and use of new Array() is discouraged:

    Code:
    var mapArray= [
    "111011111311001111",
    "100011111311001111",
    "101111111311111111",
    "100111111311001111",
    "100111111311110011",
    "111111111311110011",
    "111111111311110011",
    "331333333333330011",
    "111111111111111111",
    "111111111111111111",
    "111111111111111111"
    ];
    Use of setAttribute is also discouraged:

    Code:
    tile.setAttribute('id','grass'); // prefer direct access..
    tile.id = "grass";
    It is also preferable to set attributes/properties of a new element before appending it to the DOM.

    BTW These are not criticisms (apart from the DOCTYPE!).
    Last edited by AndrewGSW; 11-30-2012 at 11:12 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Thanks for feedback. I couldn't remember how to do it without using set attribute . My class I'm in tells me set attribute is ok though to use .

    Also, I forgot to use doctype because when I test stuff I just forget to do that stuff. Otherwise what do u think?

  • #4
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Last thing is pretty sure the "new array" thing is ur preference. I don't get errors when validating

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by pdiddles03 View Post
    Last thing is pretty sure the "new array" thing is ur preference. I don't get errors when validating
    It is not just my preference, but there is nothing wrong, or invalid, in using 'new Array()'. There is a performance advantage in [] (I understand) but it is not significant in most circumstances.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Oh ok that makes sense. I don't know how it would be performance wise but withou webgl a 3d game could be made. I know this jus by looking at the walls I made.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •