Xavier Nayrac

Rubyiste accro au TDD, serial blogger, apprenti data scientist, heureux utilisateur de Vim, accordéoniste.
Si vous vous sentez particulièrement généreux, suivez moi sur Twitter.

Un space invaders avec Opal.rb - partie 4

| Comments

Niveau : intermédiaire

Petite séance de refactoring aujourd’hui. Tout d’abord, comme nous avons maintenant deux classes dans le fichier app/application.rb, on va les mettre dans des fichiers séparés, pour obtenir ça:

● tree
.
├── app
│   ├── application.rb
│   ├── player.rb
│   └── space_canvas.rb
├── build.js
├── Gemfile
├── Gemfile.lock
├── index.html
└── Rakefile

Le fichier application.rb est maintenant réduit à ceci:

app/application.rb
1
2
3
4
5
6
7
8
9
10
require 'opal'
require 'opal-jquery'

require 'space_canvas'
require 'player'

canvas = SpaceCanvas.new
player = Player.new
canvas.clear_background
canvas.draw_player(player)

Le fichier player.rb contient la classe Player:

app/player.rb
1
2
3
4
5
6
7
8
9
10
11
class Player
  attr_accessor :x, :y, :w, :h, :color

  def initialize
    @x = 325
    @y = 560
    @w = 50
    @h = 30
    @color = 'green'
  end
end

Quant au fichier space_canvas.rb, le voici:

app/space_canvas.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class SpaceCanvas

  def initialize
    @canvas  = `document.getElementById('canvas')`
    @context = `#@canvas.getContext('2d')`
    @height  = `#@canvas.height`
    @width   = `#@canvas.width`
  end

  def clear_background
    `#@context.fillStyle = 'black'`
    `#@context.fillRect(0, 0, #@width, #@height)`
  end

  def draw_player(player)
    `#@context.fillStyle = #{player.color}`
    `#@context.fillRect(#{player.x}, #{player.y}, #{player.w}, #{player.h})`
  end
end

Les méthodes clear_background et draw_player sont trop similaires pour être laissées en l’état ! En voici un petit refactoring:

app/space_canvas.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class SpaceCanvas

  def initialize
    @canvas  = `document.getElementById('canvas')`
    @context = `#@canvas.getContext('2d')`
    @height  = `#@canvas.height`
    @width   = `#@canvas.width`
  end

  def clear_background
    draw_rect(0, 0, @width, @height, 'black')
  end

  def draw_player(player)
    draw_rect(player.x, player.y, player.w, player.h, player.color)
  end

  private

  def draw_rect(x, y, w, h, color)
    `#@context.fillStyle = #{color}`
    `#@context.fillRect(#{x}, #{y}, #{w}, #{h})`
  end

end

Comme toujours, rake build pour s’assurer que ça fonctionne bien !

Demain, on verra comment faire bouger notre joueur…

À demain.

Articles connexes

Commentaires