Question

In this part of the Ruby 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.

board.rb

WIDTH = 300
HEIGHT = 270
DOT_SIZE = 10
ALL_DOTS = WIDTH * HEIGHT / (DOT_SIZE * DOT_SIZE)
RAND_POS = 26
DELAY = 100

$x = [0] * ALL_DOTS
$y = [0] * ALL_DOTS

class Board < Gtk::DrawingArea

  def initialize
    super
      
    override_background_color :normal, Gdk::RGBA.new(0, 0, 0, 1)

    signal_connect "draw" do  
      on_draw
    end
 
    init_game
  end
  
  def on_timer

    if @inGame
      check_apple
      check_collision
      move
      queue_draw
      return true
    else
      return false
    end
  end
  
  def init_game

    @left = false
    @right = true
    @up = false
    @down = false
    @inGame = true
    @dots = 3

    for i in 0..@dots
      $x[i] = 50 - i * 10
      $y[i] = 50
    end
    
    begin
      @dot = Cairo::ImageSurface.from_png "dot.png"
      @head = Cairo::ImageSurface.from_png "head.png"
      @apple = Cairo::ImageSurface.from_png "apple.png"
    rescue Exception => e
      puts "cannot load images"
      exit
    end

    locate_apple
    GLib::Timeout.add(DELAY) { on_timer }
   end   
    

  def on_draw 
  
    cr = window.create_cairo_context

    if @inGame
      draw_objects cr
    else
      game_over cr
    end    
  end
  
  def draw_objects cr
  
    cr.set_source_rgb 0, 0, 0
    cr.paint

    cr.set_source @apple, @apple_x, @apple_y
    cr.paint

    for z in 0..@dots
      if z == 0 
        cr.set_source @head, $x[z], $y[z]
        cr.paint
      else
        cr.set_source @dot, $x[z], $y[z]
        cr.paint
      end  
    end
  end

  def game_over cr

    w = allocation.width / 2
    h = allocation.height / 2

    cr.set_font_size 15
    te = cr.text_extents "Game Over"

    cr.set_source_rgb 65535, 65535, 65535
    
    cr.move_to w - te.width/2, h
    cr.show_text "Game Over"
  end


  def check_apple

    if $x[0] == @apple_x and $y[0] == @apple_y 
      @dots = @dots + 1
      locate_apple
    end
  end
  
  def move

    z = @dots

    while z > 0
      $x[z] = $x[(z - 1)]
      $y[z] = $y[(z - 1)]
      z = z - 1
    end

    if @left
      $x[0] -= DOT_SIZE
    end

    if @right 
      $x[0] += DOT_SIZE
    end

    if @up
      $y[0] -= DOT_SIZE
    end

    if @down
      $y[0] += DOT_SIZE
    end
   end

  def check_collision

    z = @dots
     
    while z > 0
      if z > 4 and $x[0] == $x[z] and $y[0] == $y[z]
        @inGame = false
      end
      z = z - 1
    end

    if $y[0] > HEIGHT - DOT_SIZE
      @inGame = false
    end
    
    if $y[0] < 0
      @inGame = false
    end
    
    if $x[0] > WIDTH - DOT_SIZE
      @inGame = false
    end
    
    if $x[0] < 0
      @inGame = false
    end  
  end

  def locate_apple
  
    r = rand RAND_POS
    @apple_x = r * DOT_SIZE
    r = rand RAND_POS
    @apple_y = r * DOT_SIZE
  end

  def on_key_down event
  
    key = event.keyval

    if key == Gdk::Keyval::GDK_KEY_Left and not @right
      @left = true
      @up = false
      @down = false
    end

    if key == Gdk::Keyval::GDK_KEY_Right and not @left
      @right = true
      @up = false
      @down = false
    end

    if key == Gdk::Keyval::GDK_KEY_Up and not @down
      @up = true
      @right = false
      @left = false
    end

    if key == Gdk::Keyval::GDK_KEY_Down and not @up
      @down = true
      @right = false
      @left = false
    end
  end   
