CS 112 - Introduction to Computer Science II
4th Hour Project: Flutter Simple Game Design

Due: before class on

NOTE: This work is to be done in pairs.  I strongly recommend the practice of Pair Programming described simply here.  Although team members are permitted to divide work, each team member should be able to informally present all work of his/her teammate.

Suggested Timeline:

I am available for feedback and support throughout the semester, but there will only be a limited time to help if things are left until the last moment.

There is only one actual due date for this project (see "final draft" above).  Part of the learning experience here is to pace your own work towards a larger goal.  I've made suggestions as to how one might break up the work and spread out your effort, but a large part of successful work practice is the ability to give priority to important, non-urgent tasks over unimportant, urgent tasks. This point is well-described in Covey, Merrill, and Merrill's book First Things First, where they assert that work effectiveness is highly correlated with predominance of "compass-driven" important, non-urgent activity over "clock-driven" unimportant, urgent activity.  For larger college projects, especially those that will develop important skills or open new doors, one needs to develop an ability to plan and track important tasks so as to avoid procrastination and thus reduce resulting important, urgent activity.  See also Brian Tracy's relevant book Eat That Frog!: 21 Great Ways to Stop Procrastinating and Get More Done in Less Time. For an excellent book on forming and breaking habits, I recommend James Clear's Atomic Habits.

Here are more "Getting Things Done" materials to help you improve as a student on time management and task tracking.

Objectives

Choose a Game/Puzzle

Choose a game/puzzle from among the following choices, or get approval for an alternative simple game/puzzle:

Please email me your choice from above, or plan to meet with me to propose an alternative choice.

Traffic Lights Game

The game Traffic Lights, originally called Semaphore, was invented by Alan Parr.  Reported years of invention/publication vary from 1985 to 1992 to 1998.  We will focus on the 3-by-4 version of the game.

Each square of a 3-by-4 grid is considered to be a light, initially off.  Players alternate selecting a square that does not show a red light.

The first player that makes three lights on in a row/column/diagonal of the same green/yellow/red color wins.  (Played perfectly, 3-by-4 Traffic Lights is a 2nd-player win.)

Here are sources where you can learn more about the game:

Great Rolled Ones

Great Rolled Ones (GRO) is a dice game for two or more players using 5 standard (d6) dice. In this paper, we will focus on the two-player GRO game. Players will have the same number of turns. A turn consists of a sequence of player dice rolls where rolled 1s are set aside. The turn ends when either the player decides to hold (i.e. stop rolling) and score the total number of non-1s rolled, or has rolled three or more 1s, ending the turn with no score change. A round consists of each player taking one turn in sequence. Any player ending their turn with a goal score of 50 or more causes that to be the last round of the game. At the end of the last round, the player with the highest score wins. The rules do not specify whether a player may end their last turn tied with another player, so we make the assumption that a player is constrained to attempt to exceed the score of the current leader in the last round.

Example round:

The game thus consists of roll/hold risk assessment in a race to achieve the top score of 50 or more points within the same number of turns as other players.

Submit a Sketch/Mock-up

Having chosen a game, learned its rules, and played your game, a next recommended step is to concretely sketch what you'd like your app to look like. Sketching on paper, creating slide figures with pretend buttons, etc., is a good way to force yourself to get concrete with your design decisions.

Sample questions:

In whatever form you visualize your imagined app concretely, please share your design with me for feedback via email, in person, etc.

Images and Game Layout

