So a reminder that one of the great game jams is on this year and as ususal it’s a great time of year to see if you can hack out a simple game in 7 days.
https://itch.io/jam/7drl-challenge-2019
It’s always a challenge to try to get this done in a busy work week with other responsibilities but it’s also a really cool opportunity to get feedback on a game.
With Proc jam about to start – there’s a great new episode on PCG and procjam. Check it out at:
And a reminder that in the archives of RLR you will find a stack of episodes on 7DRL’s and PCG.
SO about to start proc jam and 7drl week – great chance to try out some coding for a week – have some fun:
http://www.roguetemple.com/2014/11/07/procjam-and-7drl-week-starting-tomorrow/
Check this blog for lots of resources on building roguelikes , 7DRL and PCG. Use the categories on the left hand side of this page.
So I am getting a Cellular Automator (CA) generator ready for this years 7DRL and hoping to create the same game in iOS and HTML5 – I am sure I am biting too much off. However, I have a basic implementation of a Dungeon generator and detailed how to create it below in X-Code using Objective-C. It’s a very simple implementation – so feel free to comment if you think we can clean the code up!!!!
In terms of CA there are some great references to get you going:
http://pcg.wikidot.com/pcg-algorithm:cellular-automata
http://www.futuredatalab.com/proceduraldungeon/
http://csharpcodewhisperer.blogspot.com.au/2013/07/Rouge-like-dungeon-generation.html
For this tutorial the dungeon is represented by 0’s as Rock and 1’s as Path (or moveable space).
This is the output so far:
So its a pretty simple set of steps to get us going.
Firstly create a OSX->Application->Command LineTool->Foundation project in Xcode
Then add a class called Dungeon
The header for Dungeon should look like this
#import <Foundation/Foundation.h>
@interface Dungeon : NSObject
{
int map[100][100]; //max size of dungeon
int maxRows; //size of this dungeon
int maxCols; //size of this dungeon
}
- (id)initWithRows:(int)rows AndCol:(int)cols;
-(void)printMap;
@end
The implementation for this should look like
#import "Dungeon.h"
@implementation Dungeon
- (id)initWithRows:(int)rows AndCol:(int)cols
{
self = [super init];
if (self) {
[self initMap];
maxRows = rows;
maxCols = cols;
[self createCellularAutomatorDungeon:maxRows ForCols:maxCols];
}
return self;
}
//set all the map to rock
-(void)initMap
{
for(int i=0;i<maxRows;i++)
for(int j=0;j<maxCols;j++)
map[i][j] = 0;
}
//Loop through the 2 dim array and add space (not rock) if the wall has a specific minimum neighbourCount
- (void)createCellularAutomatorCellsForNeighbourCount:(int)neighbourCount
{
//first pass CA
for(int i=0;i<maxRows;i++)
{
for(int j=0;j<maxCols;j++)
{
if (map[i][j] == 0 && ([self getNeighboursForRow:i ForCol:j]>=neighbourCount))
map[i][j] = 1;
}
}
}
//use a classic CA algorithm
-(void)createCellularAutomatorDungeon:(int)rows ForCols:(int)cols
{
//randomly initialize wih a few random spaces in the rock
for(int i=1;i<maxRows;i++)
for(int j=1;j<maxCols;j++)
if (arc4random()%4==1)
map[i][j] = 1;
[self createCellularAutomatorCellsForNeighbourCount:4];//first pass
[self createCellularAutomatorCellsForNeighbourCount:5];//second pass
}
//Count of the number of neighbours for this point
-(int)getNeighboursForRow:(int)row ForCol:(int)col
{
int n = 0;
//top neighbours
if (row>0 && col>0)
{
for(int i=col-1;i<col+2;i++)
{
if (map[row-1][i]==1)
n++;
}
}
//middle neighbour left
if (col>0 && col<maxCols)
if (map[row][col-1]==1)
n++;
//middle neighbour right
if (col>0 && col<maxCols)
if (map[row][col+1]==1)
n++;
//bottom neighbours
if (row<maxRows && col<maxCols)
{
for(int i=col-1;i<col+2;i++)
{
if (map[row+1][i]==1)
{
n++;
}
}
}
return n;
}
-(BOOL)ifValidCoordinateForRow:(int)row ForCol:(int)col
{
return (map[col][row]==0 && row>0 && col > 0 && row<maxRows && col<maxCols);
}
-(void)printMap
{
for(int i=0;i<maxRows;i++)
{
for(int j=0;j<maxCols;j++)
printf("%u", map[i][j] );
printf("\n");
}
}
And make sure that main.m looks like
#import <Foundation/Foundation.h>
#import "Dungeon.h"
int main(int argc, const char * argv[])
{
@autoreleasepool {
// insert code here...
NSLog(@"Basic Dungeon CA Algorithm");
Dungeon *dungeon =[[Dungeon alloc]initWithRows:30 AndCol:50];
[dungeon printMap];
}
return 0;
}
Ok so if you look at the code above in dungeon.m you should get a pretty good idea of how we are doing the generation of the dungeon using a CA algorithm. Read the comments as I have tried to explain anything a little unusual. If anything doesn’t make sense – leave a comment and I’ll get back to you.
Happy coding.
Really really excellent article on generating a roguelike dungeon (CA) using C#
http://csharpcodewhisperer.blogspot.com.au/2013/07/Rouge-like-dungeon-generation.html
This is a sensational source of information for any C# roguelike dev
http://www.evilscience.co.uk/?cat=5
This is a totally brilliant article on building a roguelike PCG dungeon in C# – just excellent:
http://csharpcodewhisperer.blogspot.com.au/2013/07/Rouge-like-dungeon-generation.html
As this blog is about web development, rouguelikes and mobile dev – here’s a great podcast focussing on mobile rogue likes. Ok so there’s no real development specific content, but its a great overview of cool mobile rogue likes.
http://www.roguelikeradio.com/2013/09/episode-79-mobile-roguelikes.html
The Game
So you may have noticed I entered the 7drl (7 day roguelike comp) this year – a comp to write a game in 7 days. It’s actually not a lot of time to write a game and given work and home commitments – its really really not very long. Anyway I wrote a crazy game called Rogue Coder using JS, HTML5 and MVC4. The end product is here www.domssite.com/roguecoder
The Review
So uberhunter is reviewing all games in the 7drl on youtube and he just reviewed roguecoder. It’s a fair stressful experience watching your game (warts and all) get a review from such a guy.
here it is http://www.youtube.com/watch?v=eEaPH34DxxE
Lessons Learned
The value of a review like this is priceless. Its a great way to look at your game through the eyes of an independent and experienced player. It’s hard to watch at times because I keep thinking “I really wish I had fixed that bug”. It’s also hard to watch a review like this because you are not there to guide and advise, and you are not there to explain the things that you have in your head but never quite got the time to either fix or document . I think I have taken some a few important lessons:
1. Ensure core game play works (the bugs with the compiler actually stop the game from being playable).
2. Watch the way someone else plays the game and look at their actions and strategies to determine ways to make the game more playable, robust and enjoyable.
Whats next
V2 of course stay stay tuned here in the next few weeks. Of course a big thank you to uberhunter for the review
I come from the age when text adventures were serious fun, ZORK and Hitchhikers guide to the galaxy were two of my favourite text adventures. OK so maybe the golden age of the text adventure is still stuck in the 1980’s but I still remember those glory days. So the game I am building is certainly not up there in the same territory as ZORK but I hope you can see the sort of cool things you can do with Js/Jquery and HTML 5.
The game is pretty simple use the N,S,E and W to move around the dungeon and a few other useful commands. Search for the Dragon and if you have the right weapon and equipment you may be able to kill it. If you use a mobile browser you should see some buttons that make life a little easier than using a little virtual keyboard.
Here is the game : http://domssite.com/search/
Who is this for
Anyone interested in learning Javascript, jQuery and HTML 5.
How to use the tutorial
Its not an ordinary tutorial so you need to accept that first. Its based on reading and understanding code and code comments. I have used heaps of comments throughout the code to explain whats going on. There’s a lot of Arrays, so you’ll see lots of code using arrays and its not a bad starting place for working with js structures. The whole tutorial is 1 single file – whilst a single large file is not the best way to build large web apps – its not a bad approach showing everything in one file.
<!--Text Adventure : Search for the Dragon --> <!--***************************************** Text Adventure - A JS/JQuery/HTML5 Tutorial by comments The game : Standard Text Aventure where you can move from room to room, collecting items and killing monsters Goal is to get to the final room of the dungeon and kill the dragon Start in room 1 Monsters dont move Monsters can be killed by certain weapons Should work in both mobile and non-mobile browsers History : 0.1 Initial version before Hilary's comments/advice ***************************************** --> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Search</title> <script src="Scripts/jquery-1.7.1.min.js"></script> <link href="Content/Site.css" rel="stylesheet" /> </head> <body> <div class="content"> <style> </style> <div id="screenContainer"> <div id="display"> <div id="input"> <form> <!--Screen Title--> <h1>Search... </h1> <!--Screen Sub-Title--> <h3>For a Dragon...Text Adventure Game by @DungeonBard </h3> <div id="GameOverDiv"> </div> <div id="GameDiv"> <!--The following div is hidden or shown depending on if its a non-mobile browser--> <div id="Keyboard"> <label>Command:</label> <input type="text" name="userInput" class="buttonMod" id="userInput" /> </div> <!--The following div is hidden or shown depending on if its a mobile browser--> <div id="controllers"> <!--We use a table for the simple alignment of the buttons--> <table> <tr> <td></td> <td> <input type='button' class='button' value='N' title="North" style="left: 200px" /></td> <td></td> </tr> <tr> <td> <input type='button' class='button' value='W' title="West" /></td> <td></td> <td> <input type='button' class='button' value='E' title="East" /></td> </tr> <tr> <td></td> <td> <input type='button' class='button' value='S' title="South" /></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td> <input type='button' class='button' value='P' title="Pickup" /></td> <td> <input type='button' class='button' value='A' title="About" /></td> <td> <input type='button' class='button' value='?' title="Help" /></td> </tr> </table> </div> </div> <div id="output"></div> </form> </div> </div> </div> </body> </html>
<script type="text/javascript">
//Our main js code called by Jquery on doc ready
$(document).ready(function () {
//game variables
var message, //screen message to display
hits = 10, //hit points for the player
lightLevel = 100, //current light level
currentRoom = 0, //initial room
exitRoom = 31, //final room of the dungeon
IsGameOver = false; //Maintain the state of the game
IsOgreAlive = true, //Stores the state of the Ogre - Alive/Dead
IsDragonAlive = true; //this is the gameover state
//All the commands we use in the game
var gameWords = new Array("HELP", "Find/earch", "N-orth", "S-outh", "W-est", "E-east','A-About");
//All the rooms in the game
var rooms = new Array("Dungeon Entrance", "Corridor of uncertainty", 'Ancient old cavern', "Great Cavern", "Underground River", "Stream", 'Dungeon Stream', "Dungeon Pool",
"Large Cavern", "Rough Tunnell", "Long Tunnell", "Dark Room", "Dark Room", "Cold Room", "Old Tunnel", "Cold Room",
"Old Cavern", "Short Corridor", "Short Corridor", "Grey Room", "Green Room", "Old Prison Cell", "Underground River",
"Large Cavern", "Rough Tunnell", "Long Tunnell", "Dark Room", "Dark Room", "Cold Room", "Old Tunnel", "Dragons Room");
//Each exit relates to the index ie. Exits[0] SE which means rooms[0] the long path has two exits on the South and East. If we look
//down to the //Movement Code section you can see how we work out which rooms are connected to which
var exits = new Array("E", "SWE", "WE", "SWE", "WE", "WE", "SWE", "WS",
"NSE", "SE", "WE", "NW", "SE", "W", "SNE", "NSW",
"NS", "NS", "SE", "WE", "NWE", "SWE", "WS", "N",
"N", "NWE", "NWE", "WE", "WE", "NW", "NE", "W");
//All out game objects
var GameObjects = new Array('', "Painting", "Knife", "Wand of Firebolts", "Goblet", "Wand of Wind", "Coins", "Helmet", "Candle", "Torch", "Iron Shield", "Armour", "Oil", "AXE", "ROPE", "BOAT", "AEROSOL", "CANDLE", "KEY");
//Inventory array Contains all the things you can carry
var inventory = new Array();
inventory[0] = 2; //lets start our player off with a knife
//location of game objects - these objects relate to a array index - so Object[1] the Painting is located
//in rooms[2] the small garden - 999 indicates out of play
var objectLocations = [999, 1, 999, 3, 4, 5, 6, 7, 8, 10, 11, 15, 14, 12, 18, 19, 16, 17, 9]
//This function detects if the browser if a mobile - you'll see when we call this we apply the
function isMobile() {
return navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/iPhone|iPad|iPod/i)
|| navigator.userAgent.match(/Opera Mini/i) || navigator.userAgent.match(/IEMobile/i);
}
//The next line checks for a mobile browser and if it find st it will hide the buttons or hide the text box
if (isMobile()) {
//hide the text box - we dont need that for a mobile browser as its hard to use mobile keyboard for lots of commands
$("#Keyboard").hide();
} else {
//hide the buttons as we don't want that for the normal web experience
$('#controllers').hide();
//jquery command to force the textbox to take focus
$("#userInput").focus();
}
//javascript function to pickup the object in this room
var pickup = function (roomIndex) {
var itemIndex;
if (objectLocations[roomIndex] > 0 && objectLocations[roomIndex] < 100) {
itemIndex = objectLocations[roomIndex];
inventory[inventory.length] = itemIndex;
objectLocations[roomIndex] = 999;
alert(objectLocations[roomIndex]);
}
}
//This function loops through the object location array and returns
function getObjectForRoom(currentRoom) {
var roomIndex = -1;
for (var i = 0; i < objectLocations.length ; i++) {
if (objectLocations[i] == currentRoom)
roomIndex = i;
}
return roomIndex
}
//This is a method/function that shows the game screen. If we look in deatil at this function we can see that
//it uses another function DisplayText to show each line of the screen.
function DisplayGameScreen() {
//clear the output div
$display.empty();
//Display the screen output text - note this does not include the buttons
DisplayText("You are now in the :");
DisplayText(rooms[currentRoom]);
DisplayText("Exits: " + ShowAdjacentRooms(exits[currentRoom]) + "<br />");
DisplayText('DB:' + currentRoom + 'Light:' + lightLevel + "Hits:" + hits);
if (getObjectForRoom(currentRoom) != -1) {
var index = getObjectForRoom(currentRoom);
DisplayText("You can see " + GameObjects[index]);
}
//If there is something in our inventory then display it
if (inventory.length > 0) {
DisplayText("You are carrying: ");
for (var i = 0; i < inventory.length ; i++) {
DisplayText("-" + GameObjects[inventory[i]]);
}
}
if (message != null)
DisplayText(message.toUpperCase());
//Game over code
if (IsDragonAlive) {
$('#GameOverDiv').hide();
$('#GameDiv').show();
}
else {
$('#GameOverDiv').show();
$('#GameDiv').hide();
}
message = "What?";
}
//Replaces the indexOf js function as i have found it doesn't always work for me!!!!!!!!
function checkIndex(issFullArray, issToCheck) {
for (i = 0; i < issFullArray.length; i++) {
if (issFullArray[i] == issToCheck) {
return true;
}
}
return false;
}
//Uses the text for a room to build a string that shows which rooms are next to the current room
function ShowAdjacentRooms(e) {
var newExits = "";
if (e != null) {
for (i = 0; i < e.length; i++) {
if (i === e.length - 1) {
newExits += e.substring(i, i + 1);
} else if (i === e.length - 2) {
newExits += e.substring(i, i + 1) + " & ";
} else {
newExits += e.substring(i, i + 1) + ", ";
}
}
}
return newExits;
}
//Simple js function to display a line of text
function DisplayText(text) {
$display.html($display.html().toString() + text + "<br>");
}
//Each round we call this function to do all the main game processing
function ProcessGameRound(command) {
//Remove any spaces from the command text
trimCommand = $.trim(command);
//Process command takes the players action
ProcessCommand(command);
//NOw that we have taken the players logic we need to activate the main game room logic
if (currentRoom == 10 && OgreAlive) {
//if you are fighting the ogre and you have the spells
if (checkIndex(inventory, 3)) {
message += "\<br\>YOU attack the ogre with magic spells and kill him!";
OgreAlive = false;
}
else {
message += "\<br\>Ogre attacks you!";
hits--;
}
}
//If you are in the final room and the dragon is still alive
if (currentRoom == 31 && IsDragonAlive) {
//if you are fighting the dragon and you have the oil, burning torch
if (checkIndex(inventory, 5) && checkIndex(inventory, 9) && checkIndex(inventory, 12)) {
message += "\<br\>You attack the dragon with oil, burning torch and the wand of Wind - It creates and kill him!";
IsDragonAlive = false; //End Game
}
else {
message += "\<br\>The dragon attacks you with firebreath and kills you!";
hits = 0;
}
}
if (currentRoom == 25) {
//if you are fighting the gas room burning torch
if (checkIndex(inventory, 10)) {
message += "\<br\>The gas in the room is ignited by the torch - You become a human BBQ and die!";
hits = 0;
}
}
DisplayGameScreen();
}
function ProcessCommand(command) {
var direction = command;
message = "OK";
switch (command) {
//Movement Code
case "N":
if (exits[currentRoom].indexOf(direction) > -1)
currentRoom -= 8;
else
message = "Can't move there";
break;
case "S":
if (exits[currentRoom].indexOf(direction) > -1)
currentRoom += 8;
else
message = "Can't move there";
break;
case "E":
if (exits[currentRoom].indexOf(direction) > -1)
currentRoom++;
else
message = "Can't move there";
break;
case "W":
if (exits[currentRoom].indexOf(direction) > -1)
currentRoom--;
else
message = "Can't move there";
break;
//End of Movement Code
case "P":
pickup(currentRoom);
break
case "A":
if (exits[currentRoom].indexOf(direction) > -1)
message = "About ... Game built for #1GAM, LD48 (failed) and my friend Hilary";
break
case "?":
message = "The following commands are valid: N S E W P A ?";
break
}
}
//JQuery selector that handles the form submit -
$('#input form').submit(function (evt) {
ProcessGameRound($('#userInput').val().toUpperCase());
$('#userInput').val('');
evt.preventDefault();
});
//sets the output div to the display variable
$display = $('#output');
// This is jQuery selector that picks up an event from the button - in this case we look at the value of the button ie. its text and use that
//to call the same function as we would call from the equivalent keyboard command
$(".button").click(function (e) {
switch (this.value) {
case "N":
ProcessGameRound('N');
break;
case "S":
ProcessGameRound('S');
break;
case "E":
ProcessGameRound('E');
break;
case "W":
ProcessGameRound('W');
break;
case "F":
ProcessGameRound('F');
break;
case "P":
pickup(currentRoom);
break;
case "A":
ProcessGameRound('A');
break;
}
});
DisplayGameScreen();
});
</script>
Are the bugs
Yep – Totally , lots that the point – we’ll start cleaning them up in the next version
Next
I’ll add in a series of improvements in version 2 of this game.
Source Control link
Doms Code 