Doomball: the Genesis

This game used to be called Artifact War

Hive Warriors

I made a board game last year, loosely based on American football, where two armies of fantasy races try to snag an artifact in the middle and run it past the opponent’s side of the board. I wrote up some rules, I wrote down some pseudocode logic because I wanted to turn it into a computer game, I made up some nine different races and hand drew the armies for them, I made custom pixel art to represent the pieces, I drew up templates and started researching how to be better at pixel art so that I could make it look better - I guess I kind of got into it.

Then I stepped away.

I haven’t sat down with this project for like a year, it was a fun one too. Now I think I’m going to try to leave my dream and turn my weird little board game into a computer game.

Tonight I started thinking about the constructors I’m going to need.

var Unit = function() {
	this.race = "string"; 
	this.name = "string";
	this.id = 0;
	this.level = 1;
	
	this.range = {
		"value": 1,
		"special": false
	};
	
	this.attack = {
		"value": 2,
		"special": false
	};
	
	this.defense = {
		"value": 1,
		"special": false
	};
	
	this.move = {
		"value": 1,
		"special": false
	};
	
	this.special = "string";
	this.tokens = [];
	
	this.url = "string"
}

// Special abilities: Steadfast, Pinning, Overrun, Armor Piercing, Charging, Explosive, Cowardly, Leadership

This is going to have to be some kind of construction function, possibly taking an object as an argument and filling in default values if not specified, so parts will have to be replaced with more useful defaults. This might be a good place to add some prototype actions to let the characters move on the field.

var Space = function(){
	this.x = 0;
	this.y = 0;
	this.terrain = "Plains"
}

I’m probably going to want to structure this so that it can be used in a gameboard constructing function, so the arguments are going to have to be like (x, y, terrain) and then the terrain will probably be a one letter thing so that I can specify maps pretty easily.

var Token = function(){
	this.name = "string";
	this.unique = true;

	this.url = "string"
}

Was considering adding an x, y locator object and an owner object but I don’t know now, since I’m probably just going to push tokens into an array on the individual units anyway. Seems like the easier way to do it. Maybe add a prototype .effect() function that checks the string and then applies the appropriate effect to the character.

A lot is going to have to happen in the game logic, though, with various functions checking for the presence of certain tokens and then applying different effects as a matter of course. Some tokens will also be looking for the presence of other tokens, and I’m not sure how to do that.

freeCodeCamp Random Quote Machine

The Challenge

One of the early front-end challenges in the freeCodeCamp curriculum is to make a little app that gives you a random quote when you click a button. You’re also supposed to make it so that you can tweet the quote if it’s a good one, but that was optional when I did the challenge. I think I’m going to have to go back and add that on though because they took out optional User Stories and made them all mandatory, I guess we’ll see.

The Archive

I started by looking for a solid API to provide random quotes and I found quite a mess. Lots of websites that wanted to be like “you can only do so many quotes” or gave instructions I didn’t really get at the time, so I decided to skip that mess and do it myself. I split it up into three parts - the first part was a simple array containing the quotes I’d picked out as what were coincidentally JSON objects. I don’t think I totally understood JSON objects at the time.

{'id': 0, 'quote': 'string', 'author': 'string', 'source': 'string'}

So that worked out pretty well. I could generate a random number between 1 and the number of quotes and use that to snag the quote I wanted to render on the page.

The Collector

Once I started grabbing quotes online and throwing them into the page, though, I realized that it was tedious and I hated it, so I threw together a quick page that gave me a form I could put the info into to get a nicely formatted object to copy-paste into the database. Obviously a full stack program would submit it directly, but this is Codepen so it’s all front end stuff.

See the Pen QuoteForm by James Beardsley (@beardsley-james) on CodePen.

$('#id').val(quotes.length);

This part sets the ID number as the next one higher than the highest one in use so I don’t have to figure it out manually.

$('#quoteGen').on('click', function(){
  $('#result').text('{id: ' + $('#id').val() + ', quote: "' + $('#quote').val() + '", author: "' + $('#author').val() + '", source: "' + $('#source').val() + '"\} ');
})

This is the meat, this snags values out of all the form sections and tosses them together into a juicy javascript object. I think now I would probably pull in some variables to gussy it up a bit but honestly this is so clean and functional I don’t think it’d be an improvement. Also note the use of single quotes - I like double quotes usually since I’m an American but all the quotes I was inputting had double quotes too, so I had to use single quotes to not break the scripting.

for (i = quotes.length - 1; i > 0; i--) {
  document.write("</br><p>ID: " + quotes[i].id);
  document.write("</br>Quote: " + quotes[i].quote);
  document.write("</br>Author: " + quotes[i].author);
  document.write("</br>Source: " + quotes[i].source)
}

And this part prints all the existing quotes onto the page when it loads, which is a nice feature. It’s not totally necessary I suppose, but it doesn’t hurt.

I didn’t think to throw everything into the mandatory $(document).ready() jQuery handler, but it doesn’t seem to have hurt the functionality any so no worries on that front.

The Product

Finally I threw together the actual random quote generator which wasn’t really as inspired as the pseudo back end I don’t think.

See the Pen Random Quote Generator by James Beardsley (@beardsley-james) on CodePen.

I made one in yellow.

See the Pen RQG Candy Apple Green by James Beardsley (@beardsley-james) on CodePen.

And I made this one called candy apple green for some reason. I don’t really know why. It doesn’t have any actual green on it but that’s what it’s called. I really don’t remember where the name came from.

var previous;

$(document).ready(function() {
  $('#button').on('click', function() {
    var i = Math.floor((Math.random() * quotes.length) + 1);
    if (i === previous) {
      i++
    };
    if (i > quotes.length) {
      i = 1
    };
    previous = i;
    $('#quote').html(quotes[i].quote);
    $('#author').text(quotes[i].author);
    $('#source').text(quotes[i].source)
  })
});

