CellCode

A cell-growing game to help you improve your programming skills!

Comment

Inspiration

We wanted to make a platform that aided students learn programming, specifically JavaScript. The inspiration for our actual game design came from Conway's Game of Life, which involves cell growth on a gridded screen.

What it does

In our game, players can program the moves of different cell groups based on their colours.

Your cells:

  1. Wall → black; doesn't move.
  2. Pusher → yellow; pushes up to x blocks in direction away from it; x and direction can be set.
  3. Generator → blue; if the cell in direction of it is empty, creates a cell of type y there; y and direction can be set.
  4. Duplicator → pink; copies a certain type of cell from adjacent input face a and duplicates it to another adjacent output face b; both a and b can be set.
  5. Goal → green; this is the goal that should be reached by the students; when all the green cells have been reached, the level has been passed!
  6. Blank → gray; this is a blank cell.

Project layout

  • Cell grid → the place of cell growth located on the right hand side of the screen; shows the output of the code from the script box.
  • Script box → the place where students enter their code, located left-most on the screen; it's the input that shows the output on the cell grid.
  • Cell selector → a navigation bar to select the type of cells being used, located just to the right of the script box.
  • Cell indicator → a text visual showing which type of cell is being used, located just below the script box and cell selector.
  • Box → a red box-like movable indicator of whether or not the code entered by the student is running or not.

Example code elements On an empty cell:

let right = board?.[i+1]?.[j];
let up = board?.[i]?.[j-1];
let down = board?.[i]?.[j+1];
let all = [left, right, up, down];

let total = 0;
for (let i = 0 ; i < all.length ; i++) {
    if (all[i] == 1) total++;
}

if (total < 2) {
    arr[i][j] = 0;
}

On a wall cell:

let right = board?.[i+1]?.[j];
let up = board?.[i]?.[j-1];
let down = board?.[i]?.[j+1];
let all = [left, right, up, down];

let total = 0;
for (let i = 0 ; i < all.length ; i++) {
    if (all[i] == 1) total++;
}

if (total >= 2) {
    arr[i][j] = 1;
}

Alternative wall cell code:

if (arr[i+1][j] == 0) {
    arr[i+1][j] = 1;
}
if (arr[i-1][j] == 0) {
    arr[i-1][j] = 1;
}
if (arr[i][j+1] == 0) {
    arr[i][j+1] = 1;
}
if (arr[i][j-1] == 0) {
    arr[i][j-1] = 1;
}

In order to run the above, please paste the code into the script box. Then, click just below the cell grid, and hit the space bar. The indicator box will turn green! You can start selecting the cell you want to use from the cell selector, and clicking the grid cell into which you would like to place the cell. If you click the space bar once again (while the cell grid is selected), the programs will all stop running and the button will turn red.

A cool example: Cell Wars

Brown/moveable:

let deathChance = 5;

if (arr[i+1][j] == 1) {
    deathChance--;
    arr[i+1][j] = 2;
}
if (arr[i-1][j] == 1) {
    deathChance--;
    arr[i-1][j] = 2;
}
if (arr[i][j+1] == 1) {
    deathChance--;
    arr[i][j+1] = 2;
}
if (arr[i][j-1] == 1) {
    deathChance--;
    arr[i][j-1] = 2;
}

arr[i][j] = (Math.floor(Math.random()*10)<deathChance)?2:0

Black/wall:

if (arr[i+1][j] == 0) {
    arr[i+1][j] = 1;
}
if (arr[i-1][j] == 0) {
    arr[i-1][j] = 1;
}
if (arr[i][j+1] == 0) {
    arr[i][j+1] = 1;
}
if (arr[i][j-1] == 0) {
    arr[i][j-1] = 1;
}

Click under the cell grid, hit the spacebar, and then place a black cell on the grid, and a brown cell within the black region.

How we built it

The game was created in JavaScript. Arrays are used to store the cell positions on the screen. The program goes through every cell to find its type and its behaviour to perform an action accordingly. Conditional structures, like if-statements, were used to see if certain cell conditions were met (ie. to check if a cell is trying to be moved into a non-moveable wall). The Goal cells were also checked using if-statements, which checked to see if they had been reached. Finally, once all Goal cells have been reach, and thus a level has been achieved, the level number is incremented, and the user moves on to the next level.

Challenges we ran into

Ambitious Goals At first, we set up very ambitious goals for ourselves, which included extensive backend for student and teacher login, registration, set up of accounts, creation/joining of classes, creation of levels, creation of our own simplified programming language, and much more. However, very close to the submission time approximately 30 minutes before t-t, we decided to shift our focus towards the game itself, as well as parsing the JavaScript code entered by the users.

Organization As we worked through the hackathon, the number of files we had to work with was continually increasing. We had very many backend and frontend files that had to work with one another, and it was a challenge to get all of the files organized in such a way that was accessible to every group member. Everyone was working on the same codebase, and editing the same files, so it was difficult to organize the changes being made. But, in the end, everyone split forces and were generally able to not share file editing at the same time.

Accomplishments that we're proud of

We're proud of making a pretty creative functioning game. It took us a very long way to come here with a lot of twists and turns, and this isn't exactly the result we thought we would end up with, but that's to be expected of most projects.

What we learned

Caleb:

  • implementing complicated cell movement within JavaScript files
  • debugging at 4 in the morning isn't a great idea :D

Daniel:

  • password / registration interaction for the login and register pages for the originally-planned website
  • cellular automatta

Catherine:

  • integrating front and backend (sort of); this was my first time programming in JS without following a structured tutorial
  • working with FlexBox (usually work with Grid)

What's next for CellCode

We would love to bring back the backend frontend integration into our project. Two of our three group members worked on the front/backend integration, so it was definitely a large part of our project. However, we decided to remove it for now, since it was getting very close to the due date and some of the key elements were still not working. However, we would really like to work more on this and bring it back into the game website design, since it would make the game environment more classroom-like (ie. with classroom creation and joining, teacher/student accounts, assignments, etc.).

We would also like to go through with our original idea of making a programming language specifically for this game that would be very simple to understand. It would be something like Scratch, which is considered very user-friendly, but in text form, so students would get the experience of using text-based programming while also learning the fundamental logic of most programming languages.

Built With

Share this project:

Updates