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

Interrupting Coders Isn’t So Bad

Here’s a hot take: disrupting coders isn’t all that bad.

Some disruptions are certainly bad but they usually aren’t. The coder community has overblown the impact. A disruption can be a good thing. How harmful disruption might be a symptom of other problems.

There are different kinds of disruptions. They are caused by other coders on your team, managers and other non-coders, or meetings throughout the day.

The easiest example to debunk is a question from a fellow developer. Imagine someone walks over to your desk or they ping you on Slack, because they have “one quick question.” Do you get annoyed at the interruption when you were in the middle of something important? You help out your teammate quickly and get back to work, trying to pick up where you left off. That’s a kind of interruption we complain about frequently, but I’m not convinced this is all that bad.

You are being disrupted but your team, of which you are only one member of the whole unit, is working smoothly. You unstuck …

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…

How To Care If BSD, MIT, or GPL Licenses Are Used

The two recent posts about some individuals' choice of GPL versus others' preference for BSD and MIT style licensing has caused a lot of debate and response. I've seen everything as an interesting combination of very important topics being taken far too seriously and far too personally. All involved need to take a few steps back.

For the uninitiated and as a clarifier for the initiated, we're dealing with (basically) three categories of licensing when someone releases software (and/or its code):
Closed Source. Easiest to explain, because you just get nothing.GPL. If you get the software, you get the source code, you get to change it, and anything you combine it with must be under the same terms.MIT and BSD. If you get the software, you might get the source code, you get to change it, and you have no obligations about anything else you combine it with.The situation gets stickier when we look at those combinations and the transitions between them.

Use GPL code with Closed S…