Question

In this part of the Ruby Qt 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 = 300
DOT_SIZE = 10
ALL_DOTS = WIDTH * HEIGHT / (DOT_SIZE * DOT_SIZE)
RAND_POS = 29
DELAY = 140

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

class Board < Qt::Widget

  
  def initialize(parent)
    super(parent)
    
    setFocusPolicy Qt::StrongFocus
     
    initGame
  end


  def initGame
  
    @left = false
    @right = true
    @up = false
    @down = false
    @inGame = true
    @dots = 3
    
    begin
      @ball = Qt::Image.new "dot.png"
      @apple = Qt::Image.new "apple.png"
      @head = Qt::Image.new "head.png"
    rescue
      puts "cannot load images"
    end

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

    locateApple
    setStyleSheet "QWidget { background-color: #000000 }"
    
    @timer = Qt::BasicTimer.new 
    @timer.start(140, self)
    
  end


  def paintEvent event

    painter = Qt::Painter.new
    painter.begin self

    if @inGame
      drawObjects painter
    else 
      gameOver painter
    end

    painter.end
  end

  def drawObjects painter

    painter.drawImage @apple_x, @apple_y, @apple

    for z in (0..@dots)
      if z == 0
        painter.drawImage $x[z], $y[z], @head
      else 
        painter.drawImage $x[z], $y[z], @ball
      end
    end
  end

  def gameOver painter
    msg = "Game Over"
    small = Qt::Font.new "Helvetica", 12,
      Qt::Font::Bold.value
    
    metr = Qt::FontMetrics.new small
    
    textWidth = metr.width msg
    h = height
    w = width

    painter.setPen Qt::Color.new Qt::white
    painter.setFont small
    painter.translate Qt::Point.new w/2, h/2
    painter.drawText -textWidth/2, 0, msg
  end


  def checkApple

    if $x[0] == @apple_x and $y[0] == @apple_y 
      @dots = @dots + 1
      locateApple
    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 checkCollision

    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
      @inGame = false
    end
    
    if $y[0] < 0
      @inGame = false
    end
    
    if $x[0] > WIDTH
      @inGame = false
    end
    
    if $x[0] < 0
      @inGame = false
    end  
    
  end


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

  def timerEvent event

    if @inGame 
      checkApple
      checkCollision
      move
    else 
      @timer.stop
    end

    repaint
  end

  def keyPressEvent event
    
    key = event.key
    
    if key == Qt::Key_Left.value and not @right
      @left = true
      @up = false
      @down = false
    end
    
    if key == Qt::Key_Right.value and not @left
      @right = true
      @up = false
      @down = false
    end
    
    if key == Qt::Key_Up.value and not @down
      @up = true
      @right = false
      @left = false      
    end
    
    if key == Qt::Key_Down.value and not @up
      @down = true
      @right = false
      @left = false
    end
  end
end

First we will define some constants 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 initGame method initialises variables, loads images and starts a timeout function.

if @inGame
  drawObjects painter
else 
  gameOver painter
end

Inside the paintEvent 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 drawObjects painter

  painter.drawImage @apple_x, @apple_y, @apple

  for z in (0..@dots)
    if z == 0
      painter.drawImage $x[z], $y[z], @head
    else 
      painter.drawImage $x[z], $y[z], @ball
    end
  end
end

The drawObjects 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 checkApple

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

The checkApple method checks if the snake has hit the apple object. If so, we add another snake joint and call the locateApple 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
  $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

Move the head to the left.

In the checkCollision 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 the head.

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

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

The locateApple 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 line set the x and y coordinates of the apple object.

if @inGame 
  checkApple
  checkCollision
  move
else 
  @timer.stop
end

Every 140 ms, the timerEvent method is called. If we are in the game, we call three methods that build the logic of the game. Otherwise we stop the timer.

In the keyPressEvent method of the Board class, we determine the keys that were pressed.

if key == Qt::Key_Left.value 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 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 Qt tutorial
#
# In this program, we create
# a Nibbles game clone.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'
require 'Board'

class QtApp < Qt::MainWindow
  
  def initialize
    super
    
    setWindowTitle "Nibbles"
     
    setCentralWidget Board.new(self)
     
    resize 310, 310
    move 300, 300

    show
  end
end

app = Qt::Application.new ARGV
QtApp.new
app.exec

In the Nibbles.rb file, we set up the Nibbles game.

Figure: Nibbles

This was the Nibbles computer game programmed with the Qt library and the Ruby programming language.