Ruby用2Dゲームライブラリ DXRuby：使い方の初歩

# 概要
この記事は中学高校生向けプログラミング教室の教材として作ったものを一部改変したものです。
Rubyでプログラミングの初歩を学んだ次のステップとして、ゲームライブラリDXRubyの使い方を学んでいきます。

<img width="50%" alt="dx22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/f93d501b-3313-ce92-0e33-db9d42a6e78d.png">

続編
・ [プログラミング初心者向け：DXRubyで 1ステップずつ作っていく「ブロック崩し」 - Qiita](https://qiita.com/noanoa07/items/9ebc059550c620ab223c)



# 技術解説
## ソースコード
https://github.com/noanoa07/dxruby_blocks


## 使用ライブラリ
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

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

- DXRubyで 0から作る「ブロック崩し」 - noanoa 日々の日記
http://blog.livedoor.jp/noanoa07/archives/2045851.html

　このテキストのブログ記事での解説です。

- ブラウザではじめるRubyゲームプログラミング：Nyle-canvas（DXRubyスタイル）入門 -Qiita
https://qiita.com/noanoa07/items/e7ebf97edef4ae9b448a

　Nyle-canvas（DXRubyスタイル）で書き直した記事です。


## ライセンス
本解説文および解説内のソースコードはともにパブリックドメイン
（DXRuby本体のソースコードは、zlib/libpngライセンス）



# プログラム解説
## 1． DXRubyの練習
DXRubyの基本の使い方を練習します。

使い方を学んだ後は、「ブロック崩し」を作っていくのを目標にしています。

### 1-1． DXRubyのウィンドウを出す（dx01.rb）
DXRubyの基本の形です。
大きさを指定しないと、横640、縦480のウィンドウが開きます（左上の座標が(0, 0)）。

`Window.loop do 〜 end` の間に書いたコードは、1秒間に60回繰り返し実行されます。

→ DXRubyリファレンス：チュートリアル 1. 基本の形
http://mirichi.github.io/dxruby-doc/tutorial/basic.html

```dx01.rb
require 'dxruby'

Window.loop do

end
```

<img width="50%" alt="dx01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/69264806-af27-53f3-2fcd-b1b83c04e6d4.png">


### 1-2． ウィンドウの大きさを変える（dx02.rb）
ウィンドウの大きさを変えるには、`Window.width  =`、`Window.height =`を使います。

プログラムの内、最初の1回だけ実行されて以後変える必要のないものは、`Window.loop do 〜 end` より前に書いておきます。

→ DXRubyリファレンス：API INDEX；module Window
http://mirichi.github.io/dxruby-doc/api/Window.html

```dx02.rb
require 'dxruby'

Window.width  = 400
Window.height = 300

Window.loop do

end
```

<img width="50%" alt="dx02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/1db3030b-174f-8fc1-3414-4dbd1783e4bb.png">


### 1-3． ウィンドウの背景の色を変える（dx03.rb）
ウィンドウの背景の色を変えるには、`Window.bgcolor =`を使います。

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

を見てください。

→ DXRubyリファレンス：API INDEX；module Window
http://mirichi.github.io/dxruby-doc/api/Window.html

```dx03.rb
require 'dxruby'

Window.bgcolor = C_CYAN

Window.loop do

end
```

<img width="50%" alt="dx03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/60924c56-721b-da6e-609c-2dfa1ef34d59.png">


### 1-4． タイトルを表示する；文字（dx04.rb）
ウィンドウの左上にタイトルを表示するには、`Window.caption =`を使います。

→ DXRubyリファレンス：API INDEX；module Window
http://mirichi.github.io/dxruby-doc/api/Window.html

```dx04.rb
require 'dxruby'

Window.caption = "ブロック崩し"

Window.loop do

end
```

<img width="50%" alt="dx04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/a4be1f9e-6d18-477c-788c-d6dc1865a281.png">


### 1-5． 画面に文字を出す（dx05.rb）

画面に文字を出すには、

`font = Font.new(文字サイズ)` で文字サイズ（とフォント名）を指定しておいて、

`Window.draw_font(x位置, y位置, "文字列", フォント, {:color => 色})`

で表示します。

→ DXRubyリファレンス：チュートリアル 9. 文字の描画
http://mirichi.github.io/dxruby-doc/tutorial/basic.html

→ DXRubyリファレンス：API INDEX；Font.new

http://mirichi.github.io/dxruby-doc/api/Font_new.html

```dx05.rb
require 'dxruby'

font = Font.new(32)

Window.loop do
  Window.draw_font(200, 100, "ブロック崩し", font, {:color => C_GREEN})
end
```

<img width="50%" alt="dx05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/7cb7be3b-ae87-6a5a-1f45-2086c1485edd.png">


### 1-6． キー入力をとらえる（dx06.rb）
キー入力は`Input.key_down?(キーコード定数)`を使います。

キーコード定数については、「DXリファレンス：キーコード定数」
http://mirichi.github.io/dxruby-doc/api/constant_keycode.html

を見てください。

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

```dx06.rb
require 'dxruby'

font = Font.new(32)

Window.loop do
  Window.draw_font(200, 100, "ESCキーで終了します", font, {:color => C_GREEN})

  if Input.key_down?(K_ESCAPE)
    exit                 # exit でプログラムを終了する
  end
end
```

<img width="50%" alt="dx06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/5912ef27-fc8c-c952-2ca4-2d60be179c3d.png">


### 1-7． ウィンドウを切り替える（dx07.rb）
DXRuby 1.4.2 から、`Window.loop do 〜 end` が複数置けるようになったので、`break`でループを抜けると次の`Window.loop do 〜 end`が始まり、別のウィンドウを表示できます。

→ Window.loopを複数置く - mirichiの日記 2014-11-24
https://mirichi.hatenadiary.org/entry/20141124/p1

```dx07.rb
require 'dxruby'

font = Font.new(32)

Window.loop do
  Window.draw_font(200, 100, "Nキーで次の画面へ", font, {:color => C_WHITE})

  if Input.key_down?(K_N)
    break                # breakで loopを抜ける
  end
end


Window.loop do
  Window.draw_font(200, 100, "ブロック崩し", font, {:color => C_GREEN})

  Window.draw_font(200, 150, "（ESCキーで終了）", font, {:color => C_RED})

  if Input.key_down?(K_ESCAPE)
    exit                 # exit でプログラムを終了する
  end
end
```

<img width="50%" alt="dx07a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/09b7db66-d681-e4e2-40d3-14b81d2cccbb.png">

<img width="50%" alt="dx07b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/7283ed35-78c5-a8e4-58be-7a8dc950a74b.png">


### 1-8． 画像の読み込み（dx08.rb）
画像ファイルの読み込みは、`Image.load(画像ファイル)`を使います。対応するファイル形式は、`jpg`、`png`、`bmp`です。

読み込んだ画像はイメージになります。

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

→ DXRubyリファレンス：API　INDEX；Image.load
http://mirichi.github.io/dxruby-doc/api/Image_load.html

```dx08.rb
require 'dxruby'

image = Image.load('../image/apple.png')

Window.loop do
  Window.draw(100, 100, image)
end
```

<img width="50%" alt="dx08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/76f6df50-66b2-38f9-f574-848487e071f4.png">


### 1-9． 画像の背景色の透明化（dx09.rb）
イメージで`set_color_key(色)`を使うと、指定した色を透明にできます。

→ DXRubyリファレンス：Image；set_color_key
http://mirichi.github.io/dxruby-doc/api/Image_23set_color_key.html

```dx09.rb
require 'dxruby'

image = Image.load('../image/apple.png')
image.set_color_key(C_WHITE)

Window.loop do
  Window.draw(100, 100, image)
end
```

<img width="50%" alt="dx09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/9e5c18af-4180-cbff-4ab5-3648f5faed91.png">


### 1-10． 画像の拡大・縮小（dx10.rb）
イメージを拡大・縮小して表示したい時は、`Window.draw_scale(x位置, y位置, イメージ, 横の拡大率, 縦の拡大率)`を使います。

→ DXRubyリファレンス：API INDEX；Image；Window.draw_scale
http://mirichi.github.io/dxruby-doc/api/Window_draw_scale.html

```dx10.rb
require 'dxruby'

image = Image.load('../image/apple.png')
image.set_color_key(C_WHITE)

Window.loop do
  Window.draw_scale(100, 100, image, 0.2, 0.2)
end
```

<img width="50%" alt="dx10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/f58114ba-6c9d-f8c5-bbe9-6c8e15f74883.png">


### 1-11． トウフを表示（イメージで表示）（dx11.rb）
画像は元の画像ファイルがなくても、作ることもできます。`Image.new(横幅, 縦幅, 色)` で、四角形の`イメージ`を作ります。
（白い四角形の見た目で`豆腐（トウフ）`）

表示するには、`Window.draw(x位置, y位置, イメージ)`を使います。位置の基準はイメージの左上になります。

→ DXRubyリファレンス：API INDEX；class Image
http://mirichi.github.io/dxruby-doc/api/Image.html

→ DXRubyリファレンス：API INDEX；Window.draw
http://mirichi.github.io/dxruby-doc/api/Window_draw.html

```dx11.rb
require 'dxruby'

img_tohu = Image.new(100, 100, C_WHITE)

Window.loop do
  Window.draw(200, 200, img_tohu)
end
```

<img width="50%" alt="dx11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/a5f3604e-dbad-d7a9-417a-b130dcdaeb99.png">


### 1-12． トウフを表示（スプライトで表示）（dx12.rb）
DXRubyには画像を扱うのに、もう一つ`スプライト`というクラスがあります。`スプライト`は、`x位置`、`y位置`のデータを自分で持ち、描画メソッドも独自に持っており、衝突判定もできるのが特徴です。そのため、「ブロック崩し」では`スプライト`を主に使います。

`スプライト`は、`Sprite.new(x位置, y位置, イメージ)`
で作ります。（イメージはあらかじめ作っておきます。）

表示させるのは、`draw`です。

→ DXRubyリファレンス：Spriteを使うためのチュートリアル
http://mirichi.github.io/dxruby-doc/tutorial/sprite.html

→ DXRubyリファレンス：API INDEX；class Sprite
http://mirichi.github.io/dxruby-doc/api/Sprite.html

```dx12.rb
require 'dxruby'

img_tohu = Image.new(100, 100, C_WHITE)

tohu = Sprite.new(200, 200, img_tohu)

Window.loop do
  tohu.draw
end
```

<img width="50%" alt="dx12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/1f6336fc-c905-5469-710f-6f3c5ef12df1.png">


### 1-13． トウフの中に赤丸を描く（dx13.rb）
丸を描くには、イメージに`circle_fill(中心のx位置, 中心のy位置, 半径, 色)`を使います。中心の位置の座標は、（ウィンドウの位置ではなく）そのイメージの左上が(0, 0)になります。

→ DXRubyリファレンス：API INDEX；Image#circle_fill
http://mirichi.github.io/dxruby-doc/api/Image_23circle_fill.html

```dx13.rb
require 'dxruby'

img_tohu = Image.new(100, 100, C_WHITE).circle_fill(50, 50, 50, C_RED)

tohu = Sprite.new(200, 200, img_tohu)

Window.loop do
  tohu.draw
end
```

<img width="50%" alt="dx13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/eda57815-05f1-2777-eebb-f71a53356c82.png">


### 1-14． 赤丸だけにする（dx14.rb）
`Image.new(横幅, 縦幅, 色)`で`色`の指定を省略すると、透明色が指定されたことになり、見えなくなります。

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

```dx14.rb
require 'dxruby'

img_ball = Image.new(100, 100).circle_fill(50, 50, 50, C_RED)

ball = Sprite.new(200, 200, img_ball)

Window.loop do
  ball.draw
end
```

<img width="50%" alt="dx14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/95e5907a-e617-970a-8399-7ffa10bcfc9d.png">


### 1-15． カーソルキーで移動（dx15.rb）
カーソルキーが押されると、左右方向は`Input.x`、上下方向は`Input.y`が `-1`, `0`, `1` に変化します。

これを利用することで、画面上を移動させることができます。

→ DXRuby 1.4.1 リファレンス：Inputモジュール
http://dxruby.osdn.jp/DXRubyReference/200953184011156.htm

```dx15.rb
require 'dxruby'

img_ball = Image.new(100, 100).circle_fill(50, 50, 50, C_RED)

ball = Sprite.new(0, 0, img_ball)
ball.x = 200
ball.y = 200

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

  ball.draw
end
```

<img width="50%" alt="dx15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/b0855848-f6d0-93f5-4ee7-2b94fa305c19.png">


### 1-16． カーソルキーで移動（別の書き方）（dx16.rb）
`ball.x = ball.x + Input.x` を別の書き方である、

`ball.x += Input.x` に書き換えてみます。同じ意味ですが、こちらの方が文字数が少なくて済むので、間違いが減らせるかも。


```dx16.rb
require 'dxruby'

img_ball = Image.new(100, 100).circle_fill(50, 50, 50, C_RED)

ball = Sprite.new(0, 0, img_ball)
ball.x = 200
ball.y = 200

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

  ball.draw
end
```

<img width="50%" alt="dx16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/32eef256-e458-4304-2599-f3f92606ab9e.png">


### 1-17． マウスに合わせて移動（dx17.rb）
マウスのx座標、y座標はそれぞれ`mouse_pos_x`、`mouse_pos_y`で取得できます。
（DXRuby 1.4.2 からは、`mouse_x`、`mouse_y`という書き方もできます。）

→ DXRubyリファレンス：API INDEX；module Input
http://mirichi.github.io/dxruby-doc/api/Input.html

→ DXRubyリファレンス：API INDEX；Input.mouse_pos_x
http://mirichi.github.io/dxruby-doc/api/Input_23mouse_pos_x.html

```dx17.rb
require 'dxruby'

img_ball = Image.new(100, 100).circle_fill(50, 50, 50, C_RED)

ball = Sprite.new(0, 0, img_ball)

Window.loop do
  ball.x = Input.mouse_pos_x
  ball.y = Input.mouse_pos_y

  ball.draw
end
```

<img width="50%" alt="dx17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/0d8c9805-c3d0-7d40-b2fd-124e34d2956f.png">


### 1-18． 画像を切り替える（dx18.rb）

スプライトの画像イメージは、`スプライト.image =` で変更できます。

ここでは、x位置が300を超えるかどうかで、画像が変わるようにしています。

→ DXRubyリファレンス：API INDEX；Sprite.image =
http://mirichi.github.io/dxruby-doc/api/Sprite_23image_3D.html

```dx18.rb
require 'dxruby'

img_ball = Image.new(100, 100).circle_fill(50, 50, 50, C_RED)
img_tohu = Image.new(100, 100, C_WHITE)

ball  = Sprite.new(0, 0, img_ball)

Window.loop do
  ball.x = Input.mouse_pos_x
  ball.y = Input.mouse_pos_y

  if ball.x > 300
    ball.image = img_ball
  else
    ball.image = img_tohu
  end

  ball.draw
end
```

<img width="50%" alt="dx18a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/0c7ecd39-c8f5-5ca4-19c2-f6727185d627.png">

<img width="50%" alt="dx18b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/c93c642f-42f3-bf1d-27ae-84db44655d4a.png">


### 1-19． 2つの画像を表示する（dx19.rb）

ひとつの画像は位置が固定で、もうひとつはマウスに追従します。

```dx19.rb
require 'dxruby'

img_ball  = Image.new(100, 100).circle_fill(50, 50, 50, C_RED)
img_tohu = Image.new(100, 100, C_WHITE)

ball  = Sprite.new(0, 0, img_ball)
tohu  = Sprite.new(100, 100, img_tohu)

Window.loop do
  ball.x = Input.mouse_pos_x
  ball.y = Input.mouse_pos_y

  ball.draw
  tohu.draw
end
```

<img width="50%" alt="dx19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/286e42c0-ba2c-cba4-f666-b38921eb73f2.png">


### 1-20． 画像をまとめて表示する（dx20.rb）
複数のスプライトを配列にまとめると、ひとつの命令`Sprite.draw`で表示させることができます。

ここでは、スプライト`ball`とスプライト`tohu`を配列`imgs`にまとめて、`Sprite.draw(imgs)`で一気に表示させています。

→ DXRubyリファレンス：Spriteを使うためのチュートリアル
http://mirichi.github.io/dxruby-doc/tutorial/sprite.html

→ DXRubyリファレンス：API INDEX；Sprite.draw
http://mirichi.github.io/dxruby-doc/api/Sprite_draw.html

```dx20.rb
require 'dxruby'

img_ball  = Image.new(100, 100).circle_fill(50, 50, 50, C_RED)
img_tohu = Image.new(100, 100, C_WHITE)

ball  = Sprite.new(0, 0, img_ball)
tohu  = Sprite.new(100, 100, img_tohu)

imgs = [ball, tohu]

Window.loop do
  ball.x = Input.mouse_pos_x
  ball.y = Input.mouse_pos_y

  Sprite.draw(imgs)
end
```

<img width="50%" alt="dx20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/a069af7d-f393-0e3b-1180-d8f7a07a2b82.png">


### 1-21． 衝突判定1；===（dx21.rb）
スプライトは衝突したかを判定する`===`があります。
`衝突している`／`していない` を`true`／`false`で返します。

→ DXRubyリファレンス：Spriteを使うためのチュートリアル；衝突判定
http://mirichi.github.io/dxruby-doc/tutorial/sprite.html

→ DXRubyリファレンス：API INDEX；Sprite；===
http://mirichi.github.io/dxruby-doc/api/Sprite_23_3D_3D_3D.html

```dx21.rb
require 'dxruby'

img_ball  = Image.new(100, 100).circle_fill(50, 50, 50, C_RED)
img_tohu = Image.new(100, 100, C_WHITE)

ball  = Sprite.new(0, 0, img_ball)
tohu  = Sprite.new(100, 100, img_tohu)

imgs = [ball, tohu]

font = Font.new(24)

Window.loop do
  ball.x = Input.mouse_pos_x
  ball.y = Input.mouse_pos_y

  if ball === tohu
    Window.draw_font(200, 300, "衝突！", font)
  end

  Sprite.draw(imgs)
end
```

<img width="50%" alt="dx21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/098867da-4e72-02aa-d28f-08b1c58833b4.png">


### 1-22． 衝突判定2；check（dx22.rb）
スプライトの衝突判定`===`では、衝突の有無は分かりますが、衝突した相手は分かりません。そんな時は、`check`を使います。`check`は衝突している相手を配列で返します。

配列を`coll`とすると（`collision`：衝突）、0番目の`coll[0]`に何か入っていれば衝突してるし、`空`ならば衝突していないという、衝突判定にも使えます。

→ DXRubyリファレンス：Spriteを使うためのチュートリアル；衝突したオブジェクトを取得する
http://mirichi.github.io/dxruby-doc/tutorial/sprite.html

→ DXRubyリファレンス：API INDEX；Sprite；check
http://mirichi.github.io/dxruby-doc/api/Sprite_23check.html

```dx22.rb
require 'dxruby'

img_ball  = Image.new(100, 100).circle_fill(50, 50, 50, C_RED)
img_tohu   = Image.new(100, 100, C_WHITE)
img_tohu_r = Image.new(100, 100, C_RED)


ball   = Sprite.new(  0,   0, img_ball)
tohu1  = Sprite.new(150, 150, img_tohu)
tohu2  = Sprite.new(300, 150, img_tohu)
tohu3  = Sprite.new(300, 300, img_tohu)

blocks = [tohu1, tohu2, tohu3]

font = Font.new(24)

Window.loop do
  ball.x = Input.mouse_pos_x
  ball.y = Input.mouse_pos_y

  coll = ball.check(blocks)
  if coll[0]
    coll[0].image = img_tohu_r
  end

  Window.draw_font(200, 10, "#{blocks.size}個中、#{coll.size}個 衝突！", font)

  Sprite.draw(blocks)
  ball.draw
end
```

<img width="50%" alt="dx22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/f93d501b-3313-ce92-0e33-db9d42a6e78d.png">


### 1-23． 衝突判定3；check後に、vanish, clean（dx23.rb）
`vanish`は、`check`で衝突していると判定されたスプライトを無効化します。無効化されたスプライトは描画されません。ただし、無効化されただけで、そのスプライトは削除された訳ではありません。

衝突したスプライトを削除したい時は、`Sprite.clean(配列)`を使います。これは、配列内のスプライトで無効化されているものを配列から削除します。まだ衝突していないスプライトの数を知りたい時などに使えます。

→ DXRubyリファレンス：Spriteを使うためのチュートリアル；ライフサイクルを管理する
http://mirichi.github.io/dxruby-doc/tutorial/sprite.htmlSpriteの

→ DXRubyリファレンス：API INDEX；Sprite；vanish
http://mirichi.github.io/dxruby-doc/api/Sprite_23vanish.html

→ DXRubyリファレンス：API INDEX；Sprite.clean
http://mirichi.github.io/dxruby-doc/api/Sprite_clean.html

```dx23.rb
require 'dxruby'

img_ball  = Image.new(100, 100).circle_fill(50, 50, 50, C_RED)
img_tohu   = Image.new(100, 100, C_WHITE)


ball   = Sprite.new(  0,   0, img_ball)
tohu1  = Sprite.new(150, 150, img_tohu)
tohu2  = Sprite.new(300, 150, img_tohu)
tohu3  = Sprite.new(300, 300, img_tohu)

blocks = [tohu1, tohu2, tohu3]

font = Font.new(24)

Window.loop do
  ball.x = Input.mouse_pos_x
  ball.y = Input.mouse_pos_y

  coll = ball.check(blocks)
  if coll[0]
    coll[0].vanish
  end

  Sprite.clean(blocks)

  Window.draw_font(200, 10, "#{blocks.size}個中、#{coll.size}個 衝突！", font)

  Sprite.draw(blocks)
  ball.draw
end
```

<img width="50%" alt="dx23a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/03a6a87c-93cc-b118-2dc7-b4ccead4b983.png">

<img width="50%" alt="dx23b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/9981da39-4e5d-2855-e2e4-e0e78ae36517.png">

<img width="50%" alt="dx23c.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/d7f748ed-3139-d162-6d89-584ee8ff2ab6.png">


これで、DXRubyの練習は終わりです。
次は、「ブロック崩し」を作っていきます。

→ ・[プログラミング初心者向け：DXRubyで 1ステップずつ作っていく「ブロック崩し」 - Qiita](https://qiita.com/noanoa07/items/9ebc059550c620ab223c)