javascript - 有一个简单的浏览器内 JS 游戏需要它在 'backend' 上使用 Ruby 脚本-6ren

javascript - 有一个简单的浏览器内 JS 游戏需要它在 'backend' 上使用 Ruby 脚本

转载作者：行者123 更新时间：2023-11-30 17:19:42

26

4

我的“前端”是一个 JS 脚本，它加载 HTML5 Canvas 并绘制 X * Y 网格，然后在网格中的某个默认 (X,Y) 坐标处绘制一个外星人。

我有一些定义这个外星人如何移动的 ruby 类。现在，它只是 X,Y 平面上的 +-。我希望能够单击浏览器中的“向前移动”按钮，并为此向 ruby 脚本发送请求，然后该脚本将计算新位置并发送带有坐标的响应。

有人能给我指出正确的方向吗？我无法理解这样做的逻辑。我已经阅读了 Sinatra、AJAX、模板等，但没有任何帮助。

编辑

应用.rb

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

主页.haml

!!!
%html
  %head
    %link{:rel => :stylesheet, :type => :"text/css", :href => "/css/main.css"}
  %body
    .wrapper
%script(src="http://code.jquery.com/jquery-2.1.1.min.js")
%script(src="/js/grid.js")

当加载 / 路径时，home.haml 应该加载，我希望将 x 和 y 值传递给使用这些坐标绘制图像的 JS 脚本。我不确定该怎么做。

最佳答案

1) 通过在按钮上安装 onclick 事件处理程序，使用 javascript 拦截按钮点击。

2) onclick 事件处理程序 函数应该使用 javascript(或 jquery)向服务器发送 AJAX 请求。 AJAX 请求应包含服务器端 ruby 脚本生成其计算所需的任何相关数据。您的 AJAX 请求将指定一个特定的 url，例如

"/calculate_new_position?x=10&y=20"

3) 您位于服务器上的 Sinatra 应用可以像这样简单:

 require 'sinatra'

 get '/calculate_new_positon' do

    x_coord = params[:x]  #=> 10
    y_coord = params[:y]  #=> 20

    #Do calculation here:
    new_x = x_coord * 20  
    new_y = y_coord - 3

    #The following string is the response:
    %Q|{ "new_x":#{new_x}, "new_y":#{new_y} }| 

 end

当您的服务器收到对 url /calculate_new_position?x=10&y=20 的 GET 请求时，它会导致上面的代码执行。 Sinatra 将自动在名为 params 的哈希中插入任何 GET(或 POST)变量。该 block 的返回值将是发送回浏览器的响应。

4) 您的 javascript AJAX 代码将包含一个函数，该函数在收到来自服务器的响应 时调用。该函数将包含如下内容:

obj = JSON.parse(json_str);  //--> obj = {"new_x":22, "new_y":-3};
new_x = obj["new_x"];
new_y = obj["new_y"];

#Use javascript to move figures to new coordinates.

这是一个例子:

~/ruby_programs/sinatra_4app$ tree
.
├── models
│   └── alien.rb
├── public
│   └── js
│       └── grid.js
├── routes.rb
└── views
    └── home.haml

4 directories, 4 files

home.haml:

!!! 5
%html
  %body
    %button#forward_button Move forward

    %script{:type => "text/javascript",
      :src  => "http://code.jquery.com/jquery-2.1.1.min.js"}

    %script{:type => "text/javascript",
      :src  => "/js/grid.js"}

sinatra执行home.haml后的结果:

<!DOCTYPE html>
<html>
  <body>
    <button id='forward_button'>Move forward</button>
    <script src='http://code.jquery.com/jquery-2.1.1.min.js' type='text/javascript'></script>
    <script src='/js/grid.js' type='text/javascript'></script>
  </body>
</html>

路线.rb:

require 'sinatra'
require_relative 'models/alien'

get '/' do
  haml :home, :format => :html5
  #Sinatra automatically looks for templates in a 'views' directory, so the line above looks for the file: views/home.haml
