Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Goal of this project is to develop javascript OOP application using modern js APIs such as Drag&Drop, History API, and to try using canvas animation simultaneously with css3 transitions and animations. Also to make it fun, to create a simple game in a process. Live app can be seen at

Developed as assignment for A0M33KAJ course at CTU.

Lectures: RNDr. Ondřej Žára,, Seminars: Bc. Zdeněk Vlach,

And I of course do not own any Star Wars rights, this was made just for fun.

Game experience

Game experience not ideal due to use of CSS transition and Canvas animation simultaneously, current setup is used mainly to try all those technologies and how they play together. It is possible, but slower than using the canvas alone.


Help master Yoda to find his way home! No wonder he got lost again considering his age...

  • Use W, A, S, D keys to move master Yoda!
  • Use THE FORCE (a.k.a. dragging with mouse left click) to move the stones that fly around
  • Use his neverending wisdom to move quickly towards the finish flag. Mighty compass can assist you.
  • Beware of the stones durability! Even stones are not what they used to be.


  • First the game grid is generated by JS
  • Drag&Drop API is used to manipulate stones and to create hover effects
  • Hero can walk only where stones are, simple binary two-dimensional array is used.
  • Moving the grid is moved to main game loop, all animation libraries such as JQuery block canvas animation during DOM animation entirely.
  • Hashbang and History API is used to navigate to pages rules and credits
  • Funky border in top right corner is generated SVG with JS
  • Media queries used to support smaller displays, however mobile phones are not supported nor tablets without hardware keyboard, which is supported. Custom input handling would be needed for that.
  • So far only 4 levels are implemented with distance of finish cell rising and stones durability falling.
  • LocalStorage API is used to store unlocked levels to prevent cheating
  • Audio API is used to play and control the music with custom controls, localStorage API is used to keep the volume level during gameplay. Input of type 'range' is used for managing audio volume.

Libraries used

  • SASS v3.3.4 is used to generate final css files, using mainly for mixins and variables
  • JQuery v1.9.0 used for some DOM manipulation and mainly as dependence of EaselJS library
  • EaselJS v0.6.0 used for canvas sprite animation
  • Keydrown was used for input handling, because onKeyDown event produces short delay after the key is pressed and therefore causes lags and it is not sufficient solution for games at all. This is where Keydrown comes in.