At this stage, create/legally-obtain your project image assets (e.g. dice, cards, etc.). Your design should be color-blind-friendly in some form and should respect copyright.  Color differentiability can be tested through sites such as the Colblindor Color Blindness Simulator (Coblis), but you may also address this design concern through the use of shapes, e.g. this Traffic Lights game image.  (Note how the shapes are cleverly iconic, bringing to mind a circular green light, a triangular yellow yield sign, and an octagonal red stop sign.  For more on color palette design for the color blind, see this article.

While I ask you to give careful consideration of color-blind-friendly design, do not spend too much time on creating your images. I like to recall that many of our students at one time were into a new game called Kingdom of Loathing that was developed in a weekend and incorporated scanned, hand-drawn stick figures as graphics. If you want to hand-draw your icons with crayons, take pictures of them, and scale/crop them to the needs of your app, go for it!

Game State and Text Implementation

At this point, program a Dart programming language object to model game state with methods to take game actions and get game state information. Test this code by writing a simple text-based game interface that makes use of your game state object. At this point, you will need to set up your programming environment and start getting to know Dart (a Google language) and Flutter (a GUI development language layered on top of Dart). Below are resources to help. Flutter/Dart has great documentation, many tutorials online, and you are free to use generative AI to assist in your game development. Warning: You must understand and test each line of code that you submit. Your presentation for a grade will require you to both demonstrate and explain your code.

Before you start coding, you are to complete the Flutter/Dart Tic-Tac-Toe tutorial below.

Installing Flutter / Dart

Both Android Studio ("studio &") and VS Code ("code &") are available on our lab computers.

It is possible for students to install Flutter and Dart on their own personal computers. This is optional and finding IT support is up to you. There are a number of popular integrated development environments (IDEs) for Flutter development. Since one needs Android Studio for Android device emulation, one can simply use the Android Studio IDE with the Flutter plugin. Others prefer Visual Studio Code (VS Code) with the Flutter extension. The choice is up to you. I have tested that our project may be developed with the same steps on either.

Flutter Tic-Tac-Toe Tutorial

There are several online tutorials for implementing Tic-Tac-Toe in Flutter that feature smooth presentation and yet have bad code design. I therefore decided that it would be better for you to have a not-so-smooth presentation with good code design. In particular, I demonstrate the important coding discipline of separating model/logic code from interface code. In this tutorial and your project, the separate concerns of modeling the game and creating the interface to the game are pointedly separated into different files. The game logic file is only Dart without Flutter. Flutter builds its interface on the Dart language, but one ideally shouldn't involve Flutter in the implementation of the game logic.

These videos are flawed, with occasional bugs being introduced by well meaning VS Code autocompletion. At one point, if you see me having difficulty typing an underscore, my keyboard had mysteriously slipped into Spanish mode. :) However, these one-take videos reach the goal and explain the code along the way. You should code along with them at your preferred pace.

Before starting the video, you should create a new Flutter project and make sure it runs properly. The steps are specific to your IDE, so you'll need to do some web searching for a walkthrough of the process.

Optional: I have recently recorded a session of me developing a Chomp app using VS Code and Copilot to generate Dart and Flutter. As you will see, the video is very rough, and Copilot used widgets that were unfamiliar (but intuitive), and generated quite a few errors. If you can stand watching me fumble about, you can see the kind of process I would expect that you would follow for this simple app development project: game state development (modeling rules), any custom widgets, then main app with such widgets (including a stateful widget that updates with your game state).

First Draft GUI

Critique and Improve

Playtest your game a lot.  Make it a game implementation you would want to play.  This is the Golden Rule of programming.

Android and HTML Deployment

Since details will differ with different development environments, I will not list details of this process here. However, it is important to understand that you will not need to submit your work to any app store or deploy it through a third-party website. For Android deployment, you need to build .apk files and put them somewhere within your public_html directory. Likewise for web deployment, you'll generate a directory containing an index.html file with supporting files.

To set permissions such that everything in your public_html folder is publicly accessible, use the recursive command "chmod -R 755 ~/public_html".  Whatever is in your public_html folder will be visible via "http://cs.gettysburg.edu/~<your username>". Note that you'll also need to edit your index.html file to indicate its root directory. Within the index.html file of my sample HTML build at http://cs.gettysburg.edu/~tneller/cs112/flutter/trafficlights/, I needed to edit line <base href="/"> to reflect its address: <base href="/~tneller/cs112/flutter/trafficlights/">

It is not necessary to create custom icons/titles/app names, but there are many sources that can be helpful to put that final polish on your app deployment:

Sample Builds for Traffic Lights

Final Draft GUI

Grading Demo Appointment

During the week of the due date, teams will schedule a 30-minute appointment for demonstration and testing of:

Grading Rubric (20 points total):