Question

In this part of the PHP GTK programming tutorial, we will create a Nibbles game clone.

Nibbles is an older classic video game. It was first created in late 70s. Later it was brought to PCs. In this game the player controls a snake. The objective is to eat as many apples as possible. Each time the snake eats an apple, its body grows. The snake must avoid the walls and its own body.

Development

The size of each of the joints of a snake is 10px. The snake is controlled with the cursor keys. Initially, the snake has three joints. The game starts immediately. When the game is finished, we display "Game Over" message in the center of the window.

The code is split into two files. board.php and nibbles.php.

<?php

// board.php

define("WIDTH", 300);
define("HEIGHT", 270);
define("DOT_SIZE", 10);
define("ALL_DOTS", WIDTH * HEIGHT / (DOT_SIZE * DOT_SIZE));
define("RAND_POS", 26);
 

class Board extends GtkDrawingArea {

  public function __construct() { 

    parent::__construct(); 

    $this->modify_bg(Gtk::STATE_NORMAL, new GdkColor(6400, 6400, 6440));
     
    $this->connect('expose_event', array($this, 'on_expose')); 

    $this->init_game();

  } 
  
  public function init_game() {

    $this->x = array_fill(0, ALL_DOTS, 0);
    $this->y = array_fill(0, ALL_DOTS, 0);

    $this->left = false;
    $this->right = true;
    $this->up = false;
    $this->down = false;
    $this->inGame = true;
    $this->dots = 3;

    for ($i=0; $i<=$this->dots; $i++) {
      $this->x[$i] = 50 - $i * 10;
      $this->y[$i] = 50;
    }
    
    try {
      $this->dot = CairoImageSurface::createFromPng("dot.png");
      $this->head = CairoImageSurface::createFromPng("head.png");
      $this->apple = CairoImageSurface::createFromPng("apple.png");
    } catch( Exception  $e) {
      echo $e->getMessage();
      echo "cannot load images";
      exit;
    }

    $this->locate_apple();
    $this->set_can_focus(true);

    Gtk::timeout_add(100, array($this, 'on_timer'));

   }

  public function on_timer() {

    if ($this->inGame) {
      $this->check_apple();
      $this->check_collision();
      $this->move();
      $this->queue_draw();
      return true;
    } else {
      return false;
    }
  }
    

  public function on_expose() {
  
    $cr = $this->window->cairo_create();

    if ($this->inGame) {
      $this->draw_objects($cr);
    } else {
      $this->game_over($cr);
    }
  }
  
  public function draw_objects($cr) {
  
    $cr->SetSourceRgb(0, 0, 0);
    $cr->paint();

    $cr->setSourceSurface($this->apple, 
      $this->apple_x, $this->apple_y);
    $cr->paint();

    for ($z=0; $z<=$this->dots; $z++) {
      if ($z == 0) {
        $cr->setSourceSurface($this->head, 
          $this->x[$z], $this->y[$z]);
        $cr->paint();
      } else {
        $cr->setSourceSurface($this->dot, 
          $this->x[$z], $this->y[$z]);
        $cr->paint();
      } 
    }
  }

  public function game_over($cr) {

    $c_x = $this->get_allocation()->width/2;
    $c_y = $this->get_allocation()->height/2;

    $cr->SetFontSize(15);
    $cr->SetSourceRgb(65535, 65535, 65535);

    $te = $cr->TextExtents("Game Over");
    
    $cr->MoveTo($c_x - $te['width']/2, $c_y);
    $cr->ShowText("Game Over");
  }


  public function check_apple() {

    if ($this->x[0] == $this->apple_x 
        and $this->y[0] == $this->apple_y) {
      $this->dots = $this->dots + 1;
      $this->locate_apple();
    }
  }
  
