The code

Published January 21, 2022 © GPL3+

"Connect 4" game on E-ink

In this project we make a connect 4 game using an e-ink display and an ESP32.

IntermediateFull instructions provided715

Things used in this project

Hardware components

2.9inch E-Ink display module

Espressif ESP32

Story

E-ink displays are very nice displays because they are comfortable to look at for long periods of time and they use very little power. Also they can hold the content on the screen even when powered off. Unfortunately the refresh rate is pretty slow. A full refresh on the e-ink display I use takes about 2 seconds and a partial refresh 0.3 seconds. Therefore if we want to play a game on an e-ink display it should be one that works with low refresh rates. That's why in this project we make a "Connect 4" game for the e-ink display.

The rules for "Connect 4" are very simple: Connect Four is a two-player connection board game, in which the players choose a color and then take turns dropping colored discs into a seven-column, six-row vertically suspended grid. The pieces fall straight down, occupying the lowest available space within the column. The objective of the game is to be the first to form a horizontal, vertical, or diagonal line of four of one's own discs.

"Connect 4" game

First of all the e-ink display needs to be connected to the ESP32. The wiring can be different between the ESP32 boards. Here are a few examples from an example sketch for the GxEPD2 libarary:

// mapping suggestion for ESP32, e.g. LOLIN32, see .../variants/.../pins_arduino.h for your board
// NOTE: there are variants with different pins for SPI ! CHECK SPI PINS OF YOUR BOARD
// BUSY -> 4, RST -> 16, DC -> 17, CS -> SS(5), CLK -> SCK(18), DIN -> MOSI(23), GND -> GND, 3.3V -> 3.3V
// mapping of Waveshare ESP32 Driver Board
// BUSY -> 25, RST -> 26, DC -> 27, CS-> 15, CLK -> 13, DIN -> 14
// NOTE: this board uses "unusual" SPI pins and requires re-mapping of HW SPI to these pins in SPIClass
//       see example GxEPD2_WS_ESP32_Driver.ino, it shows how this can be done easily
// mapping suggestion for ESP32, e.g. LOLIN32 D32 PRO
// BUSY -> 15, RST -> 2, DC -> 0, CS -> 5, CLK -> SCK(18), DIN -> MOSI(23), GND -> GND, 3.3V -> 3.3V
// note: use explicit value for CS, as SS is re-defined to TF_CS(4) in pins_arduino.h for Board: "LOLIN D32 PRO"
// mapping suggestion for ESP32, e.g. TTGO T8 ESP32-WROVER
// BUSY -> 4, RST -> 0, DC -> 2, CS -> SS(5), CLK -> SCK(18), DIN -> MOSI(23), GND -> GND, 3.3V -> 3.3V
// for use with Board: "ESP32 Dev Module":

I have a NodeMCU ESP32 so I connected it as follows (display --> ESP32): BUSY --> D4, RST --> RX2, DC --> TX2, CS --> D5, CLK --> D18, DIN --> D23, GND --> GND, VCC --> 3V3

Connection to the NodeMCU ESP32

As the input from the players I used two touch pins on the ESP32. I simply connected D15 (Touch3) and D13 (Touch4) to a wire. If the end of the wire is touched, the ESP32 will recognize this as an input.

The code

For the code to work you need to install the GxEPD2 library and the U8g2_for_Adafruit_GFX library. You also need to have the Adafruit_GFX library.

You may want to adjust the sensitivity of the touch sensor:

 touchAttachInterrupt(T3, gotTouch2, 40);
 touchAttachInterrupt(T4, gotTouch1, 40);

You can replace the "40" with a bigger or smaller number. The bigger the number the more sensitive the input gets.

The touch input T3 sets the row where the next "disc" should be dropped and the touch input T4 drops the "disc".

Code

e-ink_connect4

#define ENABLE_GxEPD2_GFX 0

#include <GxEPD2_BW.h> // including both doesn't use more code or ram
#include <GxEPD2_3C.h> // including both doesn't use more code or ram
#include <U8g2_for_Adafruit_GFX.h>

