Making a maze game in Drupal

My Zombie Hospital Game 
Intro Screen 

Never started on the Reality FPS game layout after having a kid!

 

A little variation on the tranlucency values and the iRay mins on this "Zombie in the Park" scene

 

Full 3D horror section port in progress, until then - heres a web-based maze thing
I'm working on. 

title_0.jpg

 


This is kind of a pet project of mine - a 3D "7th Guest" game puzzler using ONLY Drupal! My dabbling for a concept felt really limited, basically pure html image mapping and nodes, and "gamification" and badges made the Drupal platform incapable of driving a game. Now it became a challenge for reasons other than fun, which was 'how can I use everything Drupal does(entities, taxonomy, references) to display something interactive?' Obvioulsy the finished game will require some type of randomized map stored in a client session... haven figured that part out yet so On with the fun!
 
Here is the first part - navigating around a rendered maze!
 

Since the first part is a simple maze hunt for a missing key, I'll start off by making a node naming grid...

 
                   
                   
                   
                   
                   
                   
                   
                   
                   
  start node = "maze1334235"                
 
My filled out maze-to-node grid map
 
              maze8508    
          maze867374   maze74231 maze2902 maze8917
          maze546246 maze858384 maze45624    
            maze663343      
        maze90922   maze1213412 maze678900 maze3434252  
        maze98765 maze6565737   maze33384    
          maze744401 maze10032 maze45678    
          maze342574   maze35981 maze223464  
maze034237 maze238453 maze886879 maze638525 maze223322 maze858384     maze446657  
maze952627 maze1334235   maze555762   maze992342   maze740505 maze850121  
 
...and I'm trying to build out a model that fits the logic grid.  Below is a diagram that represents us viewing Drupal node "maze1334235" that
has two image map hotspots on a rendered creepy hallway. The hotspot located on the left side of the image will take us to node "maze952627" whereas
the clickabl region in the middle of the screen will take us to node "maze238453". Sounds as boring as 1980's Turtle Graphics but the fun comes in
when creating the 3d artwork. Mind you - you dont need 3D Studio, DAZ 3D, or Poser to build your maze... I drafted the first few nodes with some
scanned in Sharpie sketches of 3d rooms and it was a blast!
3dMapPreview.jpg
 
Here is the image that will display as Drupal node "maze1334235" as a Basic Page. The image was added with the WYSIWYG and the image map
coded was added in HTML or Source view. If you need clarifications on how to add an image map with hotspots I'll cover that at the end of the article.
 
In progress - next up, adding up all the image viewpoints, hotspot logic, and some cool randomizer logic to reveal keys and random monsters!
 
 
 
 
 
 
 
Here is my maze in progress - just a few rooms

Ok you get the overall gyst of a linear maze - you have bitmaps, a predefined grid of non-sequential node names, and image maps applied to those bitmap jpg images with links on the relevant regions. Now for the real fun.... this is where I get distracted and don't finish the entire section. Hopefully not. Ok two tasks to go:

1) Randomizing a map and holding the layout in a session
2) Lookimg up appropriate images to map each view of the genarated map
3) Randomizing node names. Remember I want to do this in pure drupal without iFrames
4) Creating resizable image maps to fit a full size screen on any device. This is probably the easiest cause the work has already been done else where, so let's start here:

Creating resizable image maps

Using my first maze room as an example <here>, the image map will be created using the svg format with transparent box object boxes drawn on top of the background image. Example:

<svg height="800" preserveaspectratio="none" version="1.1"
viewbox="0 0 278 200" width="100%"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="208" width="100%" xlink:href="/sites/default/files/images/diversions/RxLxL_0.jpg"> </image>
<a xlink:href="maze952627"><rect fill="#fff" height="10" opacity="0" width="10" x="35" y="87"></rect> </a>
<a xlink:href="maze952627"><rect fill="#fff" height="10" opacity="0" width="10" x="107" y="91"></rect> </a>
<a xlink:href="maze886879"><rect fill="#fff" height="10" opacity="0" width="10" x="187" y="91"></rect> </a>
</svg>