  public function move() {

    $z = $this->dots;

    while ($z > 0) {
      $this->x[$z] = $this->x[($z - 1)];
      $this->y[$z] = $this->y[($z - 1)];
      $z--;
    }

    if ($this->left) {
      $this->x[0] -= DOT_SIZE;
    }

    if ($this->right) {
      $this->x[0] += DOT_SIZE;
    }

    if ($this->up) {
      $this->y[0] -= DOT_SIZE;
    }

    if ($this->down) {
      $this->y[0] += DOT_SIZE;
    }
    
   }

  public function check_collision() {

    $z = $this->dots;
     
    while ($z > 0) {
      if ($z > 4 and $this->x[0] == $this->x[$z] 
             and $this->y[0] == $this->y[$z]) {
        $this->inGame = false;
      }
      $z--;
    }

    if ($this->y[0] > HEIGHT - DOT_SIZE) {
      $this->inGame = false;
    }
    
    if ($this->y[0] < 0) {
      $this->inGame = false;
    }
    
    if ($this->x[0] > WIDTH - DOT_SIZE) {
      $this->inGame = false;
    }
    
    if ($this->x[0] < 0) {
      $this->inGame = false;
    }
    
  }

  public function locate_apple() {
  
    $r = rand(0, RAND_POS);
    $this->apple_x = $r * DOT_SIZE;
    $r = rand(0, RAND_POS);
    $this->apple_y = $r * DOT_SIZE;
  }

  public function on_key_down($event) {

    $key = $event->keyval;

    if ($key == Gdk::KEY_Left and !$this->right) {
      $this->left = true;
      $this->up = false;
      $this->down = false;
    }

    if ($key == Gdk::KEY_Right and !$this->left) {
      $this->right = true;
      $this->up = false;
      $this->down = false;
    }

    if ($key == Gdk::KEY_Up and !$this->down) {
      $this->up = true;
      $this->right = false;
      $this->left = false;
    }

    if ($key == Gdk::KEY_Down and !$this->up) {
      $this->down = true;
      $this->right = false;
      $this->left = false;
    }
  }
}
?>

This is board.php file.

define("WIDTH", 300);
define("HEIGHT", 270);
define("DOT_SIZE", 10);
define("ALL_DOTS", WIDTH * HEIGHT / (DOT_SIZE * DOT_SIZE));
define("RAND_POS", 26);

The WIDTH and HEIGHT constants determine the size of the Board. The DOT_SIZE is the size of the apple and the dot of the snake. The ALL_DOTS constant defines the maximum number of possible dots on the Board. The RAND_POS constant is used to calculate a random position of an apple.

$this->x = array_fill(0, ALL_DOTS, 0);
$this->y = array_fill(0, ALL_DOTS, 0);

These two arrays store x, y coordinates of all possible joints of a snake.

The init_game() method initialises variables, loads images and starts a timeout function.

if ($this->inGame) {
  $this->check_apple();
  $this->check_collision();
  $this->move();
  $this->queue_draw();
  return true;
} else {
  return false;
}

Every 140 ms, the on_timer() method is called. If we are in the game, we call three methods that build the logic of the game. The queue_draw() method forces the widget to be redrawn. This will reflect the changes of the game on the board. Otherwise we return false , which stops the timer event.

$cr = $this->window->cairo_create();

if ($this->inGame) {
  $this->draw_objects($cr);
} else {
  $this->game_over($cr);
}  

Inside the on_expose() method, we check the $this->inGame variable. If it is true, we draw our objects. The apple and the snake joints. Otherwise we display "Game over" text.

public function draw_objects($cr) {

  $cr->SetSourceRgb(0, 0, 0);
  $cr->paint();

  $cr->setSourceSurface($this->apple, 
    $this->apple_x, $this->apple_y);
  $cr->paint();

  for ($z=0; $z<=$this->dots; $z++) {
    if ($z == 0) {
      $cr->setSourceSurface($this->head, 
        $this->x[$z], $this->y[$z]);
      $cr->paint();
    } else {
      $cr->setSourceSurface($this->dot, 
        $this->x[$z], $this->y[$z]);
      $cr->paint();
    } 
  }
}

The draw_objects() method draws the apple and the joints of the snake. The first joint of a snake is its head, which is represented by a red circle.

