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 3

| Comments

Niveau : intermédiaire

C’est le moment d’afficher un joli vaisseau pour le joueur. Bon, en fait, ça va être un gros rectangle vert, mais c’est pareil ;)

On commence par ajouter une classe Player:

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

Y a pas grand chose à dire, hein ? X et y sont la position du coin supérieur gauche sur le canvas, w est la largeur et h est la hauteur. C’est tout.

Pour afficher notre joueur, on ajoute une méthode draw_player à la classe SpaceCanvas:

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

Cette méthode est similaire à la méthode clear_background, vue la dernière fois, ce qui va nous donner une séance de refactoring demain…

Finalement, voici le code complet du fichier app/application.rb:

app/application.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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
require 'opal'
require 'opal-jquery'

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

class Player
  attr_accessor :x, :y, :w, :h, :color

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

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

N’oubliez pas de faire un rake build avant d’ouvrir le fichier HTML.

À demain.

Articles connexes

Commentaires