はじめに

個人的な学習のまとめです！
3つの言語の基本文法を学習したのでまとめてみました！

1. 出力

Ruby

   puts "Hello, world"

Python

   print("Hello, world")

PHP

   echo "Hello, world";

2. 変数

Ruby

   variable = "変数”

Python

   variable = "変数”

PHP

  $variable = "変数”;

3.プロパティ値の出力

Ruby

   # attr_accessor :name　等でゲッターを定義する
   puts person.name

Python

   # def __init__　等でゲッターを定義する
   print(person.name)

PHP

  echo $person->name();

4. If文

Ruby

   if number % 15 == 0
     puts "FizzBuzz" 
   elsif number % 3 == 0
     puts "Fizz"
   elsif number % 5 == 0
     puts "Buzz"
   else 
     puts number
   end  

Python

   if number % 15 == 0:
     print("FizzBuzz") 
   elif number % 3 == 0:
     print("Fizz")
   elif number % 5 == 0:
     print("Buzz")
   else:
     print(number)  

PHP

  if (number % 15 == 0){
     echo "FizzBuzz";
   } elseif (number % 3 == 0){
     echo "Fizz";
   } elseif (number % 5 == 0){
     echo "Buzz";
   } else {
     echo $number;
   }

5. 配列/ハッシュ編

Ruby

   # 配列
   array = ["赤", "青", "黄"]
   # ハッシュ
   hash = {"大阪府": "大阪", "愛知県": "名古屋", "東京都": "東京?"}

Python

   # リスト
   lists = ["赤", "青", "黄"]
   # 辞書
   dict = {"大阪府": "大阪", "愛知県": "名古屋", "東京都": "東京?"}

PHP

    //配列
   $array = ["赤", "青", "黄"];
   //連想配列
   $associative_array = [
           "大阪府" => "大阪",
           "愛知県" => "名古屋",
           "東京都" => "東京?"
   ];

6. 繰り返し構文

6-1.ループ処理

Ruby

   i = 1
   while i <= 100 do
     # 処理
     i += 1
   end

Python

   i = 1
   while i <= 100:
    # 処理
    i += 1

   for i in range(1, 101):
    # 処理

PHP

  for ($i = 1;$i <= 100;$i++){
  //処理 
  }

6-2. 反復処理（？）

Ruby

   array.each do |value|
     #処理
   end

   hash.each {|key, value|
    #処理
   }

Python

  for value in lists:
    # 処理

  for key in dict:
     # 処理

PHP

  foreach($array as $value){
    //処理 
  }

  foreach($associativeArray as $key => $value){
    //処理
  }

7.関数定義

Ruby

  def hello
   # 処理
  end   

Python

   def hello():
     # 処理
     return # 戻り値

PHP

  function hello() {
    // 処理
    return // 戻り値
  }

8.クラスとインスタンス

Ruby

   class Person
     @@number = 0

     def self.classmethod
      # 処理
     end

     def initialize(name)
        @name = name
     end

     person = Person.new("山田")
   end   

Python

　　class Person:
     number = 0

     @classmethod
     def classmethod(cls):
       #　処理

     def __init__(self, name):
       self.name = name
     end

     person = Person("山田")
   end   

PHP

  class Person {
    private static $number;
    private $name;

    public function static function classmethod(){
      echo self::$number;
    }

    public function __construct($name){
      $this->name = $name;
    }
    $person = new Person();
  }

9.ゲッターとセッター

Ruby

   def setName(name)
     @name = name
   end

   def getName
    @name
   end
   #あるいは
   attr_accessor :name

Python

   def __init__(self, name):
        self._name = name

    @property
    def name(self):
        return self.__name

    @name.setter
    def name(self, name):
        self.__name = name

PHP

  public function setName($name) {
    $this->name = $name;
  }

  public function getName() {
    return $this->name;
  }

10.最後に

1ブロックをどのように（end/インデント/{})指定するかに個性がある感じですね！
ご一読頂き、ありがとうございました！

deviseを最初からインストールしている記事はあるものの、追加でしかもmodel名のuserを使わない記事が皆無だったので後学者の為に。

環境
ruby 2.6.3
rails 5.2.4

作業時間を報告するアプリを作成。

先にpersonをmodelとして、複数形としてpeopleを使用。
一応これで課題は終了。

応用追加課題として、先のアプリに後付けで、
ログイン機能のdeviseを追加実装。

以下状況
gem deviseとdevise viewをインストールし、devise controllersはインストールせず。
personモデルはそのままにして、deviseのuserモデルのカラムを利用する為、userモデルを一度インストール。
インストールしたuserのmigrationファイルに記載されているカラムとfirst_name&second_nameを追加してファイル名をrenameし、migrate。
利用し終わったので、userモデルは削除。

ログイン画面と登録画面を実装して、動作確認時にエラー

エラー文
No route matches [POST] "/people/sign_up.person"

該当箇所

registration/new.html.haml

= form_for(resource, as: resource_name, url: new_person_registration_path(resource_name)) do |f|

devise/shared/_links.html.haml

- if devise_mapping.registerable? && controller_name != 'registrations'
  = link_to "Sign up", new_registration_path(resource_name)

$ rails routes

   new_person_registration GET    /people/sign_up(.:format) devise/registrations#new
  edit_person_registration GET    /people/edit(.:format)      devise/registrations#edit
       person_registration PATCH  /people(.:format)           devise/registrations#update
                           PUT    /people(.:format)           devise/registrations#update
                           DELETE /people(.:format)           devise/registrations#destroy
                           POST   /people(.:format)           devise/registrations#create

create画面に飛ばすべき所をnewパスにしていた。

registration/new.html.haml

= form_for(resource, as: resource_name, url: person_registration_path(resource_name)) do |f|

path修正

devise/shared/_links.html

- if devise_mapping.registerable? && controller_name != 'registrations'
  = link_to "Sign up", new_registration_path(resource_name)

こちらもルーティングに従い修正(person追加)

- if devise_mapping.registerable? && controller_name != 'registrations'
  = link_to "Sign up", new_person_registration_path(resource_name)

修正するも次のエラー分
ActionController::UnknownFormat in Devise::RegistrationsController#new

受け取るパラメーターをfirst_nameとsecond_nameを指定していなかった為
こちらを参考にして、
https://aliceblog1616.com/devise_parameter_sanitizer%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%A8%E3%81%AF%EF%BC%9F/

class ApplicationController < ActionController::Base
  before_action :authenticate_person!
  before_action :configure_permitted_parameters, if: :devise_controller?

protected
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:first_name, :second_name])
    devise_parameter_sanitizer.permit(:sign_in, keys: [:first_name, :second_name])
    devise_parameter_sanitizer.permit(:account_update, keys: [:first_name, :second_name])
  end
end

deviseのcontrollersをインストールしてないが、deviseが裏で作動しているので、if: :devise_controller?も記述。
エラー分変わらず。

ActionController::UnknownFormat in Devise::RegistrationsController#new

https://stackoverflow.com/questions/19193222/rails-4-devise-3-1-1-actioncontrollerunknownformat-in-deviseregistrationscon
を参考に

registration/new.html.haml

= form_for(resource, as: resource_name, url: person_registration_path(resource_name)) do 

から
(resource_name)を消す。

registration/new.html.haml

= form_for(resource, as: resource_name, url: person_registration_path) do |f|

修正

$ rails s

再起動忘れずに。
無事開通！

動作確認する前にroutesでしっかりpath確認して、parameterで追加カラムを指定する。
この工程を忘れやすいので、改めていい勉強になりました。

7つのアクション以外でルーティングを設定する方法を説明します。
検索フォームを作成する場合、searchアクション等を利用。

７つのアクション以外でルーティングを設定する方法は2つある。

collectionとmember

collectionはルーティングに:idがつかない、memberは:idがつく。

#collectionで定義

Rails.application.routes.draw do
  resources :tweets do
    collection do
      get 'search'
    end
  end
end

#collectionのルーティング

Prefix           Verb    URI                                 Pattern
search_tweets    GET    /tweets/search(.:format)              tweets#search

#memberで定義

Rails.application.routes.draw do
  resources :tweets do
    member do
      get 'search'
    end
  end

#memberのルーティング

Prefix           Verb    URI                                 Pattern
search_tweet      GET    /tweets/:id/search(.:format)       tweets#search

user_signed_in?

ユーザーがサインイン済みかどうかを判定する

