Help Designing a Tile-based Maze Game

[ballingerj]

Hello, 

 

I'm trying to design a simple game, but I don't quite know how to start implementing it. I've programmed in Java but Javascript is totally foreign.

 

I want a grid (of varying size, but for now let's say 5x7 squares). I want there to be a hidden path through the grid from one end to the other. Something like:

*$#**

*$***

*$$$*

***$*

**$$*

**$**

**#**

 

Where the $ is the correct path and & is the beginning/end point.

 

I want the (single) player to take 'turns' guessing: each turn will consist of a guess (where the player moves on the tile to be guessed) and then a validation: if this is the path, the player moves forward. Else, they move back. Once they've tried a bad tile, it gets marked as tried. If they try that tile again, the player automatically moves to the beginning of the maze, but the maze stays the same (so they have to remember the path they already found). 

 

I think I want to store the grid in an array or arrays of ints, where 0 = correct, 1 = untried/wrong, and 2 = tried/wrong. Generating the hidden path won't be difficult for me. 

 

What I don't know how to do:

1. Create sprites/images

2. Configure this to Phaser (more specifically, preload, create, update, and render).

3. Demo/develop my game using the cloud9 server (or sandbox). 

 

Thanks for the help! 

 

 

[gmalone]

You're asking the right questions and the best answers are in the phaser.io website examples and in the Zenva tutorials. Also, look up the Phaser Cheatsheet... very useful.

The maze game setup could use a simple Collision layer. Which reminds me you could use the Tiled map editor for your maze design tool, unless you're generating algorithmic mazes.

Javascript is a breeze once you get grounded in the basic concepts. Consult w3schools for quick reference to syntax and techniques.

Have fun.

Greg

[ballingerj]

You're asking the right questions and the best answers are in the phaser.io website examples and in the Zenva tutorials. Also, look up the Phaser Cheatsheet... very useful.

The maze game setup could use a simple Collision layer. Which reminds me you could use the Tiled map editor for your maze design tool, unless you're generating algorithmic mazes.

Javascript is a breeze once you get grounded in the basic concepts. Consult w3schools for quick reference to syntax and techniques.

Have fun.

Greg

This cheatsheet is wonderful---thanks! Unfortunately, Zenva tutorials cost money that I shouldn't have to spend.

 

I'm randomly generating the map. A collision layer sounds helpful. Do you have any specific resources in mind about those tools?

 

Thanks again!

[gmalone]

True about Zenva costing, though look for Pablo Farias' many free tutorials published on various sites. Fortunately there are many other free tutorials out there that cover the same topics. Zenva just packages them conveniently and areally reasonably well done.

Collision layer is a concept easily implemented in the Tiled map editor for designed maps, and there are ample examples out there (free) of how to use it in your game. For random maps, you'd use the same code method adapted to how you're laying out your code. In totality it involves just a few lines of code to implement because Phaser does the heavy lifting for you.