Skip to main content

Seeking Questions (and DOM/HTML5 Game Layout)

I had been pondering some architecture issues after a day of refactoring and cleanup on an HTML5 game I’m building at work. Some common data/UI integration problems were bugging me, mostly just for the feeling of good separation, and I was about to post to r/gamedev:

I'm looking for advice on some minor architect issues in some HTML5 gamedev work I've been up to. My background is as a web developer professionally and a very trivial game developer as a hobby, and I"m only recently combining those. However, for lots of reasons related to the positioning of this game as *part* of a larger web project at work, it isn't a traditional <canvas> HTML5 game, but being done with a combination of DOM and concern-separated logic.

I'm having trouble figuring out how where to draw the lines between the bits that implement my UI and the bigs that run logic behind it, and how to keep them in sync efficiently. There are patterns for this, but I don't feel like my usual approaches make sense in a game context, so I'm looking for any advice you've got.

This is a card game, though the situation and question would apply to other types of games, as well. Right now, I have a new refactoring that gives me two parts: a card logic component, which shuffles the deck, draws cards, manages a discard pile, play states, etc; and, all the animations and transitions of the card sprites that I display.

BAM. Right there the answer smacked me in the face. And at that moment my first thought was how interesting it is for the act of writing out a problem to trigger the solution in your head, and this isn’t a new idea in the world of even for myself. It is, however, something I want to cultivate, both in myself and others.

Write more and often, about your projects.

I try to keep a development journal and used to do a better job of it. I’m going to look at setting up some kind of prompt to keep myself reminded through the day and maybe that will help. But, on to the solution here.

If I were responding to this post, rather than writing it, maybe this is what I would say:

Separation is great, but at some point these different parts just have to talk to each other. At least, something has to connect them. You’re going to be redundant if you model all the card state twice, both in your logic and your UI, so keep one of them dumb. That’s probably going to be the UI.

Those visuals need to respond to the state changes in the logic, rather than trying to mirror them.

That logic going on, tracking your cards moving between the deck and the hand and discard pile and whatever other states you have needs to allow some reponse to that state changing. When the logic draws a hand from the deck, the visuals need to know which three cards to slide across the screen into your hand. When you play a card, the player needs to see that happen.

Just fire a simple event when the state of a card changes in the logic, and let the DOM update accordingly.

Comments

Popular posts from this blog

Why I Switched From Git to Microsoft OneDrive

I made the unexpected move with a string of recent projects to drop Git to sync between my different computers in favor of OneDrive, the file sync offering from Microsoft. Its like Dropbox, but "enterprise."

Feeling a little ashamed at what I previously would have scoffed at should I hear of it from another developer, I felt a little write up of the why and the experience could be a good idea. Now, I should emphasize that I'm not dropping Git for all my projects, just specific kinds of projects. I've been making this change in habit for projects that are just for me, not shared with anyone else. It has been especially helpful in projects I work on sporadically. More on why a little later.

So, what drove me away from Git, exactly?

On the smallest projects, like game jam hacks, I just wanted to code. I didn't want to think about revisions and commit messages. I didn't need branching or merges. I didn't even need to rollback to another version, ever. I just …

Respect and Code Reviews

Code Reviews in a development team only function best, or possible at all, when everyone approaches them with respect. That’s something I’ve usually taken for granted because I’ve had the opportunity to work with amazing developers who shine not just in their technical skills but in their interpersonal skills on a team. That isn’t always the case, so I’m going to put into words something that often exists just in assumptions.
You have to respect your code. This is first only because the nature and intent of code reviews are to safeguard the quality of your code, so even having code reviews demonstrates a baseline of respect for that code. But, maybe not everyone on the team has the same level of respect or entered a team with existing review traditions that they aren’t acquainted with.
There can be culture shock when you enter a team that’s really heavy on code reviews, but also if you enter a team or interact with a colleague who doesn’t share that level of respect for the process or…

CARDIAC: The Cardboard Computer

I am just so excited about this.


CARDIAC. The Cardboard Computer. How cool is that? This piece of history is amazing and better than that: it is extremely accessible. This fantastic design was built in 1969 by David Hagelbarger at Bell Labs to explain what computers were to those who would otherwise have no exposure to them. Miraculously, the CARDIAC (CARDboard Interactive Aid to Computation) was able to actually function as a slow and rudimentary computer. 
One of the most fascinating aspects of this gem is that at the time of its publication the scope it was able to demonstrate was actually useful in explaining what a computer was. Could you imagine trying to explain computers today with anything close to the CARDIAC?

It had 100 memory locations and only ten instructions. The memory held signed 3-digit numbers (-999 through 999) and instructions could be encoded such that the first digit was the instruction and the second two digits were the address of memory to operate on. The only re…