One of the big things that bothered me about the original version of this was that sometime you would click on it and it would just show you the same quote as the one you already had. No big deal if there were a lot of quotes, since the chances of getting a duplicate were pretty low, but my enthusiasm for digging up appropriately pretentious quotes flagged pretty quickly. Nice and easy, though, just saves whatever the ID of the current quote is and adds one if it’s a duplicate. Then I ended up with blank pages when it ran into the ceiling, so I made it reset back to 1 if it hit the end. Other than that it’s just filling in some variables and throwing them onto the page.

I put this sucker together like a year ago but I think it holds up pretty well. Someone in the freeCodeCamp chatroom yesterday said they liked how clean the javascript was and so do I. It’s a good indication of my proclivity for modulization, which I hope to explore going forward.

Just Started Playing Smite

I’ve been play Smite lately. A few years ago I saw my brother-in-law playing a Warcraft III mod where teams of heroes smacked up mobs of npcs and each other on a three lane map and I didn’t really think it was going to end up being a subgenre, but here we are seven years later and people are playing dressed up versions of that game for a million dollar while I didn’t have a good gaming PC.

I found the new Tribes game on a free games list and when it was downloading this other game they made called Smite where gods smack each other up, and mobs of npcs too, and I decided to try it since I have a nice new computer. It’s pretty good.

So far I’ve lost a lot of matches and gotten a few satisfying kills. My boy is Poseidon, he can make a kraken come up and smack people up for him which is pretty great. His abilities are tough to aim sometimes but it’s no big deal. I miss sometimes, I think if I hit every time I’d probably have more kills.

Poseidon

He gets faster when he hits people, though. I watched a video that said to hang back and throw shade at dudes from far away until you get your ultimate up and then try to get a hero kill and it seemed to work. I’ve been playing with auto items for streamlining reasons for a bit but I’ve started picking my own weapons and it’s working alright.

I switched over to Ra because I would get a bunch of gems for mastering a character and he was pretty sick, but now I’m messing around with a big thug ice giant that breathes ice and also can shoot ice spikes out of his back. Good times.

The Fantasy Battle Generator

Like, I’m sure, many of my readers, I frequently read 300 page rulebooks for games I never intend on playing simply for the pleasure of studying irrelevant minutiae. In the course of reading the latest version of Warhammer Fantasy Roleplay, a really gritty and fun roleplaying game for people that have a keen dislike for the characters they’re roleplaying, I found myself wondering how some of the combat mechanics might play out if they were automated.

At this point I was basically just messing around on Codepen. I came up with this:

See the Pen Warhammer Adventure by James Beardsley (@beardsley-james) on CodePen.

Basically you can click on a couple buttons, come up with some semi-randomized Warhammer Fantasy critters, and then make them fight to the death for fun, with a nice little adventure read out that tells you how hard they’re hitting each other.

Now there are some serious balance issues with this “game”, specifically that there’s this whole system of avoiding combat that only applies to opponents that are using ranged weapons, which means nine times out of ten your orc buddy is going to stomp whatever poor halfling archer you’re sending his way.

I had to make some tough choices about what kinds of characters I was going to include, too, and I haven’t even put in a magical system or any kind of way of keeping a range value between the character to make bows and arrows more effective.

I’d like to put in some kind of ammo counter too, so that guns are more of a thing. Tighten up a bit. It’s tough to feel that motivated to, though, since as far as I can tell the major consumer category for this program consists of me and I’m not even that interested in running it a bunch of times. Fun exercise, though, and it’s really the first time I tried to stretch my legs out with object oriented programming concepts.

The latest version is here, which I moved over from Codepen when I decided to host on Github for now. The main thing I did in the move was separate the parts of the Javascript code bank into their own separate files which isn’t at all best practice at this point, and make the form to pick characters a bit more robust and interesting.

I also added an ability for the game to store and serve pre-generated characters types, which is something I might revisit when I start hooking some of these things up to backend software.

Twitch JSON freeCodeCamp Project

Project goals:

  • Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/adBpOw.
  • User Story: I can see whether Free Code Camp is currently streaming on Twitch.tv.
  • User Story: I can click the status output and be sent directly to the Free Code Camp’s Twitch.tv channel.
  • User Story: if a Twitch user is currently streaming, I can see additional details about what they are streaming.
  • User Story: I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.

Personal challenges:

  • Change the layout to something more interesting than just an instant messenger user list. As uninterested in I am in watching someone else code, people apparently are into it. I’m thinking something where the unbroadcast channels kind of fade out and drop back out of notice, but they should still be present.
  • Simple, relevant color scheme. This isn’t always my strong point right now but it’s something I could stand to get better at. I like the way my Hyde blog looks, just the one color with white space thing. I’m more typographic with my design anyway, but it’s not in vogue so I think I tend to try to fit more standard current design paradigms and I’m not sure it’s helping me any.
  • Let’s tear out as much of it into different functions as possible. Use that Clean Code stuff again, even though it’s easy to get used to scrappy duct tape work when you’re getting that direct feedback from codepen. May I should work on it offline first.
  • Let’s introduce another tool, let’s throw some good .svg stuff in the background but nothing too tacky. I was looking at the construction paper SVG background on SVG Generation and I want to use that as the background.
  • Maybe as the foreground items too. With very mild drop shadows.
  • Ah yeah construction paper theme I can get on this, it’s going to look like South Park.
  • Alright maybe I should get some jQuery UI stuff in there too so that the boxes are kind of bouncing around a little bit.
  • I think I’m going to try using Jade and maybe Sass on this too because I want to learn to use those so I can work on backend stuff a little better.
  • Alright maybe not Sass but at least Jade.