GxEPD2_BW<GxEPD2_290_T94_V2, GxEPD2_290_T94_V2::HEIGHT> display(GxEPD2_290_T94_V2(/*CS=5*/ SS, /*DC=*/ 17, /*RST=*/ 16, /*BUSY=*/ 4)); // GDEM029T94, Waveshare 2.9" V2 variant
U8G2_FOR_ADAFRUIT_GFX u8g2Fonts;

uint16_t bg = GxEPD_WHITE; //white
uint16_t fg = GxEPD_BLACK;  //black
int x = 150;
int mat[6][7] = {{0,0,0,0,0,0,0},{0,0,0,0,0,0,0},{0,0,0,0,0,0,0},{0,0,0,0,0,0,0},{0,0,0,0,0,0,0},{0,0,0,0,0,0,0}}; //here the placement is stored. 0 --> not occupied; 1 --> playerA; 2 --> playerB
int player = 1; //we begin with playerA
bool win = false;

bool touch1detected = false; //variables to indicate if a touch pin is high
bool touch2detected = false;

void gotTouch2(){
 touch2detected = true;
}
void gotTouch1(){
 touch1detected = true;
}

void place(int player, int x){ //this function fills in the circles/crosses the players place
  int col = (x - 132)/18 - 1;
  display.setPartialWindow(145, 17, 296, 128);
  display.firstPage();

  for(int i = 5; i >= 0; i--){
    if(mat[i][col] == 0){
      mat[i][col] = player;
      break;
    }
  }
  
  
  do{
    display.drawRect(150, 18, 126, 108, fg);
    display.drawLine(150, 36, 274, 36, fg);
    display.drawLine(150, 54, 274, 54, fg);
    display.drawLine(150, 72, 274, 72, fg);
    display.drawLine(150, 90, 274, 90, fg);
    display.drawLine(150, 108, 274, 108, fg);
    display.drawLine(168, 18, 168, 124, fg);
    display.drawLine(186, 18, 186, 124, fg);
    display.drawLine(204, 18, 204, 124, fg);
    display.drawLine(222, 18, 222, 124, fg);
    display.drawLine(240, 18, 240, 124, fg);
    display.drawLine(258, 18, 258, 124, fg);

    for(int i = 0; i < 6; i++){
      for(int j = 0; j < 7; j++){
        if(mat[i][j] == 1){
          display.fillCircle(159+j*18, 27+i*18, 5, fg);
        }
        else if(mat[i][j] == 2){
          display.fillRect(157+j*18, 20+i*18, 4, 14, fg);
          display.fillRect(152+j*18, 25+i*18, 14, 4, fg);
        }
      }
    }
  }
  while(display.nextPage());
}


bool check_if_4(){    //this function checks if theres a line of four pieces
  for(int i = 0; i < 3; i++){
    for(int j = 0; j < 7; j++){
      if(mat[i][j] == mat[i+1][j] && mat[i+1][j] == mat[i+2][j] && mat[i+2][j] == mat[i+3][j] && mat[i][j] != 0){
        return true;
      }
    }
  }

  for(int i = 0; i < 6; i++){
    for(int j = 0; j < 4; j++){
      if(mat[i][j] == mat[i][j+1] && mat[i][j+1] == mat[i][j+2] && mat[i][j+2] == mat[i][j+3] && mat[i][j] != 0){
        return true;
      }
    }
  }

  for(int i = 0; i < 3; i++){
    for(int j = 0; j < 4; j++){
      if(mat[i][j] == mat[i+1][j+1] && mat[i+1][j+1] == mat[i+2][j+2] && mat[i+2][j+2] == mat[i+3][j+3] && mat[i][j] != 0){
        return true;
      }
    }
  }

  for(int i = 0; i < 3; i++){
    for(int j = 3; j < 7; j++){
      if(mat[i][j] == mat[i+1][j-1] && mat[i+1][j-1] == mat[i+2][j-2] && mat[i+2][j-2] == mat[i+3][j-3] && mat[i][j] != 0){
        return true;
      }
    }
  }
  
  return false;
}