If the game is over, we call the game_over() method. This method shows "Game Over" in the center of the window.

$c_x = $this->get_allocation()->width/2;
$c_y = $this->get_allocation()->height/2;

Here we get the center point of the window.

$cr->SetFontSize(15);
$cr->SetSourceRgb(65535, 65535, 65535);

We set the font size and colour for the text. The background is black so the font will be in white colour.

$te = $cr->TextExtents("Game Over");

We get the text extents of the string. This is needed in order to position the text in the center of the window.

$cr->MoveTo($c_x - $te['width']/2, $c_y);
$cr->ShowText("Game Over");

We move to the center and display the text.

public function check_apple() {

  if ($this->x[0] == $this->apple_x 
      and $this->y[0] == $this->apple_y) {
    $this->dots = $this->dots + 1;
    $this->locate_apple();
  }
}

The check_apple() method checks the snake has hit the apple object. If so, we add another snake joint and call the locate_apple() method, which randomly places a new apple object.

In the move() method we have the key algorithm of the game. To understand it, look at how the snake is moving. You control the head of the snake. You can change its direction with the cursor keys. The rest of the joints move one position up the chain. The second joint moves where the first was, the third joint where the second was etc.

while ($z > 0) {
  $this->x[$z] = $this->x[($z - 1)];
  $this->y[$z] = $this->y[($z - 1)];
  $z--;
}

This code moves the joints up the chain.

if ($this->left) {
  $this->x[0] -= DOT_SIZE;
}

Move the head to the left.

In the check_collision() method, we determine if the snake has hit itself or one of the walls.

while ($z > 0) {
  if ($z > 4 and $this->x[0] == $this->x[$z] 
        and $this->y[0] == $this->y[$z]) {
    $this->inGame = false;
  }
  $z--;
}

We finish the game if the snake hits one of its joints with the head.

if ($this->y[0] > HEIGHT - DOT_SIZE) {
  $this->inGame = false;
}

We finish the game if the snake hits the bottom of the Board.

The locate_apple() method locates an apple randomly on the board.

$r = rand(0, RAND_POS);

We get a random number from 0 to RAND_POS - 1.

$this->apple_x = $r * DOT_SIZE;
...
$this->apple_y = $r * DOT_SIZE;

These lines set the x, y coordinates of the apple object.

In the on_key_down() method of the Board class, we determine the keys that were pressed.

if ($key == Gdk::KEY_Left and !$this->right) {
  $this->left = true;
  $this->up = false;
  $this->down = false;
}

If we hit the left cursor key, we set $this->left variable to true. This variable is used in the move() method to change coordinates of the snake object. Notice also that when the snake is heading to the right, we cannot turn immediately to the left.

<?php
 
/* 
ZetCode PHP GTK tutorial

In this program, we create a Nibbles
game clone. 

author: Jan Bodnar
website: www.zetcode.com
last modified: September 2011
*/

include 'board.php';

class Example extends GtkWindow { 
   

  public function __construct() { 

    parent::__construct(); 
     
    $this->init_ui();

  } 

  private function init_ui() {

    $this->set_title('Nibbles');     
    $this->connect_simple('destroy', array('gtk', 'main_quit')); 

    $this->board = new Board();
    $this->board->connect('key-press-event', array($this, 'on_key_down'));

    $this->add($this->board);
    
    $this->set_default_size(300, 270); 
    $this->set_position(GTK::WIN_POS_CENTER);
    $this->show_all();     
  }

  public function on_key_down($sender, $event) {
   
    $key = $event->keyval;
    $this->board->on_key_down($event);
  }
} 
   
new Example(); 
Gtk::main();
 
?>

This is the nibbles.php file. In this file, we set up the Nibbles game.

public function on_key_down($sender, $event) {
  
  $key = $event->keyval;
  $this->board->on_key_down($event);
}

In this class, we catch the key press events. And delegate the processing to the on_key_down() method of the board class.

Figure: Nibbles

This was the Nibbles computer game programmed with the GTK library and the PHP programming language.