Sushi Train Circuit Game Tutorial

Sushi Train Circuit Game Tutorial

In today’s Sushi Train Circuit Game we use yesterday’s Circuit Webpage Primer Tutorial as the underlying webpage design basis.

Many things in life are based on circuits. Think electronics, think racing, think cycling velodromes, think roller derby, think ice skating, think round trips, think lunch … think Sushi Train.

Think Sushi Train … think (in particular) Asian food emojis, we reckon. Are you hungry yet?

So what were the challenges making this game?

• marrying the order of td element cells with the different order of a Sushi Train “circuit” (which would be clockwise, or anticlockwise) … resulting in us using “array mapped indexing” (ie. array indexes which map to the “reorderings” required)
• making a game out of the Sushi Train scenario … so we have a “lame” 4 player game, where the player with the most expensive tastes wins
• using multiple class techniques (CSS functionality involving :before and :after (selectors) and content: exemplified by …
  
.f1:before { content: '\01f371' }

  ) to make the Sushi Train go around (ie. shuffle along to adjacent Sushi Train cells the styling of its predecessor, when the setTimeout Javascript (timer) function re-executes) … that is, unless in the meantime …
• the player, in focus (each is given 6 seconds “air time” (or until a click/touch happens)), clicks/touches (ie. selects) a “food” item, whose “price” value (hidden to the user, whereas its name is available “on hover”) contributes to that player’s score in the game

Again, you can see the HTML and CSS (combination of head style definitions and inline CSS within the HTML) at circuit.htm (changed this way) and try it out for yourself at our live run link today. We hope it gets you singing …

🎶 If you knew sushi,
Like I know sushi, 🎶
Oh, oh, 🎶 oh what a Californian rnoll

Previous relevant Circuit Webpage Primer Tutorial is shown below.

Circuit Webpage Primer Tutorial

We’re on our way to a more fully fleshed out web application that makes use of a “circuit”, but we want to approach this project in stages.

Stage one is to create some initial HTML and CSS to show a circuit. We construct it, debatably, via underpinnings that involve …

• HTML table element
• Cells (td elements) involving colspan and rowspan attributes
• Background colours strategically defined
• Border characteristics such as …
  1. CSS border-radius
  2. Some CSS border-top and border-bottom merged into background colour with an offset …
  3. HTML hr elements replace some border-top and border-bottom “lines”

You can see the HTML and CSS (combination of head style definitions and inline CSS within the HTML) at circuit.html and try it out for yourself at our live run link today. We hope it gets you thinking.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.