void(* resetFunc) (void) = 0; //resets the game if someone won


void setup()
{
  touchAttachInterrupt(T3, gotTouch2, 40); //the 40 sets the sensitivity of the touchpin
  touchAttachInterrupt(T4, gotTouch1, 40); //bigger number --> higher sensitivity
  
  display.init();
  display.setTextColor(GxEPD_BLACK);
  
  display.firstPage();
  display.setRotation(1); //rotate the screen 90°

  u8g2Fonts.begin(display); // connect u8g2 procedures to Adafruit GFX
  delay(1000);

  u8g2Fonts.setFont(u8g2_font_logisoso16_tr);

  u8g2Fonts.setForegroundColor(fg);         // apply Adafruit GFX color
  u8g2Fonts.setBackgroundColor(bg); 
  
  do
  {
    display.fillScreen(GxEPD_WHITE);
    u8g2Fonts.setCursor(10, 30); 
    u8g2Fonts.println("Connect 4"); //title
    u8g2Fonts.setCursor(10, 80); 
    u8g2Fonts.println("Player A");
    

    display.drawRect(150, 18, 126, 108, fg); //print the grid
    display.drawLine(150, 36, 274, 36, fg);
    display.drawLine(150, 54, 274, 54, fg);
    display.drawLine(150, 72, 274, 72, fg);
    display.drawLine(150, 90, 274, 90, fg);
    display.drawLine(150, 108, 274, 108, fg);
    display.drawLine(168, 18, 168, 124, fg);
    display.drawLine(186, 18, 186, 124, fg);
    display.drawLine(204, 18, 204, 124, fg);
    display.drawLine(222, 18, 222, 124, fg);
    display.drawLine(240, 18, 240, 124, fg);
    display.drawLine(258, 18, 258, 124, fg);
  }
  while (display.nextPage());
}


void loop(){
  
  display.setPartialWindow(150, 0, 126, 15);
  display.firstPage();
  
  do{
    display.fillTriangle(x, 4, x+18, 4, x+9, 13, fg);
  }
  while(display.nextPage());
  
  delay(100);
  touch2detected = false;
  touch1detected = false;
  while(!touch2detected && !touch1detected){delay(10);} //the program waits until there is a touch input
  if(touch1detected){
    place(player, x);
    
    if(check_if_4()){  //if true someone connected 4 --> the game is over
      display.setPartialWindow(0, 35, 140, 98);
      display.firstPage(); 
  
      do
      {
        display.fillScreen(GxEPD_WHITE);
        u8g2Fonts.setCursor(10, 80); 
        if(player == 1){u8g2Fonts.println("Player A won");}
        else{u8g2Fonts.println("Player B won");}
      }
      while (display.nextPage()); 
      delay(3000);
      resetFunc(); //reset the program
    }
    
    if(player == 1){player = 2;} //switch players
    else{player = 1;}

    display.setPartialWindow(0, 35, 140, 98);
    display.firstPage(); 
  
    do
    {
      display.fillScreen(GxEPD_WHITE);
      u8g2Fonts.setCursor(10, 80); 
      if(player == 1){u8g2Fonts.println("Player A");}
      else{u8g2Fonts.println("Player B");}
    }
    while (display.nextPage());  
  }
  
  else{
    x += 18;
    if(x > 258){x = 150;}
  }

}

"Connect 4" game on E-ink

Things used in this project

Hardware components

Story

The code

Schematics

Wiring

Code

e-ink_connect4

Credits

galoebn

Comments

Embed the widget on your own site

"Connect 4" game on E-ink

"Connect 4" game on E-ink

Things used in this project

Hardware components

Story

The code

Schematics

Wiring

Code

e-ink_connect4

Credits

galoebn

Comments

Related channels and tags