例　elseの時はサインインしていない場合
app/views/layouts/application.html.erb

<div class="header__right">
        <% if user_signed_in? %>
          <%= link_to "新規投稿", new_post_path, class: "header__right--btn" %>
          <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "header__right--btn" %>
        <% else %>
          <%= link_to "ログイン", new_user_session_path, class: "header__right--btn" %>
          <%= link_to "新規登録", new_user_registration_path, class: "header__right--btn" %>
        <% end %>
      </div>

current_user メソッド

サインインしているユーザーを取得する。もし、サインイン中のユーザーidを取得したい場合、current_user.idと記述することで取得できる。

merge メソッド

2つのハッシュを結合することができる。

private
  def post_params
    params.require(:post).permit(:title, :content).merge(user_id: current_user.id)
  end

以下をイメージするとわかりやすい

configure_permitted_parameters メソッド

deviseでは初期状態でサインアップ時にメールアドレスとパスワードのみを受け取るようにストロングパラメーターが設定してあるので、追加したキー（nickname）のパラメーターは許可してない。
なので追加のパラメーターを許可したい場合は、application_controller.rbにおいてbefore_actionにconfigure_permitted_parametersメソッドを設定する。

class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  protected
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:nickname])
  end
end

上記のように記載すればnicknameも許可される。

before_action :authenticate_user!

コントローラーに設定して、ログイン済ユーザーのみにアクセスを許可する。以下の記載ならばshowはログインユーザーのみ実行可能となる。

class ArticlesController < ApplicationController
  before_action :authenticate_user!, only: [:show]

  def index
  end

  def show
  end
end

画像投稿機能をつけるときにやっておくこと

投稿した画像のデータを保存する必要がないとき、
ディレクトリの.gitignoreというファイルに以下を記入する。

.gitignore

