Un space invaders avec Opal.rb - partie 5
On faire faire un peu d’animation. Ça va être très simple, on va juste faire bouger le joueur automatiquement d’un coté. Malgré la simplicité, on aura après ça tout ce qu’il nous faut pour animer notre futur jeu.
Je vais ajouter une méthode update
à la classe Player
:
class Player
attr_accessor :x, :y, :w, :h, :color
def initialize
@x = 325
@y = 560
@w = 50
@h = 30
@color = 'green'
end
def update
@x += 1
end
end
À chaque appel de cette méthode, la position du joueur sera décalée de 1 pixel vers la droite. Peux pas faire plus simple ;)
Maintenant, voici le nouveau fichier application.rb
, où se trouve
l’animation proprement dite:
require 'opal'
require 'opal-jquery'
require 'space_canvas'
require 'player'
@canvas = SpaceCanvas.new
@player = Player.new
def main_loop(interval, &block)
`setInterval(#{block.to_n}, #{interval})`
end
def start
main_loop(50) do
@canvas.clear_background
@canvas.draw_player(@player)
@player.update
end
end
start
Tout d’abord, la méthode main_loop
:
def main_loop(interval, &block)
`setInterval(#{block.to_n}, #{interval})`
end
Elle prend comme arguments un intervalle en millisecondes et un bloc
d’instructions ruby à exécuter toutes les interval
millisecondes.
Elle appelle la méthode javascript setInterval
avec ses arguments.
La méthode to_n
, sur #{block.to_n}
, convertie le bloc d’instructions
ruby en instructions javascript. Il me semble que to_n
est là pour
to native.
Je ne suis pas content de cette méthode. En effet, mélanger deux langages différents n’est pas très heureux. Je ne sais pas si il existe une façon de faire cela en ruby pur, mais j’espère. Je chercherais plus tard, pour l’instant ça fonctionnera comme ça.
Et maintenant la méthode start
s’explique simplement:
def start
main_loop(50) do
@canvas.clear_background
@canvas.draw_player(@player)
@player.update
end
end
Toutes les 50 millisecondes (main_loop(50)
) on exécute le bloc
d’instructions suivantes:
@canvas.clear_background
@canvas.draw_player(@player)
@player.update
C’est à dire qu’on efface l’écran (le canvas), puis on affiche le joueur, et enfin on déplace le joueur.
Après un rake build
et un rafraichissement du navigateur, vous devriez
voir le joueur se déplacer lentement vers la droite. Mission accomplie !
Demain on déplace le joueur avec le clavier ?
À demain.