end

get '/new_alien' do
  alien = Alien.new 1,1,:N       
  alien.calculate_new_position
  new_x = alien.x
  new_y = alien.y

  %Q|{ "new_x":#{new_x}, "new_y":#{new_y} }|  #return a string in json format containing the new coordinates
end

外星人.rb:

class Alien
  attr_accessor :x, :y, :direction

  def initialize(x, y, direction)
    @x = x
    @y = y
    @direction = direction
  end

  def calculate_new_position
    self.x += 2  #Changes @x using the accessor method rather than changing @x directly, which is considered good practice.
    self.y -= 2
  end
end

网格.js:

$(document).ready(function() {
                  #This function executes when all the html elements exist, i.e. when
                  #the document is 'ready'--you can't search for an element until it exists.

  #Search for an element whose id="forward_button" and install an event handler function 
  #for its onclick event:
  $("#forward_button").click(function() {
                             #This function executes when the button is clicked
    #Get current x, y coords somehow....
    var x = 10;
    var y = 20;

    var url = "/new_alien?x=" + x + "&y=" + y;

    $.getJSON(url, function(js_obj) {  #This is a specialized version of $.ajax()
                   #This function is called when the browser
                   #receives the response returned by the server

      new_x = js_obj["new_x"];
      new_y = js_obj["new_y"];
      #Do something with new_x and new_y...

      console.log( "Response received!" );
      console.log( "new_x= " + new_x);
      console.log( "new_y= " + new_y);
    });

  });

});

注意js注释是以//开头的，所以上面的代码如果不把#换成//就会报错。我使用 # 来获得浅灰色阴影，这使代码更易于阅读。

1) 启动服务器:

~/ruby_programs/sinatra_4app$ ruby routes.rb

2) 然后在浏览器中输入以下网址:

http://localhost:4567/

3) 然后打开您正在使用的任何浏览器的控制台窗口。在 Firefox 中，控制台窗口位于:

Tools>Web Developer>Web Console

在 Chrome 中，它是:

View>Developer>Javascript Console

4) 点击“前进”按钮；然后在控制台窗口中检查输出。

关于javascript - 有一个简单的浏览器内 JS 游戏需要它在 'backend' 上使用 Ruby 脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25366669/

26

4

0

文章推荐： javascript - pageAction onClick无响应

文章推荐： javascript - 使用查询字符串搜索 AngularJS 资源

文章推荐： c# - 如何从 Monotouch 调用私有(private) API？

