A screenshot of a completed game of Super Tic Tac Toe

HOW TO PLAY

Winning The Game

Scoring Points

The player with the most points at the end wins!

Gameplay Mechanics

Playing Moves

Play a number of moves in a straight line to score points. This number is determined in game settings.

Just like in tiny-tic-tac-toe, lines can be in any direction: vertical , horizontal , and both diagonals .

We can also assign a line bonus for any line that spans uninterrupted from one side to the opposite side of the board. This makes the strategy a bit more complex.

This line earns a full bonus because it spans the long dimension. The bonus will be whatever was selected in settings.

These lines are each partial line bonuses; they are calculated as (linebonus / (longer / shorter)). So, in this example with a linebonus set at 8, with 8 columns and 4 rows, that means the partial bonus is (8 / (8 / 4)) === (8 / 2) === 4 for each of these lines (yes, I chose these figures for easy math)

Unlike traditional (tiny) tic-tac-toe, in Super-Tic-Tac-Toe you play on an expanded gameboard of your choosing, up to hundreds of squares. You also select how many moves each player gets per turn, and how many cells (squares) in a row earns the first point.

Winning The Game

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores ipsum blanditiis omnis quos illum, error eum debitis porro voluptates, incidunt modi nam laboriosam nemo nobis facilis asperiores dolore laudantium eveniet ullam veritatis? Dolore ipsam quas consequuntur, deleniti, totam quasi beatae eligendi, repellat ex culpa expedita quia mollitia. Enim, odit quisquam molestias minima laboriosam eum accusamus illum architecto. Tenetur id minus quasi vero in dicta suscipit quam ab rem sequi porro qui, odio quod molestias natus dolor doloremque veritatis culpa sint aspernatur. Veritatis in modi atque nulla illo rerum itaque eligendi, quaerat ullam vel doloremque ab. Rem labore ut officia doloremque!

Game Setup

Choose between two setup methods

In every game, you determine the number of players (between 2-8), and features like how many points in a row to score, how many points as a bonus for a complete line, and how large the gameboard will be relative to the viewport.

However, not all configurations will result in a game with an equal number of turns per player, or even a whole number of turns per round. Therefore there are two setup choices provided, both of which compute and limit your options to yield an equitable game configuration.

  1. Setup game by board size in rows and columns
  2. Setup game by number of moves in each turn,

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores ipsum blanditiis omnis quos illum, error eum debitis porro voluptates, incidunt modi nam laboriosam nemo nobis facilis asperiores dolore laudantium eveniet ullam veritatis? Dolore ipsam quas consequuntur, deleniti, totam quasi beatae eligendi, repellat ex culpa expedita quia mollitia. Enim, odit quisquam molestias minima laboriosam eum accusamus illum architecto. Tenetur id minus quasi vero in dicta suscipit quam ab rem sequi porro qui, odio quod molestias natus dolor doloremque veritatis culpa sint aspernatur. Veritatis in modi atque nulla illo rerum itaque eligendi, quaerat ullam vel doloremque ab. Rem labore ut officia doloremque!

Choose Which Method To Setup Your Game

In every game, you determine the number of players (between 2-8), and features like how many points in a row to score, how many points as a bonus for a complete line, and how large the gameboard will be relative to the viewport.

Choose Which Method To Setup Your Game

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores ipsum blanditiis omnis quos illum, error eum debitis porro voluptates, incidunt modi nam laboriosam nemo nobis facilis asperiores dolore laudantium eveniet ullam veritatis? Dolore ipsam quas consequuntur, deleniti, totam quasi beatae eligendi, repellat ex culpa expedita quia mollitia. Enim, odit quisquam molestias minima laboriosam eum accusamus illum architecto. Tenetur id minus quasi vero in dicta suscipit quam ab rem sequi porro qui, odio quod molestias natus dolor doloremque veritatis culpa sint aspernatur. Veritatis in modi atque nulla illo rerum itaque eligendi, quaerat ullam vel doloremque ab. Rem labore ut officia doloremque!

Strategies

Blocks and Lines

The lower the cells-in-a-row to score the more powerful blocks are, because you score points in all four directions. The higher the cells-in-a-row to score (the longer the line required to score), the stronger the strategy of building long lines.

FEATURES

Emojis!

Express Yourself

Players can select from any emoji their operating system supports.

LocalStorage

Stores game state between page reloads

This game utilizes localStorage to preserve state between page reloads - meaning, you can reload the page as often as you want. You could even leave the game and come back to it next year, as long as you haven't cleared localStorage.

If you encounter a bug or the game freezes, your best bet is to clear localStorage via your browser's devtools! This can also be accomplished by clicking the "RESET ALL" button in the Menu modal

ISSUES TO BE AWARE OF

Mobile and Responsive Design

Some viewport sizes are not functional

Responsive design is hard! Especially when you're designing from scratch without a CSS library. I've poured a lot of time into this already, but not all viewport sizes work well; some may be dysfunctional due to poor placement and sizing of elements obscuring gameplay or game controls. This is a Work-In-Progress, and I do intend to ensure a solid mobile experience - but it may have to await a complete re-write, which I am planning.

This app is optimized for desktop (large landscape-mode screens)!

DEVELOPMENT THOUGHTS

This is where I'll share a bit of a rough roadmap, a few features I want to add. I also want to share a bit of the technical basis of the app, and the work that went into it.

User Auth

User accounts and profiles

Users can login, customize their profile and preferences, and track their game stats - things like win:loss ratio, and more.

Multiplayer - Multi-Device

Players can connect from different devices and locations

Currently, the game is single-device multiplayer. The most obvious improvement is to enable proper networked play. I'm expecting to implement a Websockets solution.

Advanced Gameplay Variations

Too many ideas...!

I have many ideas for adding complexity and options to the game; some specifically for this game, and other game ideas I've been collecting for two decades, some of which can be applied here.

Developer Course

How would you like to learn how to build this app?

I want to help you learn how to code, design, and realize the web apps you envision!

It's taken me years of discipline - blood, sweat and tears - to get to where I could build this on my own. Along the way, I've wasted an enormous amount of time and energy in deadends and poor practices. I sincerely want to help you learn better and faster than I did.

I'm planning (once I've completed a few more features) to start again from scratch and rebuild this entire app - making videos of the process as I go, and creating a course to teach web app development with this game and website as a template.

I have done a number of development courses on various subjects over the years, and most projects are very simple; you learn basics, but not how to integrate with other skills and technologies.

This app would be the most complex course learning project I'm aware of. With my skill and experience in teaching and instructing; the clarity with which I'm able to articulate and teach concepts, processes, and practices; and my broad knowledge of the development landscape and curation of excellent tools and resources, I know I can make a valuable contribution to the industry, and really help ordinary folks learn advanced web app development.

Take a moment to plug in your email address here, and I'll keep you posted on development of both the app and the course!