كيفية برمجة لعبة ويب تفاعلية باستخدام Ruby و Opal : دليل شامل

Ruby

require 'opal'
require 'browser'

$document.ready do
  canvas = $document['game_canvas']
  ctx = canvas.getContext('2d')
  score_display = $document['score_display']
  start_button = $document['start_button']

  game = nil

  class Game
    attr_accessor :score, :target_x, :target_y, :target_radius, :game_interval

    def initialize(canvas, ctx, score_display)
      @canvas = canvas
      @ctx = ctx
      @score_display = score_display
      @score = 0
      @target_radius = 15
      reset_target
      update_score_display
      start_game_loop
    end

    def reset_target
      @target_x = rand(@canvas.width - 2 * @target_radius) + @target_radius
      @target_y = rand(@canvas.height - 2 * @target_radius) + @target_radius
    end

    def draw
      @ctx.clear_rect(0, 0, @canvas.width, @canvas.height)
      @ctx.begin_path
      @ctx.arc(@target_x, @target_y, @target_radius, 0, 2 * Math::PI)
      @ctx.fill_style = 'red'
      @ctx.fill
    end

    def handle_click(event)
      distance = Math.sqrt((event.offset_x - @target_x)**2 + (event.offset_y - @target_y)**2)
      if distance < @target_radius
        @score += 1
        update_score_display
        reset_target
      end
    end

    def update_score_display
      @score_display.text = "النقاط: #{@score}"
    end

    def start_game_loop
      @game_interval = Window.set_interval(1000) do # تحريك الهدف كل ثانية
        reset_target
        draw
      end
    end

    def stop_game_loop
      Window.clear_interval(@game_interval) if @game_interval
    end
  end

  start_button.on('click') do
    if game
      game.stop_game_loop
    end
    game = Game.new(canvas, ctx, score_display)
    game.draw
    canvas.on('click') do |event|
      game.handle_click(event)
    end
    start_button.text = 'إعادة تشغيل'
  end
end

Ruby

require 'opal'
require 'browser'

$document.ready do
  canvas = $document['game_canvas']
  ctx = canvas.getContext('2d')
  score_display = $document['score_display']
  start_button = $document['start_button']

  game = nil
  high_score_display = $document.create('div')
  high_score_display.id = 'high_score_display'
  $document.body << high_score_display

  class Game
    attr_accessor :score, :target_x, :target_y, :target_radius, :game_interval, :high_score

    def initialize(canvas, ctx, score_display, high_score_display)
      @canvas = canvas
      @ctx = ctx
      @score_display = score_display
      @high_score_display = high_score_display
      @score = 0
      @target_radius = 15
      @high_score = Window.local_storage['high_score'].to_i || 0
      reset_target
      update_score_display
      update_high_score_display
      start_game_loop
    end

    def reset_target
      @target_x = rand(@canvas.width - 2 * @target_radius) + @target_radius
      @target_y = rand(@canvas.height - 2 * @target_radius) + @target_radius
    end

    def draw
      @ctx.clear_rect(0, 0, @canvas.width, @canvas.height)
      @ctx.begin_path
      @ctx.arc(@target_x, @target_y, @target_radius, 0, 2 * Math::PI)
      @ctx.fill_style = 'red'
      @ctx.fill
    end

    def handle_click(event)
      distance = Math.sqrt((event.offset_x - @target_x)**2 + (event.offset_y - @target_y)**2)
      if distance < @target_radius
        @score += 1
        update_score_display
        reset_target
        update_high_score
      end
    end

    def update_score_display
      @score_display.text = "النقاط: #{@score}"
    end

    def update_high_score
      if @score > @high_score
        @high_score = @score
        Window.local_storage['high_score'] = @high_score.to_s
        update_high_score_display
      end
    end

    def update_high_score_display
      @high_score_display.text = "أعلى نقاط: #{@high_score}"
    end

    def start_game_loop
      @game_interval = Window.set_interval(1000) do # تحريك الهدف كل ثانية
        reset_target
        draw
      end
    end

    def stop_game_loop
      Window.clear_interval(@game_interval) if @game_interval
    end
  end

  start_button.on('click') do
    if game
      game.stop_game_loop
    end
    game = Game.new(canvas, ctx, score_display, high_score_display)
    game.draw
    canvas.on('click') do |event|
      game.handle_click(event)
    end
    start_button.text = 'إعادة تشغيل'
  end

  # عرض أعلى نتيجة عند تحميل الصفحة
  high_score = Window.local_storage['high_score'].to_i || 0
  high_score_display.text = "أعلى نقاط: #{high_score}"
end