title: Have a simple in-browser JS game need it to work with a Ruby script on the 'backend'
body: <p>My 'frontend' is a JS script that loads a HTML5 canvas and draws a X * Y grid, it then draws an alien at some default (X,Y) coordinate in the grid.</p>
  
  <p>I have some ruby classes that define how this alien moves. For now, it's just +- on the X,Y plane. I want to be able to click on a 'move forward' button in the browser, and for that to send a request to the ruby script which will then calculate the new position and send a response with the coordinates.</p>
  
  <p>Could somebody point me in the right direction? I can't get the logic around doing this. I've read into Sinatra, AJAX, templates, and so on but nothing is helping.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>app.rb</p>
  
  <pre><code>require 'sinatra'
  require_relative 'alien'
  
  get '/' do
    haml :home
  end
  
  get '/new_alien' do
    @alien = Alien.new 1,1,:N       # create a new alien
    @x = @alien.x                  # set the x coordinate
    @y = @alien.y                  # set the y coordinate
    %Q|{ "x":#{@x}, "y":#{@y} }|  # return a string with the coordinates
  end
  </code></pre>
  
  <p>home.haml</p>
  
  <pre><code>!!!
  %html
    %head
      %link{:rel =&gt; :stylesheet, :type =&gt; :"text/css", :href =&gt; "/css/main.css"}
    %body
      .wrapper
  %script(src="http://code.jquery.com/jquery-2.1.1.min.js")
  %script(src="/js/grid.js")
  </code></pre>
  
  <p>When the <code>/</code> path is loaded, home.haml should load and I would like for the <code>x</code> and <code>y</code> values to be passed to a JS script which uses these coordinates to draw an image. I'm not sure how to do this exactly. </p>