Jump to content
  • Advertisement
Sign in to follow this  
wardrox

[web] Hexagon Tables

This topic is 4874 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Is it possible, using only HTML, javascript and DHTML to make some form of hexadecimal grid? Its to aid me with an online game idea, original using a simple grid system as part of it, but hexagons would make a more interesting map. I don’t want to use a dynamically generated image and I was wondering how people would go about tackling this? or whether I should just use squares?

Share this post


Link to post
Share on other sites
Advertisement
It would be possible with javascript, though it would likely involve a lot of code (and possibly optimization of said code). It would be easiest [heh] to use an AJAX-style setup where your game data is a simple XML format, instead of trying to map game data to HTML tags.

Of course, I do not recommend the use of DHTML for web games, and instead suggest much more fitting platforms, such as Java or Flash

Share this post


Link to post
Share on other sites
You'd have to overlap images (with clear corners), which works very, very poorly in HTML. Flash is probably your best choice here.

Share this post


Link to post
Share on other sites
Guest Anonymous Poster
Its most certainly possible, although I don't know if it's limitation will be suited to your needs.

A 5 minute concoction of some ugly html, cross browser compatible CSS and JS, and 2 minutes mangling what is supposed to look like a texture in photochop produces this

http://www.anarchistic.f2s.com/sample/HexTable/

It is very simplistic, and teh code is ugly, but then it is only an example on how to render it, not make a game with it :p

details on the X library used for the cross browser DOM access can be found here

http://www.cross-browser.com/x/lib/view.php

I would also recommend dynamically creating the row/column html via the DOM and insert it dynamically to avoid huge pages and neaten up the source.

The grid is still technically square, but some extra code to calcualte which tile is clicked could be fairly easily done.

Share this post


Link to post
Share on other sites
Guest Anonymous Poster
Sorry for double post, im in a rush so no time to register, but i forgot to mention, the yellow dotted tiles are examples on how to address specific tiles to change the style.

Share this post


Link to post
Share on other sites
Sorry for a now triple post

I got bored so I added the click handler too
Click on a tile and it should toggle between "lit" and "unlit".


Meh, good exercise but I realised I really suck at math. Need a refresher course

*edit* hehe, i couldnt help but upload some different textures :P

[Edited by - Ixulai on June 17, 2005 11:02:30 AM]

Share this post


Link to post
Share on other sites
Hye, thats looking like exactly what im trying to do myself. For my purposes i only realy need it to display, it doesnt need to be too dynamic. I have considered flash and java, using applets, but for my own sad inquisitivness id quite like to try it using HTML + javascript and the like.

Thaks for the example, hope you dotn mind if i open up the source and have a look? and dont worry, who need math with computers? oh...

Share this post


Link to post
Share on other sites
Hehe, use it at your own risk :P

As long as you don't hold me responsible for a loss of brain cells caused by trying to understand the JS. My native language is PHP. Breaking out in to the more interactive side is fun, even if it is only JS and HTML :P

Inspired by being severly unimpressed with myself for forgetting my trig I went and found out how to do the click function properly.

Now the translateTileClick function calculates the angle from the top left corner of the hexagon to the mouse click, and if it is greater than 40 degrees it cant be inside the top left corner. For the top right corner, the X is simply inverted.

Anyway, use, or dont as you see fit :)
If you want further assistance feel free to PM me :)

Share this post


Link to post
Share on other sites
Thanks for the help, im atually planning on combining JS with the PHP which actually runs the game to give it a more dynamic feel. Ill derfinatly sit down with a cup of tea and have a look at the code, try to get the general jist of it anyway.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!