end

First we will define some globals used in our game. 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. The DELAY constant determines the speed of the game.

$x = [0] * ALL_DOTS
$y = [0] * ALL_DOTS

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

The init_game method initialises the game.

@left = false
@right = true
@up = false
@down = false
@inGame = true
@dots = 3

We initiate variables that we use in the game.

for i in 0..@dots
  $x[i] = 50 - i * 10
  $y[i] = 50
end

We give the snake joints initial coordinates. It always starts from the same position.

begin
  @dot = Cairo::ImageSurface.from_png "dot.png"
  @head = Cairo::ImageSurface.from_png "head.png"
  @apple = Cairo::ImageSurface.from_png "apple.png"
rescue Exception => e
  puts "cannot load images"
  exit
end

The necessary images are loaded.

locate_apple

The apple goes to an initial random position.

GLib::Timeout.add(DELAY) { on_timer }

The GLib::Timeout.add method sets the on_timer method to be called every DELAY milliseconds.

if @inGame
  draw_objects cr
else
  game_over cr
end    

Inside the on_draw method, we check the @inGame variable. If it is true, we draw our objects: the apple and the snake joints. Otherwise, we display "Game over" text.

def draw_objects cr

  cr.set_source_rgb 0, 0, 0
  cr.paint

  cr.set_source @apple, @apple_x, @apple_y
  cr.paint

  for z in 0..@dots
    if z == 0 
      cr.set_source @head, $x[z], $y[z]
      cr.paint
    else
      cr.set_source @dot, $x[z], $y[z]
      cr.paint
    end  
  end
end

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.

def check_apple

  if $x[0] == @apple_x and $y[0] == @apple_y 
    @dots = @dots + 1
    locate_apple
  end
end

The check_apple method checks if 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, we need to look at how the snake is moving. We control the head of the snake. We 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
  $x[z] = $x[(z - 1)]
  $y[z] = $y[(z - 1)]
  z = z - 1
end

This code moves the joints up the chain.

if @left
  $x[0] -= DOT_SIZE
end

The head is moved to the left if the direction is 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 $x[0] == $x[z] and $y[0] == $y[z]
    @inGame = false
  end
  z = z - 1
end 

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

if $y[0] > HEIGHT - DOT_SIZE
  @inGame = false
end

The game is finished if the snake hits the bottom of the Board.

The locate_apple method locates an apple randomly on the board.

r = rand RAND_POS

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

@apple_x = r * DOT_SIZE
...
@apple_y = r * DOT_SIZE

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

if @inGame
  check_apple
  check_collision
  move
  queue_draw
  return true
else
  return false
end

Every DELAY ms the on_timer method is called. If we are in the game, we call three methods that build the logic of the game. Otherwise, we return false which stops the timer event.

In the on_key_down method of the Board class, we determine the pressed keys.

if key == Gdk::Keyval::GDK_KEY_Left and not @right
  @left = true
  @up = false
  @down = false
end

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

nibbles.rb

#!/usr/bin/ruby

'''
ZetCode Ruby GTK tutorial

This is a simple Nibbles game
clone.

Author: Jan Bodnar
Website: www.zetcode.com
Last modified: May 2014
'''

require 'gtk3'
require './board'

class RubyApp < Gtk::Window

  def initialize
    super
  
    set_title "Nibbles"
    signal_connect "destroy" do 
      Gtk.main_quit 
    end
    
    @board = Board.new
    signal_connect "key-press-event" do |w, e|
      on_key_down w, e
    end
    
    add @board

    set_default_size WIDTH, HEIGHT
    set_window_position :center
    show_all
  end
  
  def on_key_down widget, event 
   
    key = event.keyval
    @board.on_key_down event
  end
end

Gtk.init
  window = RubyApp.new
Gtk.main

In this class, we set up the Nibbles game.

def on_key_down widget, event 

  key = event.keyval
  @board.on_key_down event
end

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 Ruby programming language.