#末尾に追記
public/uploads/*

完了です

gitignoreとは？

コミットしたくないファイル・ディレクトリを指定できる設定ファイルのことです。
通常画像投稿の機能をつけると画像は自動的にpublic/uploadというディレクトリに
格納されます。
そこで、このファイル名をgitignoreへ追加しておくことでgithubへ画像がコミットされなくなるということです。（コミットされないだけで画像自体はフォルダへ入ってきますが。）

終わりに

gitignoreのことすっかり忘れて、コミットの時に大量の画像に危く履歴を圧迫されそうになりました。
備忘録として残しておこうと思います。

Progate、ドットインストールを終えた後の勉強として、書籍などで基礎固めをするのは鉄板の流れになっています。
そして多くの初学者用書籍には練習問題がついています。

この練習問題を「解いて、解答例を見て、終わり」にせず、きちんと筋肉に変えていくために行なっていることをまとめました。

環境

macOS 10.14.1 (Mojave)
Homebrew 2.2.5
Ruby on Rails 5.2.4.1

背景

プログラミング初学者にとって、練習問題は大事な勉強方法だと思っています。

なぜなら、プログラミングに限らず「ものごとが上達すること」を考えたときに、初学者が上達するなるには以下が重要だと言われているからです。

• 基本的な動作 を なんども反復 する
• 情報を 自分の言葉 でアウトプットする
• 解きっぱなしにせず、 アウトプットを検証する

練習問題は実務に入っていない未経験者が、自分の頭で考えながらコードを繰り返し検証するのに良い教材になります。
■参考
上達の法則

いつ勉強してたの？っていうぐらいたいして全然勉強せずに東大に入ってしまう人は、どのように受験勉強をしている (していた) のですか？

練習問題

もちろん書籍に書いてる練習問題でもOKですが、練習問題はいくらでもネットに落ちているので便利ですね。
自分の学習している言語ではなくても、答えを考えればいいので「プログラミング　練習問題」「プログラミング　初心者　練習」とかで検索しても結構色々出てきます。

以下は僕が実際に練習している問題ページです。

プログラミングスレまとめ

PRACTICE PYTHON

解き方（方針）

ただ解くだけで終わらないためには、以下2つの記事が方針の参考になります。
どちらも好きな記事で、それこそ何度も繰り返し読んでいます。

効果的なコーディング練習問題の解かせ方

きみたちは今まで何のためにRailsでMVCパターンを勉強してきたのか

上記の上達に関する考え方や、練習問題の記事から考えるに、練習問題を解く方針として以下をプロセスに組み込む必要があると分かります。

■問題の選び方
- ややこしい操作や使用頻度の低いメソッドではなく、頻出する動作を中心に問題を選ぶ
- 検証ができるように、できればディスカッションをするスレなどがあるサイトを選ぶ

上記のようなサイトは条件に当てはまるかと思います。
その他Qiitaなどに投稿されている問題を自分で解いてみるのも良いかと。

■問題の解き方
- 手動入力や目視確認は極力排除する
- 関数の結果を純粋なオブジェクトとして表現する
- 処理を出来るだけ共通化する

解き方(Rubyでの詳細例)

今回はこちらの問題を使用します。

# http://vipprog.net/wiki/exercise.html#x9ab58f6
# Hello World!を5回表示させてください。
# print等は1回の使用にとどめてみてください。
# 可能ならコマンドラインから入力を受け取って、n回表示するように改造してください。

とりあえずの回答が以下。
コンソールで受け取った数字に対してHello Worldを繰り返して表示しました。普通にやったらここまでで学習が終わってしまいます。実際サイトを見る限りだと、このレベルの解答が解答例として載っている。

num = gets.to_i

num.times do |n|
  print "Hello World! ", n+1, "\n"
end

問題1)入力が手動になっており煩雑
改善1)手動入力を関数に変換
このままだと、毎回手入力する必要があるため、変更を加える。関数にしておいて、数字を指定できるようにしてみましょう。

def repeat_hello(n)
  n.times do |n|
    print "Hello World! ", n+1, "\n"
  end
end

repeat_hello(5)

問題2)テストの実施や、コンソール以外での使用がしにくい
改善2)関数の出力をテスト化
関数にはなったものの、出力がprintのため、このままだとコンソール以外で使いにくくテストも実施しづらいです。そこで以下の変更を行います。

• ロジック本体とコンソール出力用に分解
• minitestを追加

require 'minitest/autorun'

def repeat_hello(n)
# ロジック本体
  rows = []
  n.times do |n|
    rows.push("Hello World! #{n + 1}")
  end

  rows
end

def main
  # コンソール出力用
  rows = repeat_hello(5)
  puts rows
end

class RepeatHello < Minitest::Test
  def test_repeat_hello
    assert_equal ['Hello World! 1', 'Hello World! 2', 'Hello World! 3', 'Hello World! 4', 'Hello World! 5'], repeat_hello(5)
  end
end

問題3)テストの冗長化が気になる
改善3)テストパターンのテストデータ化
1つだから良いものの、複数の引数のテストを試したいとなった時に文が長いのが気になってきます。
安全にチェックするために、テストのパターンが複数試せた方が良いので、以下の修正を行います。

require 'minitest/autorun'

def repeat_hello(n)
  # ロジック本体
  rows = []
  n.times do |n|
    rows.push("Hello World! #{n + 1}")
  end

  rows
end

def main
  # コンソール出力用
  rows = repeat_hello(5)
  puts rows
end

class RepeatHello < Minitest::Test

  def test_repeat_hello

＃ テストデータの作成
    test_data = [
      [],
      ['Hello World! 1'],
      ['Hello World! 1', 'Hello World! 2'],
      ['Hello World! 1', 'Hello World! 2', 'Hello World! 3'],
      ['Hello World! 1', 'Hello World! 2', 'Hello World! 3', 'Hello World! 4'],
      ['Hello World! 1', 'Hello World! 2', 'Hello World! 3', 'Hello World! 4', 'Hello World! 5']
      ]

# テストの繰り返し実施
    test_data.each_with_index do |expected, id|
      assert_equal expected, repeat_hello(id)
    end
  end
end

改善4)ロジック本体のリファクタリング
ここまできたら、テストで結果を手軽に試せるので、あとはロジック本体のリファクタリングに入れると。
今回の例ではわざわざややこしくしてるけど、例えば先に1.2.3.4.5のような配列を作ってからpushするような書き方はできるかな、とか、色々試して楽しめます。

def repeat_hello(n)
  # ロジック本体 => 変更
  list = []
  n.times do |i|
    list.push(i + 1)
  end

  rows = []
  for l in list
    rows.push("Hello World! #{l}")
  end

  rows
end

まとめ

早く新しいことを覚えたいと、つい流してしまいがちな練習問題。
ですが、新しいことを覚えるときに大切な要素が詰まっていますので、毎日1題ずつでも継続していきましょう！

Qiita始めたばかりですので、改善のためにもぜひコメントくださいませ。

追記

@scivola さんにコメントいただきました。ありがとうございます。
ロジック本体を以下のように修正し、テストを問題なく通過することを確認しました。

def repeat_hello(n)
  # ロジック本体
  (1..n).map{ |i| "Hello World! #{i}" }
end

いけた

が、使える引数の順番が複雑な感じ。カッコも必要。
カッコ内の引数：each_with_objectの第1引数、第2引数
カッコ外の引数：with_indexで追加された引数
ということのようだ。

(1..3).each_with_object([]).with_index do |(data, arr), index|
 data # (1..3)の配列内のデータ
 arr # each_with_objectの引数に渡した配列
 index # インデックス
end

参考

• each_with_indexしつつinjectしたい

概要

この記事は中学高校生向けプログラミング教室の教材として作ったものを一部改変したものです。

以前、
・DXRubyで 1ステップずつ作っていく「ブロック崩し」 - Qiita
という投稿をしました。

RubyやDXRubyは、衝突判定だけでなく、プログラミングに便利な数々の機能を持っています。そのため、わずか100行足らずで「ブロック崩し」ができてしまいました。

しかし、プログラミングの学習としては、便利機能に頼りすぎるのもどうなんだろうか？と思っていたところ、『プログラムはこうして作られる』という本と、その著者の平山尚さんの言葉を見つけてドキッとしました。

「なんか動くもん作れていい気になってんだろうが、ライブラリを剥ぎ取ったおまえ自身の力はその程度だ。よく鏡を見ておけ」平山 尚 @hirasho

もし、それらの便利な機能をなるべく使わず、基本的な機能だけを使って「ブロック崩し」を作ってみるとどうなるでしょうか？

プログラミングの本当の力が試されることになります。

そこで、今回はRubyとそのゲームライブラリDXRubyを使いますが、以下のような基本機能・命令だけを使うことにします。

• Rubyは、プログラミング言語として最低限の機能

• DXRubyは、ウィンドウの生成、座標(x,y)に点を描く、座標(x,y)の色を取得する、文字の表示、マウス／キー／カーソルキーの状態の取得のみ

今回はこの課題に挑戦してみます。

→ 『プログラムはこうして作られる プログラマの頭の中をのぞいてみよう』（平山尚 著）

画像

前の記事
・DXRuby：「当たり判定」を自分で作ってみよう　C. 色で判定する - Qiita

技術解説

使用する基本機能・命令

前述の著書で使われた「プログラミング言語 Sunaba」を参考にして以下の通りとしました。

→ プログラミング言語Sunaba
https://hirasho.github.io/Sunaba/

---

● Ruby

• 定数　変数　true　false　nil

• 数値　文字　文字列　'　''

• 演算子/式

　=（代入）
　+　-　*　/　%　<　>　<=　=>　==　!=　(　)
　&&　||

• 制御構造

　while～end

　if～（else）～end

　return

　break

• 関数

　def～end

• その他

　require　puts　p　#（コメント）

※クラス、配列、ハッシュ、do～end、each などは使わない

---

● DXRuby

○ Image（Imageクラスはスクリーン以外は使わない）

• $screen = Image.new(640, 480) （ウィンドサイズのスクリーンの設定）
• $screen[x, y]　　　　（色の取得）
• $screen[x, y] = 色　　（色の設定；これでドット（点）を描く）
• 色定数

○ Window

• Window.loop do～end　　　　（ウィンドウの生成、更新）
• Window.draw(x, y, $screen)　（これでドット（点）を描く）
• Window.draw_font()　　　　　（文字の表示）

○ Input

• Input.x　　　　　　　　（カーソルキー←→の押下の取得）
• Input.y　　　　　　　　（カーソルキー↑↓の押下の取得）
• Input.mouse_pos_x　　（マウス位置xの取得）
• Input.mouse_pos_y　　（マウス位置yの取得）
• Input.key_down?　　　（キーボードの押下の取得）

○ Font

　Font.new()　　　（文字フォントの設定）

※Spriteクラス、衝突判定などは使わない

---

使用ライブラリ

Windows向けRuby用2DゲームライブラリDXRubyを使用します。
バージョン1.4.2以上を想定しています。

1.4.2より前のバージョンとの主な相違点

• Window.loopが複数置ける

• マウス位置を取得するInput.mouse_pos_x、Input.mouse_pos_yの新しい書き方として、Input.mouse_x、Input.mouse_yが追加

→ DXRuby 1.4.6：更新履歴

http://mirichi.github.io/dxruby-doc/CHANGELOG.html

DXRubyインストールの注意点

→ DXRuby 1.4.6 をWindows10で使う時の注意点とインストール方法 - noanoa07 - Qiita
https://qiita.com/noanoa07/items/0ce14c2404df38de94b7

参考サイト

• DXRuby のホームページ
  http://dxruby.osdn.jp

• DXRuby 1.4.6 リファレンスマニュアル
  http://mirichi.github.io/dxruby-doc/index.html

困ったときは、このページの「チュートリアル」と「マニュアル」にだいたい書いてあります。

• DXRuby 1.4.1 リファレンスマニュアル http://dxruby.osdn.jp/DXRubyReference/20095313382446.htm

古いバージョンのリファレンスも役に立つときがあります。

→ 「ブロック崩し」追加課題2；なるべく基本命令だけで「ブロック崩し」を作ってみよう - noanoa 日々の日記
http://blog.livedoor.jp/noanoa07/archives/2050752.html

→ 「ブロック崩し」追加課題に向けて；コンピュータの世界の下側を見てみよう - noanoa 日々の日記
http://blog.livedoor.jp/noanoa07/archives/2048469.html

→ プログラミング言語 Sunaba で「ブロック崩し」を作ってみた - noanoa 日々の日記
http://blog.livedoor.jp/noanoa07/archives/1979433.html

このテキスト関連のブログ記事です。

ライセンス

ソースコード、本解説ともにパブリックドメイン

プログラム解説

0. 練習：ウィンドウを表示

ウィンドウを表示するために、ウィンドウサイズ 640×480（色は透明）の$screenイメージを作成し、Window.drawで描画します。（$でグローバル変数にしています。）

→ DXRuby 1.4.1 リファレンス：Imageクラス Image.new
http://dxruby.osdn.jp/DXRubyReference/200953184038328.htm

→ DXRubyリファレンス：チュートリアル 2. 画像の読み込みと描画
http://mirichi.github.io/dxruby-doc/tutorial/basic.html

pri_00.rb

require 'dxruby'

$screen = Image.new(640, 480)

Window.loop do
  Window.draw(0, 0, $screen)
end

1. 練習：点（ドット）を表示する

座標(300, 200)に白色の点（ドット）を表示させてみます。

$screen上の座標(x,y)に色を指定することで、点（ドット）を表示させられます。
これには、イメージ[x, y] = 色を使います。

色の指定は、「DXRubyリファレンス：色配列と色定数について」
http://mirichi.github.io/dxruby-doc/api/constant_color.html

を見てください。

→ DXRuby 1.4.1 リファレンス：Imageクラス Image#[x, y]=color
http://dxruby.osdn.jp/DXRubyReference/200953184038328.htm

pri_01.rb

require 'dxruby'

$screen = Image.new(640, 480)

Window.loop do
  $screen[300, 200] = C_WHITE

  Window.draw(0, 0, $screen)
end

（よく見ると、画面中央やや上に白色の点が描かれています。）

2. 練習：点で線を描く

次は、長さ100の線を描いてみます。

線は点（ドット）の集まりとして描画します。

今回、繰り返しはwhile～endのみを使います。

• pri_02.rb

require 'dxruby'

$screen = Image.new(640, 480)

Window.loop do
  width = 0
  while width < 100
    $screen[300 + width, 200] = C_WHITE
    width = width + 1
  end

  Window.draw(0, 0, $screen)
end

3. 練習：点で四角（トウフ）を描く

線が描けたので、四角（トウフ）を描きます。
二重ループを使います。

• pri_03.rb（失敗！四角にならない）

require 'dxruby'

$screen = Image.new(640, 480)

Window.loop do
  width  = 0
  height = 0
  while width < 100
    while height < 80
      $screen[300 + width, 200 + height] = C_WHITE
      height = height + 1
    end
    width = width + 1
  end

  Window.draw(0, 0, $screen)
end

二重ループの初期値の設定の間違いです。（ありがち？）

書き直します。

• pri_04.rb

require 'dxruby'

$screen = Image.new(640, 480)

Window.loop do
  width = 0
  while width < 100
    height = 0
    while height < 80
      $screen[300 + width, 200 + height] = C_WHITE
      height = height + 1
    end
    width = width + 1
  end

  Window.draw(0, 0, $screen)
end

4. ブロック崩し：壁を描く

それでは、ブロック崩しの壁を描いていきます。

まず、左壁（位置（0, 0）、大きさ（横 20、縦 480） 、白色）
を作ります。

• pri_05.rb

require 'dxruby'

$screen = Image.new(640, 480)

Window.loop do
  x0 = 0
  y0 = 0
  width = 0
  while width < 20
    height = 0
    while height < 480
      $screen[x0 + width, y0 + height] = C_WHITE
      height = height + 1
    end
    width = width + 1
  end

  Window.draw(0, 0, $screen)
end

5. ブロック崩し：壁を複数描く

もう一つ、上壁（位置（0, 0）、大きさ（横 640、縦 20）、白色）を追加します。

• pri_06.rb

require 'dxruby'

$screen = Image.new(640, 480)

Window.loop do
  x0 = 0
  y0 = 0
  width0 = 0
  while width0 < 20
    height0 = 0
    while height0 < 480
      $screen[x0 + width0, y0 + height0] = C_WHITE
      height0 = height0 + 1
    end
    width0 = width0 + 1
  end

  x1 = 0
  y1 = 0
  width1 = 0
  while width1 < 640
    height1 = 0
    while height1 < 20
      $screen[x1 + width1, y1 + height1] = C_WHITE
      height1 = height1 + 1
    end
    width1 = width1 + 1
  end

  Window.draw(0, 0, $screen)
end

6. ブロック崩し：「四角を描く」をまとめる（関数化）

続いて、左壁（位置（620, 0）、大きさ（横 20、縦 480） 、白色）
を作ります。

コードが複雑になってきたので、「四角を描く」という処理をrectという名前にまとめます（関数化）。

def rect(引数)
  処理内容 
end

このrectを使ってコードを書いてみます。

• pri_07.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

Window.loop do
  rect(  0,   0,  20, 480, C_WHITE)
  rect(  0,   0, 640,  20, C_WHITE)
  rect(620,   0,  20, 480, C_WHITE)

  Window.draw(0, 0, $screen)
end

7. 練習：トウフを動かす

トウフをカーソルキーで動かす試作をします。

→ DXRubyリファレンス：チュートリアル 5. カーソルキーの入力
http://mirichi.github.io/dxruby-doc/tutorial/basic.html

• pri_08.rb（失敗！軌跡が残る）

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

x = 300
y = 200

Window.loop do
  x = x + Input.x
  y = y + Input.y

  rect(x, y, 100, 80, C_WHITE)

  Window.draw(0, 0, $screen)
end

図形を動かすと、前回の位置の色がそのまま残ってしまいました。

動いて見えるには、Window.loopが一周する毎に前回の図形を消す処理が必要でした。
書き直します。

• pri_09.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

x = 300
y = 200

Window.loop do
  rect(x, y, 100, 80, C_DEFAULT)  # 前回の位置のトウフの軌跡を消す

  x = x + Input.x
  y = y + Input.y

  rect(x, y, 100, 80, C_WHITE)

  Window.draw(0, 0, $screen)
end

8. ブロック崩し：壁とバーを描く（pri_10.rb）

図形の動かし方がわかったので、バーを描いて、マウスと共に動くようにします。

→ DXRubyリファレンス：チュートリアル 7. マウスの入力
http://mirichi.github.io/dxruby-doc/tutorial/basic.html

• pri_10.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

# バーの初期位置
x = 300

Window.loop do
  rect(x, 460, 100, 20, C_DEFAULT)    # バーの軌跡を消す

  rect(  0,   0,  20, 480, C_WHITE)   # 左壁
  rect(  0,   0, 640,  20, C_WHITE)   # 上壁
  rect(620,   0,  20, 480, C_WHITE)   # 右壁

  x = Input.mouse_pos_x
  rect(x, 460, 100, 20, C_WHITE)      # バー

  Window.draw(0, 0, $screen)
end

9. ブロック崩し：ボールを描く（動かす）

ボールを描き、動かします。移動量は、x方向 4、y方向 -4 に設定しました。

• pri_11.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

# バーの初期位置
x = 300

# ボールの初期値
ball_x = 300
ball_y = 400
dx =  4
dy = -4

Window.loop do
  rect(x, 460, 100, 20, C_DEFAULT)         # バーの軌跡を消す
  rect(ball_x, ball_y, 20, 20, C_DEFAULT)  # ボールの軌跡を消す

  rect(  0,   0,  20, 480, C_WHITE)   # 左壁
  rect(  0,   0, 640,  20, C_WHITE)   # 上壁
  rect(620,   0,  20, 480, C_WHITE)   # 右壁

  x = Input.mouse_pos_x
  rect(x, 460, 100, 20, C_WHITE)      # バー

  ball_x = ball_x + dx
  ball_y = ball_y + dy
  rect(ball_x, ball_y, 20, 20, C_RED) # ボール

  Window.draw(0, 0, $screen)
end

10. 練習：衝突判定の試作

衝突判定を作ります。判定方法は、色で判定する方法にします。
・DXRuby：「当たり判定」を自分で作ってみよう　C. 色で判定する - Qiita
で使った方法です。

→ 「ブロック崩し」追加課題 1c)；衝突判定の自作（色） - noanoa 日々の日記
http://blog.livedoor.jp/noanoa07/archives/2052899.html

10-1. 大きさ1ドット（点）での衝突判定

衝突判定atari?(x, y)を作ります。座標(x, y) の色が透明（C_DEFAULT）以外なら衝突と判定します。

マウスの座標(x, y)と、壁との衝突/非衝突をターミナル（コマンドプロンプト）にtrue/falseで出力します。

• pri_12.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

def atari?(x, y)                       # 衝突判定（1ドット）
  if $screen[x,y] == C_DEFAULT
    return false
  end
  true
end

Window.loop do
  rect(  0,   0,  20, 480, C_WHITE)   # 左壁
  rect(  0,   0, 640,  20, C_WHITE)   # 上壁
  rect(620,   0,  20, 480, C_WHITE)   # 右壁

  x = Input.mouse_pos_x
  y = Input.mouse_pos_y

  p result =  atari?(x, y)            # マウスの位置と壁の衝突判定

  Window.draw(0, 0, $screen)
end

10-2. 四角形での衝突判定

四角形が、壁と衝突しているかをatari_4?で判定します。

衝突/非衝突の結果をターミナル（コマンドプロンプト）にtrue/falseで出力しつつ、四角形の色も赤/白にします。

• pri_13.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

def atari?(x, y)                       # 衝突判定（1ドット）
  if $screen[x,y] == C_DEFAULT
    return false
  end
  true
end

def atari_4?(x, y, width, height)      # 衝突判定（四角）
  atari?(x, y)         || atari?(x + width, y) ||
  atari?(x, y + width) || atari?(x + width, y + width)
end

# 四角の初期値
x = 200
y = 300
width  = 40
height = 30

Window.loop do
  rect(x, y, width, height, C_DEFAULT) # 四角の軌跡を消す

  rect(  0,   0,  20, 480, C_WHITE)    # 左壁
  rect(  0,   0, 640,  20, C_WHITE)    # 上壁
  rect(620,   0,  20, 480, C_WHITE)    # 右壁

  x = Input.mouse_pos_x
  y = Input.mouse_pos_y

  p result =  atari_4?(x, y, width, height)
  if result
    rect(x, y, width, height, C_RED)
  else
    rect(x, y, width, height, C_WHITE)
  end

  Window.draw(0, 0, $screen)
end

11. ブロック崩し：壁とバーで跳ね返る

衝突判定を使って、ボールが壁とバーで跳ね返るようにします。

• pri_14.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

def atari?(x, y)                       # 衝突判定（1ドット）
  if $screen[x,y] == C_DEFAULT
    return false
  end
  true
end

def atari_4?(x, y, width, height)      # 衝突判定（四角）
  atari?(x, y)         || atari?(x + width, y) ||
  atari?(x, y + width) || atari?(x + width, y + width)
end

# バーの初期位置
x = 300

# ボールの初期値
ball_x = 300
ball_y = 400
dx =  4
dy = -4

Window.loop do
  rect(x, 460, 100, 20, C_DEFAULT)         # バーの軌跡を消す
  rect(ball_x, ball_y, 20, 20, C_DEFAULT)  # ボールの軌跡を消す

  rect(  0,   0,  20, 480, C_WHITE)   # 左壁
  rect(  0,   0, 640,  20, C_WHITE)   # 上壁
  rect(620,   0,  20, 480, C_WHITE)   # 右壁

  x = Input.mouse_pos_x
  rect(x, 460, 100, 20, C_WHITE)      # バー

  ball_x = ball_x + dx
  if atari_4?(ball_x, ball_y, 20, 20)
    ball_x = ball_x - dx
    dx = -dx
  end

  ball_y = ball_y + dy
  if atari_4?(ball_x, ball_y, 20, 20)
    ball_y = ball_y - dy
    dy = -dy
  end

  rect(ball_x, ball_y, 20, 20, C_RED) # ボール

  Window.draw(0, 0, $screen)
end

12. ブロック崩し：ブロックを描く

ブロック群を描画します。

• pri_15.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

def atari?(x, y)                       # 衝突判定（1ドット）
  if $screen[x,y] == C_DEFAULT
    return false
  end
  true
end

def atari_4?(x, y, width, height)      # 衝突判定（四角）
  atari?(x, y)         || atari?(x + width, y) ||
  atari?(x, y + width) || atari?(x + width, y + width)
end

def block(x, y, color)                 # ブロック1つ
  rect(x, y, 58, 18, color)
end

def blocks                             # ブロック群を描画する
  count_x = 0
  while count_x < 10
    count_y = 0
    while count_y < 5
      x = 21 + 60 * count_x
      y = 21 + 20 * count_y
      block(x, y, C_WHITE)
      count_y = count_y + 1
    end
  count_x = count_x + 1
  end
end

# バーの初期位置
x = 300

# ボールの初期値
ball_x = 300
ball_y = 400
dx =  4
dy = -4

Window.loop do
  rect(x, 460, 100, 20, C_DEFAULT)         # バーの軌跡を消す
  rect(ball_x, ball_y, 20, 20, C_DEFAULT)  # ボールの軌跡を消す

  rect(  0,   0,  20, 480, C_WHITE)   # 左壁
  rect(  0,   0, 640,  20, C_WHITE)   # 上壁
  rect(620,   0,  20, 480, C_WHITE)   # 右壁

  x = Input.mouse_pos_x
  rect(x, 460, 100, 20, C_WHITE)      # バー

  ball_x = ball_x + dx
  if atari_4?(ball_x, ball_y, 20, 20)
    ball_x = ball_x - dx
    dx = -dx
  end

  ball_y = ball_y + dy
  if atari_4?(ball_x, ball_y, 20, 20)
    ball_y = ball_y - dy
    dy = -dy
  end

  rect(ball_x, ball_y, 20, 20, C_RED) # ボール

  blocks                              # ブロック群

  Window.draw(0, 0, $screen)
end

13. ブロック崩し：ブロックとの衝突判定（衝突したら消す）をする（完成）

衝突したブロックの (x, y) を計算して、ブロックを消す処理を追加します。
ブロック群の初期状態（白色）を設定する処理が必要になります。

• pri_16.rb

# 基本機能だけでブロック崩し：衝突ブロックを消す（完成）

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

def atari?(x, y)                       # 衝突判定（1ドット）
  if $screen[x,y] == C_DEFAULT
    return false
  end
  true
end

def atari_4?(x, y, width, height)      # 衝突判定（四角）
  atari?(x, y)         || atari?(x + width, y) ||
  atari?(x, y + width) || atari?(x + width, y + width)
end

def block(x, y, color)                 # ブロック1つ
  rect(x, y, 58, 18, color)
end

def blocks                             # ブロック群を描画する
  count_x = 0
  while count_x < 10
    count_y = 0
    while count_y < 5
      x = 21 + 60 * count_x
      y = 21 + 20 * count_y
      block(x, y, $screen[x, y])       # 色は前回の色と同じにする
      count_y = count_y + 1
    end
  count_x = count_x + 1
  end
end

def vanish_block(x, y)                 # ブロックを消去する
  if (20 < x && x < 600) && (20 < y && y < 120)
    rect_x = x - (x - 21) % 60         # 衝突位置から衝突ブロックの
    rect_y = y - (y - 21) % 20         # (x, y)を計算する
    block(rect_x, rect_y, C_DEFAULT)
  end
end

def initialize_blocks                  # ブロック群の初期色を白にする
  count_x = 0
  while count_x < 10
    count_y = 0
    while count_y < 5
      x = 21 + 60 * count_x
      y = 21 + 20 * count_y
      $screen[x, y] = C_WHITE
      count_y = count_y + 1
    end
  count_x = count_x + 1
  end
end

# バーの初期位置
x = 300

# ボールの初期値
ball_x = 300
ball_y = 400
dx =  4
dy = -4

# ブロック群の初期色の設定
initialize_blocks

Window.loop do
  rect(x, 460, 100, 20, C_DEFAULT)         # バーの軌跡を消す
  rect(ball_x, ball_y, 20, 20, C_DEFAULT)  # ボールの軌跡を消す

  rect(  0,   0,  20, 480, C_WHITE)   # 左壁
  rect(  0,   0, 640,  20, C_WHITE)   # 上壁
  rect(620,   0,  20, 480, C_WHITE)   # 右壁

  x = Input.mouse_pos_x
  rect(x, 460, 100, 20, C_WHITE)      # バー

  ball_x = ball_x + dx
  if atari_4?(ball_x, ball_y, 20, 20)
    vanish_block(ball_x, ball_y)      # 衝突ブロックを消す
    ball_x = ball_x - dx
    dx = -dx
  end

  ball_y = ball_y + dy
  if atari_4?(ball_x, ball_y, 20, 20)
    vanish_block(ball_x, ball_y)      # 衝突ブロックを消す
    ball_y = ball_y - dy
    dy = -dy
  end

  rect(ball_x, ball_y, 20, 20, C_RED) # ボール

  blocks                              # ブロック群

  Window.draw(0, 0, $screen)
end

描画処理が追いつかず、ボールの移動スピードが低下してしまいました。
改良の余地があるようです。

参考

プログラミング初心者向け：DXRubyで 1ステップずつ作っていく「ブロック崩し」 - Qiita
で作った「ブロック崩し」のプログラムです。

• block28.rb

require 'dxruby'

img_bar   = Image.new(100,  20, C_WHITE)
img_hwall = Image.new( 20, 480, C_BLUE)
img_vwall = Image.new(640,  20, C_BLUE)
img_ball  = Image.new( 20,  20).circle_fill(10, 10, 10, C_RED)
img_block = Image.new( 58,  18, C_GREEN)
img_block_y = Image.new( 58,  18, C_YELLOW)

bar   = Sprite.new(  0, 460, img_bar)
lwall = Sprite.new(  0,   0, img_hwall)
rwall = Sprite.new(620,   0, img_hwall)
twall = Sprite.new(  0,   0, img_vwall)

walls = [bar, lwall, rwall, twall]

ball  =  Sprite.new(300, 400, img_ball)
dx =  2
dy = -2

def move(sprite, speed_x, speed_y)
  sprite.x += speed_x
  sprite.y += speed_y
end

blocks = []
10.times do |x|
  5.times do |y|
    blocks << Sprite.new(21 + 60 * x, 21 + 20 * y, img_block)
  end
end


Window.loop do
  bar.x = Input.mouse_pos_x
  Sprite.draw(walls)

  move(ball, dx, 0)
  if ball === walls
    ball.x -= dx
    dx = -dx
  end
  coll_x = ball.check(blocks)
  if coll_x[0]
    coll_x[0].image = img_block_y
    coll_x[0].draw     #一瞬色が変わって表示
    coll_x[0].vanish   #消える
    ball.x -= dx
    dx = -dx
  end

  move(ball, 0, dy)
  if ball === walls
    ball. y -= dy
    dy = -dy
  end
  coll_y = ball.check(blocks)
  if coll_y[0]
    coll_y[0].image = img_block_y
    coll_y[0].draw     #一瞬色が変わって表示
    coll_y[0].vanish   #消える
    ball. y -= dy
    dy = -dy
  end

  ball.draw

  Sprite.draw(blocks)
end

概要

この記事は中学高校生向けプログラミング教室の教材として作ったものを一部改変したものです。

以前、
・DXRubyで 1ステップずつ作っていく「ブロック崩し」 - Qiita
という投稿をしました。

RubyやDXRubyは、衝突判定だけでなく、プログラミングに便利な数々の機能を持っています。そのため、わずか100行足らずで「ブロック崩し」ができてしまいました。

しかし、プログラミングの学習としては、便利機能に頼りすぎるのもどうなんだろうか？と思っていたところ、『プログラムはこうして作られる』という本と、その著者の平山尚さんの言葉を見つけてドキッとしました。

「なんか動くもん作れていい気になってんだろうが、ライブラリを剥ぎ取ったおまえ自身の力はその程度だ。よく鏡を見ておけ」平山 尚 @hirasho

もし、それらの便利な機能をなるべく使わず、基本的な機能だけを使って「ブロック崩し」を作ってみるとどうなるでしょうか？

プログラミングの本当の力が試されることになります。

そこで、今回はRubyとそのゲームライブラリDXRubyを使いますが、以下のような基本機能・命令だけを使うことにします。

• Rubyは、プログラミング言語として最低限の機能

• DXRubyは、ウィンドウの生成、座標(x,y)に点を描く、座標(x,y)の色を取得する、文字の表示、マウス／キー／カーソルキーの状態の取得のみ

今回はこの課題に挑戦してみます。

→ 『プログラムはこうして作られる プログラマの頭の中をのぞいてみよう』（平山尚 著）

画像

前の記事
・DXRuby：「当たり判定」を自分で作ってみよう　C. 色で判定する - Qiita

技術解説

使用する基本機能・命令

前述の著書で使われた「プログラミング言語 Sunaba」を参考にして以下の通りとしました。

→ プログラミング言語Sunaba
https://hirasho.github.io/Sunaba/

---

● Ruby

• 定数　変数　true　false　nil

• 数値　文字　文字列　'　''

• 演算子/式

　=（代入）
　+　-　*　/　%　<　>　<=　=>　==　!=　(　)
　&&　||

• 制御構造

　while～end

　if～（else）～end

　return

　break

• 関数

　def～end

• その他

　require　puts　p　#（コメント）

※クラス、配列、ハッシュ、do～end、each などは使わない

---

● DXRuby

○ Image（Imageクラスはスクリーン以外は使わない）

• $screen = Image.new(640, 480) （ウィンドサイズのスクリーンの設定）
• $screen[x, y]　　　　（色の取得）
• $screen[x, y] = 色　　（色の設定；これでドット（点）を描く）
• 色定数

○ Window

• Window.loop do～end　　　　（ウィンドウの生成、更新）
• Window.draw(x, y, $screen)　（これでドット（点）を描く）
• Window.draw_font()　　　　　（文字の表示）

○ Input

• Input.x　　　　　　　　（カーソルキー←→の押下の取得）
• Input.y　　　　　　　　（カーソルキー↑↓の押下の取得）
• Input.mouse_pos_x　　（マウス位置xの取得）
• Input.mouse_pos_y　　（マウス位置yの取得）
• Input.key_down?　　　（キーボードの押下の取得）

○ Font

　Font.new()　　　（文字フォントの設定）

※Spriteクラス、衝突判定などは使わない

---

使用ライブラリ

Windows向けRuby用2DゲームライブラリDXRubyを使用します。
バージョン1.4.2以上を想定しています。

1.4.2より前のバージョンとの主な相違点

• Window.loopが複数置ける

• マウス位置を取得するInput.mouse_pos_x、Input.mouse_pos_yの新しい書き方として、Input.mouse_x、Input.mouse_yが追加

→ DXRuby 1.4.6：更新履歴

http://mirichi.github.io/dxruby-doc/CHANGELOG.html

DXRubyインストールの注意点

→ DXRuby 1.4.6 をWindows10で使う時の注意点とインストール方法 - noanoa07 - Qiita
https://qiita.com/noanoa07/items/0ce14c2404df38de94b7

参考サイト

• DXRuby のホームページ
  http://dxruby.osdn.jp

• DXRuby 1.4.6 リファレンスマニュアル
  http://mirichi.github.io/dxruby-doc/index.html

困ったときは、このページの「チュートリアル」と「マニュアル」にだいたい書いてあります。

• DXRuby 1.4.1 リファレンスマニュアル http://dxruby.osdn.jp/DXRubyReference/20095313382446.htm

古いバージョンのリファレンスも役に立つときがあります。

→ 「ブロック崩し」追加課題2；なるべく基本命令だけで「ブロック崩し」を作ってみよう - noanoa 日々の日記
http://blog.livedoor.jp/noanoa07/archives/2050752.html

→ 「ブロック崩し」追加課題に向けて；コンピュータの世界の下側を見てみよう - noanoa 日々の日記
http://blog.livedoor.jp/noanoa07/archives/2048469.html

→ プログラミング言語 Sunaba で「ブロック崩し」を作ってみた - noanoa 日々の日記
http://blog.livedoor.jp/noanoa07/archives/1979433.html

このテキスト関連のブログ記事です。

ライセンス

ソースコード、本解説ともにパブリックドメイン

プログラム解説

0. 練習：ウィンドウを表示

ウィンドウを表示するために、ウィンドウサイズ 640×480（色は透明）の$screenイメージを作成し、Window.drawで描画します。（$でグローバル変数にしています。）

→ DXRuby 1.4.1 リファレンス：Imageクラス Image.new
http://dxruby.osdn.jp/DXRubyReference/200953184038328.htm

→ DXRubyリファレンス：チュートリアル 2. 画像の読み込みと描画
http://mirichi.github.io/dxruby-doc/tutorial/basic.html

pri_00.rb

require 'dxruby'

$screen = Image.new(640, 480)

Window.loop do
  Window.draw(0, 0, $screen)
end

1. 練習：点（ドット）を表示する

座標(300, 200)に白色の点（ドット）を表示させてみます。

$screen上の座標(x,y)に色を指定することで、点（ドット）を表示させられます。
これには、イメージ[x, y] = 色を使います。

色の指定は、「DXRubyリファレンス：色配列と色定数について」
http://mirichi.github.io/dxruby-doc/api/constant_color.html

を見てください。

→ DXRuby 1.4.1 リファレンス：Imageクラス Image#[x, y]=color
http://dxruby.osdn.jp/DXRubyReference/200953184038328.htm

pri_01.rb

require 'dxruby'

$screen = Image.new(640, 480)

Window.loop do
  $screen[300, 200] = C_WHITE

  Window.draw(0, 0, $screen)
end

（よく見ると、画面中央やや上に白色の点が描かれています。）

2. 練習：点で線を描く

次は、長さ100の線を描いてみます。

線は点（ドット）の集まりとして描画します。

今回、繰り返しはwhile～endのみを使います。

• pri_02.rb

require 'dxruby'

$screen = Image.new(640, 480)

Window.loop do
  width = 0
  while width < 100
    $screen[300 + width, 200] = C_WHITE
    width = width + 1
  end

  Window.draw(0, 0, $screen)
end

3. 練習：点で四角（トウフ）を描く

線が描けたので、四角（トウフ）を描きます。
二重ループを使います。

• pri_03.rb（失敗！四角にならない）

require 'dxruby'

$screen = Image.new(640, 480)

Window.loop do
  width  = 0
  height = 0
  while width < 100
    while height < 80
      $screen[300 + width, 200 + height] = C_WHITE
      height = height + 1
    end
    width = width + 1
  end

  Window.draw(0, 0, $screen)
end

二重ループの初期値の設定の間違いです。（ありがち？）

書き直します。

• pri_04.rb

require 'dxruby'

$screen = Image.new(640, 480)

Window.loop do
  width = 0
  while width < 100
    height = 0
    while height < 80
      $screen[300 + width, 200 + height] = C_WHITE
      height = height + 1
    end
    width = width + 1
  end

  Window.draw(0, 0, $screen)
end

4. ブロック崩し：壁を描く

それでは、ブロック崩しの壁を描いていきます。

まず、左壁（位置（0, 0）、大きさ（横 20、縦 480） 、白色）
を作ります。

• pri_05.rb

require 'dxruby'

$screen = Image.new(640, 480)

Window.loop do
  x0 = 0
  y0 = 0
  width = 0
  while width < 20
    height = 0
    while height < 480
      $screen[x0 + width, y0 + height] = C_WHITE
      height = height + 1
    end
    width = width + 1
  end

  Window.draw(0, 0, $screen)
end

5. ブロック崩し：壁を複数描く

もう一つ、上壁（位置（0, 0）、大きさ（横 640、縦 20）、白色）を追加します。

• pri_06.rb

require 'dxruby'

$screen = Image.new(640, 480)

Window.loop do
  x0 = 0
  y0 = 0
  width0 = 0
  while width0 < 20
    height0 = 0
    while height0 < 480
      $screen[x0 + width0, y0 + height0] = C_WHITE
      height0 = height0 + 1
    end
    width0 = width0 + 1
  end

  x1 = 0
  y1 = 0
  width1 = 0
  while width1 < 640
    height1 = 0
    while height1 < 20
      $screen[x1 + width1, y1 + height1] = C_WHITE
      height1 = height1 + 1
    end
    width1 = width1 + 1
  end

  Window.draw(0, 0, $screen)
end

6. ブロック崩し：「四角を描く」をまとめる（関数化）

続いて、左壁（位置（620, 0）、大きさ（横 20、縦 480） 、白色）
を作ります。

コードが複雑になってきたので、「四角を描く」という処理をrectという名前にまとめます（関数化）。

def rect(引数)
  処理内容 
end

このrectを使ってコードを書いてみます。

• pri_07.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

Window.loop do
  rect(  0,   0,  20, 480, C_WHITE)
  rect(  0,   0, 640,  20, C_WHITE)
  rect(620,   0,  20, 480, C_WHITE)

  Window.draw(0, 0, $screen)
end

7. 練習：トウフを動かす

トウフをカーソルキーで動かす試作をします。

→ DXRubyリファレンス：チュートリアル 5. カーソルキーの入力
http://mirichi.github.io/dxruby-doc/tutorial/basic.html

• pri_08.rb（失敗！軌跡が残る）

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

x = 300
y = 200

Window.loop do
  x = x + Input.x
  y = y + Input.y

  rect(x, y, 100, 80, C_WHITE)

  Window.draw(0, 0, $screen)
end

図形を動かすと、前回の位置の色がそのまま残ってしまいました。

動いて見えるには、Window.loopが一周する毎に前回の図形を消す処理が必要でした。
書き直します。

• pri_09.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

x = 300
y = 200

Window.loop do
  rect(x, y, 100, 80, C_DEFAULT)  # 前回の位置のトウフの軌跡を消す

  x = x + Input.x
  y = y + Input.y

  rect(x, y, 100, 80, C_WHITE)

  Window.draw(0, 0, $screen)
end

8. ブロック崩し：壁とバーを描く（pri_10.rb）

図形の動かし方がわかったので、バーを描いて、マウスと共に動くようにします。

→ DXRubyリファレンス：チュートリアル 7. マウスの入力
http://mirichi.github.io/dxruby-doc/tutorial/basic.html

• pri_10.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

# バーの初期位置
x = 300

Window.loop do
  rect(x, 460, 100, 20, C_DEFAULT)    # バーの軌跡を消す

  rect(  0,   0,  20, 480, C_WHITE)   # 左壁
  rect(  0,   0, 640,  20, C_WHITE)   # 上壁
  rect(620,   0,  20, 480, C_WHITE)   # 右壁

  x = Input.mouse_pos_x
  rect(x, 460, 100, 20, C_WHITE)      # バー

  Window.draw(0, 0, $screen)
end

9. ブロック崩し：ボールを描く（動かす）

ボールを描き、動かします。移動量は、x方向 4、y方向 -4 に設定しました。

• pri_11.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

# バーの初期位置
x = 300

# ボールの初期値
ball_x = 300
ball_y = 400
dx =  4
dy = -4

Window.loop do
  rect(x, 460, 100, 20, C_DEFAULT)         # バーの軌跡を消す
  rect(ball_x, ball_y, 20, 20, C_DEFAULT)  # ボールの軌跡を消す

  rect(  0,   0,  20, 480, C_WHITE)   # 左壁
  rect(  0,   0, 640,  20, C_WHITE)   # 上壁
  rect(620,   0,  20, 480, C_WHITE)   # 右壁

  x = Input.mouse_pos_x
  rect(x, 460, 100, 20, C_WHITE)      # バー

  ball_x = ball_x + dx
  ball_y = ball_y + dy
  rect(ball_x, ball_y, 20, 20, C_RED) # ボール

  Window.draw(0, 0, $screen)
end

10. 練習：衝突判定の試作

衝突判定を作ります。判定方法は、色で判定する方法にします。
・DXRuby：「当たり判定」を自分で作ってみよう　C. 色で判定する - Qiita
で使った方法です。

→ 「ブロック崩し」追加課題 1c)；衝突判定の自作（色） - noanoa 日々の日記
http://blog.livedoor.jp/noanoa07/archives/2052899.html

10-1. 大きさ1ドット（点）での衝突判定

衝突判定atari?(x, y)を作ります。座標(x, y) の色が透明（C_DEFAULT）以外なら衝突と判定します。

マウスの座標(x, y)と、壁との衝突/非衝突をターミナル（コマンドプロンプト）にtrue/falseで出力します。

• pri_12.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

def atari?(x, y)                       # 衝突判定（1ドット）
  if $screen[x,y] == C_DEFAULT
    return false
  end
  true
end

Window.loop do
  rect(  0,   0,  20, 480, C_WHITE)   # 左壁
  rect(  0,   0, 640,  20, C_WHITE)   # 上壁
  rect(620,   0,  20, 480, C_WHITE)   # 右壁

  x = Input.mouse_pos_x
  y = Input.mouse_pos_y

  p result =  atari?(x, y)            # マウスの位置と壁の衝突判定

  Window.draw(0, 0, $screen)
end

10-2. 四角形での衝突判定

四角形が、壁と衝突しているかをatari_4?で判定します。

衝突/非衝突の結果をターミナル（コマンドプロンプト）にtrue/falseで出力しつつ、四角形の色も赤/白にします。

• pri_13.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

def atari?(x, y)                       # 衝突判定（1ドット）
  if $screen[x,y] == C_DEFAULT
    return false
  end
  true
end

def atari_4?(x, y, width, height)      # 衝突判定（四角）
  atari?(x, y)         || atari?(x + width, y) ||
  atari?(x, y + width) || atari?(x + width, y + width)
end

# 四角の初期値
x = 200
y = 300
width  = 40
height = 30

Window.loop do
  rect(x, y, width, height, C_DEFAULT) # 四角の軌跡を消す

  rect(  0,   0,  20, 480, C_WHITE)    # 左壁
  rect(  0,   0, 640,  20, C_WHITE)    # 上壁
  rect(620,   0,  20, 480, C_WHITE)    # 右壁

  x = Input.mouse_pos_x
  y = Input.mouse_pos_y

  p result =  atari_4?(x, y, width, height)
  if result
    rect(x, y, width, height, C_RED)
  else
    rect(x, y, width, height, C_WHITE)
  end

  Window.draw(0, 0, $screen)
end

11. ブロック崩し：壁とバーで跳ね返る

衝突判定を使って、ボールが壁とバーで跳ね返るようにします。

• pri_14.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

def atari?(x, y)                       # 衝突判定（1ドット）
  if $screen[x,y] == C_DEFAULT
    return false
  end
  true
end

def atari_4?(x, y, width, height)      # 衝突判定（四角）
  atari?(x, y)         || atari?(x + width, y) ||
  atari?(x, y + width) || atari?(x + width, y + width)
end

# バーの初期位置
x = 300

# ボールの初期値
ball_x = 300
ball_y = 400
dx =  4
dy = -4

Window.loop do
  rect(x, 460, 100, 20, C_DEFAULT)         # バーの軌跡を消す
  rect(ball_x, ball_y, 20, 20, C_DEFAULT)  # ボールの軌跡を消す

  rect(  0,   0,  20, 480, C_WHITE)   # 左壁
  rect(  0,   0, 640,  20, C_WHITE)   # 上壁
  rect(620,   0,  20, 480, C_WHITE)   # 右壁

  x = Input.mouse_pos_x
  rect(x, 460, 100, 20, C_WHITE)      # バー

  ball_x = ball_x + dx
  if atari_4?(ball_x, ball_y, 20, 20)
    ball_x = ball_x - dx
    dx = -dx
  end

  ball_y = ball_y + dy
  if atari_4?(ball_x, ball_y, 20, 20)
    ball_y = ball_y - dy
    dy = -dy
  end

  rect(ball_x, ball_y, 20, 20, C_RED) # ボール

  Window.draw(0, 0, $screen)
end

12. ブロック崩し：ブロックを描く

ブロック群を描画します。

• pri_15.rb

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

def atari?(x, y)                       # 衝突判定（1ドット）
  if $screen[x,y] == C_DEFAULT
    return false
  end
  true
end

def atari_4?(x, y, width, height)      # 衝突判定（四角）
  atari?(x, y)         || atari?(x + width, y) ||
  atari?(x, y + width) || atari?(x + width, y + width)
end

def block(x, y, color)                 # ブロック1つ
  rect(x, y, 58, 18, color)
end

def blocks                             # ブロック群を描画する
  count_x = 0
  while count_x < 10
    count_y = 0
    while count_y < 5
      x = 21 + 60 * count_x
      y = 21 + 20 * count_y
      block(x, y, C_WHITE)
      count_y = count_y + 1
    end
  count_x = count_x + 1
  end
end

# バーの初期位置
x = 300

# ボールの初期値
ball_x = 300
ball_y = 400
dx =  4
dy = -4

Window.loop do
  rect(x, 460, 100, 20, C_DEFAULT)         # バーの軌跡を消す
  rect(ball_x, ball_y, 20, 20, C_DEFAULT)  # ボールの軌跡を消す

  rect(  0,   0,  20, 480, C_WHITE)   # 左壁
  rect(  0,   0, 640,  20, C_WHITE)   # 上壁
  rect(620,   0,  20, 480, C_WHITE)   # 右壁

  x = Input.mouse_pos_x
  rect(x, 460, 100, 20, C_WHITE)      # バー

  ball_x = ball_x + dx
  if atari_4?(ball_x, ball_y, 20, 20)
    ball_x = ball_x - dx
    dx = -dx
  end

  ball_y = ball_y + dy
  if atari_4?(ball_x, ball_y, 20, 20)
    ball_y = ball_y - dy
    dy = -dy
  end

  rect(ball_x, ball_y, 20, 20, C_RED) # ボール

  blocks                              # ブロック群

  Window.draw(0, 0, $screen)
end

13. ブロック崩し：ブロックとの衝突判定（衝突したら消す）をする（完成）

衝突したブロックの (x, y) を計算して、ブロックを消す処理を追加します。
ブロック群の初期状態（白色）を設定する処理が必要になります。

• pri_16.rb

# 基本機能だけでブロック崩し：衝突ブロックを消す（完成）

require 'dxruby'

$screen = Image.new(640, 480)

def rect(x, y, width, height, color)   # 四角を描画する
  w = 0
  while w < width
    h = 0
    while h < height
      $screen[x + w, y + h] = color
      h = h + 1
    end
    w = w + 1
  end
end

def atari?(x, y)                       # 衝突判定（1ドット）
  if $screen[x,y] == C_DEFAULT
    return false
  end
  true
end

def atari_4?(x, y, width, height)      # 衝突判定（四角）
  atari?(x, y)         || atari?(x + width, y) ||
  atari?(x, y + width) || atari?(x + width, y + width)
end

def block(x, y, color)                 # ブロック1つ
  rect(x, y, 58, 18, color)
end

def blocks                             # ブロック群を描画する
  count_x = 0
  while count_x < 10
    count_y = 0
    while count_y < 5
      x = 21 + 60 * count_x
      y = 21 + 20 * count_y
      block(x, y, $screen[x, y])       # 色は前回の色と同じにする
      count_y = count_y + 1
    end
  count_x = count_x + 1
  end
end

def vanish_block(x, y)                 # ブロックを消去する
  if (20 < x && x < 600) && (20 < y && y < 120)
    rect_x = x - (x - 21) % 60         # 衝突位置から衝突ブロックの
    rect_y = y - (y - 21) % 20         # (x, y)を計算する
    block(rect_x, rect_y, C_DEFAULT)
  end
end

def initialize_blocks                  # ブロック群の初期色を白にする
  count_x = 0
  while count_x < 10
    count_y = 0
    while count_y < 5
      x = 21 + 60 * count_x
      y = 21 + 20 * count_y
      $screen[x, y] = C_WHITE
      count_y = count_y + 1
    end
  count_x = count_x + 1
  end
end

# バーの初期位置
x = 300

# ボールの初期値
ball_x = 300
ball_y = 400
dx =  4
dy = -4

# ブロック群の初期色の設定
initialize_blocks

Window.loop do
  rect(x, 460, 100, 20, C_DEFAULT)         # バーの軌跡を消す
  rect(ball_x, ball_y, 20, 20, C_DEFAULT)  # ボールの軌跡を消す

  rect(  0,   0,  20, 480, C_WHITE)   # 左壁
  rect(  0,   0, 640,  20, C_WHITE)   # 上壁
  rect(620,   0,  20, 480, C_WHITE)   # 右壁

  x = Input.mouse_pos_x
  rect(x, 460, 100, 20, C_WHITE)      # バー

  ball_x = ball_x + dx
  if atari_4?(ball_x, ball_y, 20, 20)
    vanish_block(ball_x, ball_y)      # 衝突ブロックを消す
    ball_x = ball_x - dx
    dx = -dx
  end

  ball_y = ball_y + dy
  if atari_4?(ball_x, ball_y, 20, 20)
    vanish_block(ball_x, ball_y)      # 衝突ブロックを消す
    ball_y = ball_y - dy
    dy = -dy
  end

  rect(ball_x, ball_y, 20, 20, C_RED) # ボール

  blocks                              # ブロック群

  Window.draw(0, 0, $screen)
end

描画処理が追いつかず、ボールの移動スピードが低下してしまいました。
改良の余地があるようです。

参考

プログラミング初心者向け：DXRubyで 1ステップずつ作っていく「ブロック崩し」 - Qiita
で作った「ブロック崩し」のプログラムです。

• block28.rb

require 'dxruby'

img_bar   = Image.new(100,  20, C_WHITE)
img_hwall = Image.new( 20, 480, C_BLUE)
img_vwall = Image.new(640,  20, C_BLUE)
img_ball  = Image.new( 20,  20).circle_fill(10, 10, 10, C_RED)
img_block = Image.new( 58,  18, C_GREEN)
img_block_y = Image.new( 58,  18, C_YELLOW)

bar   = Sprite.new(  0, 460, img_bar)
lwall = Sprite.new(  0,   0, img_hwall)
rwall = Sprite.new(620,   0, img_hwall)
twall = Sprite.new(  0,   0, img_vwall)

walls = [bar, lwall, rwall, twall]

ball  =  Sprite.new(300, 400, img_ball)
dx =  2
dy = -2

def move(sprite, speed_x, speed_y)
  sprite.x += speed_x
  sprite.y += speed_y
end

blocks = []
10.times do |x|
  5.times do |y|
    blocks << Sprite.new(21 + 60 * x, 21 + 20 * y, img_block)
  end
end


Window.loop do
  bar.x = Input.mouse_pos_x
  Sprite.draw(walls)

  move(ball, dx, 0)
  if ball === walls
    ball.x -= dx
    dx = -dx
  end
  coll_x = ball.check(blocks)
  if coll_x[0]
    coll_x[0].image = img_block_y
    coll_x[0].draw     #一瞬色が変わって表示
    coll_x[0].vanish   #消える
    ball.x -= dx
    dx = -dx
  end

  move(ball, 0, dy)
  if ball === walls
    ball. y -= dy
    dy = -dy
  end
  coll_y = ball.check(blocks)
  if coll_y[0]
    coll_y[0].image = img_block_y
    coll_y[0].draw     #一瞬色が変わって表示
    coll_y[0].vanish   #消える
    ball. y -= dy
    dy = -dy
  end

  ball.draw

  Sprite.draw(blocks)
end