Powershell 脚本 - 脚本 - 我如何禁用它
我有 powershell 脚本。通过调度程序，我运行 bat 文件，该文件运行 PS1 文件。 BAT文件 Powershell.exe -executionpolicy remotesigned
Jquery - getScript 版本<脚本>..
什么更快？或者 $.getScript('../js/SOME.js', function (){ ... // with $.ajaxSetup({ cache: true });
linux - Bash 脚本 Shell 脚本
需要bash脚本来显示文件 #!/bin/bash my_ls() { # save current directory then cd to "$1" pushd "$1" >/dev/nu
ksh - Unix 脚本 - 需要提高性能的建议(shell 脚本)
我有一个输入 csv 文件，实际上我需要在输入文件中选择第 2 列和第 3 列值，并且需要转换两个值的时区(从 PT 到 CT)，转换后我需要替换转换后的时区值到文件。注意: 所有输入日期值都在太平
Bash 脚本 - 编写 init.d 脚本
我正在使用/etc/init.d/httpd 作为 init.d 脚本的模板。我了解文件中发生的所有内容，但以下行除外: LANG=$HTTPD_LANG daemon --pidfile=${pid
python - 将具有多个子选项的命令行选项传递给 python 脚本 -- shell 脚本
我有以下选择: python runscript.py -O start -a "-a "\"-o \\\"-f/dev/sda1 -b256k -Q8\\\" -l test -p maim\""
linux - 用于重命名文件的 Shell 脚本 - Shell 脚本
我对 shell 脚本完全陌生，但我需要编写一个 shell 脚本来检查文件是否存在，然后移动到另一个位置这是我写的: 一旦设备崩溃，我就会在/storage/sdcard1/1 中收集日志 #!/
linux - Bash 脚本 - Bash 脚本 - 编辑文件中文本的行
我正在使用 bash 脚本从文本文件中读取数据。数据: 04:31 Alex M.O.R.P.H. & Natalie Gioia - My Heaven http://goo.gl/rMOa2q
php - 按下按钮运行 php 脚本，该脚本会回显 javascript 脚本
这是单击按钮时运行的 javascript 的结尾 xmlObj.open ('GET', /ajax.php, true); xmlObj.send (''); } 所以这会执行根目录中的php脚本
linux - 重新激活 python 脚本 - Linux bash 脚本
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
python - Nodejs 脚本 fs.createReadStream 到 Python 脚本
我需要将文件转换为可读流以通过 api 上传，有一个使用 fs.createReadStream 的 Node js 示例。任何人都可以告诉我上述声明的 python 等价物是什么？例子 const
python - 从 shell 脚本 cron 调用 python 脚本
我有一个 shell 脚本 cron，它从同一目录调用 python 脚本，但是当这个 cron 执行时，我没有从我的 python 脚本中获得预期的输出，当我手动执行它时，我的 python 脚本的
javascript - 安全的 ajax 脚本(javascript 请求的 PHP 脚本)
如何使 XMLHttpRequest (ajax) 调用的 php 脚本安全。我的意思是，不让 PHP 文件通过直接 url 运行，只能通过脚本从我的页面调用(我不想向未登录的用户显示数据库结果，并
脚本 block 错误中的经典 asp 脚本 block 中的 javascript
我正在尝试添加以下内容我正在使用经典的 asp。但我不断收到的错误是“一个脚本 block 不能放在另一个脚本 block 内。”我尝试了此处的 document.write 技术:Javasc
php - 如何从一个 PHP 脚本(如批处理文件)中运行多个 PHP 脚本？
如何从另一个 PHP 脚本(如批处理文件)中运行多个 PHP 脚本？如果我了解 include 在做什么，我认为 include 不会起作用；因为我正在运行的每个文件都会重新声明一些相同的函数等。我想
html - 如何从 HTML5 脚本/文件/页面调用 Lua 脚本
我想创建具有动态内容的网页。我有一个 HTML 页面，我想从中调用一个 lua 脚本如何调用 lua 脚本？ ? ？从中检索数据？我可以做类似的事情吗: int xx = 0; xx
jquery - 表格行不会自动滚动。脚本 1 滚动，脚本 2 不滚动。为什么？
我删除了我的第一个问题，并重新编写了更多细节和附加 jSfiddle domos。我有一个脚本，它运行查询并返回数据，然后填充表。表中的行自动循环滚动。所有这些工作正常，并通过使用以下代码完成。然而
javascript - amp-script 未找到脚本哈希。 amp-脚本[脚本 ="hello-world"]
我尝试使用 amp 脚本，但收到此错误: “[amp-script] 脚本哈希未找到。amp-script[script="hello-world"].js 必须在元[name="amp-script
java - 从 Java 执行 Shell 脚本，具有读取操作的 Shell 脚本
我有一个读取输入的 Shell 脚本 #!/bin/bash echo "Type the year that you want to check (4 digits), followed by [E
arrays - Redis Lua 脚本 - 如何将数组作为参数传递给 nodejs 中的 Lua 脚本？
我正在从 nodejs 调用 Lua 脚本。我想传递一个数组作为参数。我在 Lua 中解析该数组时遇到问题。下面是一个例子: var script = 'local actorlist = ARGV

首页

博学

6Ren·AI

商城

javascript - 有一个简单的浏览器内 JS 游戏需要它在 'backend' 上使用 Ruby 脚本