DXRuby：「当たり判定」を自分で作ってみよう　A. 四角形の四隅の座標で判定する

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


今回の記事は、
・[DXRuby：「当たり判定」を自分で作ってみよう - Qiita](https://qiita.com/noanoa07/items/b7d647bba20116c41a77)

● 当たり（衝突）判定の方法
A. 四角形の四隅の座標で判定する
[B. 円の中心からの距離で判定する](https://qiita.com/noanoa07/items/093989a7cc9c2853c11b)
[C. 色で判定する](https://qiita.com/noanoa07/items/52eda04c7150dd3c1ea8)

の内の
`A. 四角形の四隅の座標で判定する`
になります。

<img width="50%" alt="atari_7b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/06f006d8-2f81-d2a0-ef68-fec23bb845a7.png">

次の記事
・[DXRuby：「当たり判定」を自分で作ってみよう　B. 円の中心からの距離で判定する - Qiita](https://qiita.com/noanoa07/items/093989a7cc9c2853c11b)



# 技術解説
- 使用ライブラリ
- 参考サイト
については、上記記事を参照してください。

## ソースコード
https://github.com/noanoa07/dxruby_blocks


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



# プログラム解説
## A. 四角形の四隅の座標で判定する
→ 「ブロック崩し」追加課題 1a)；衝突判定の自作（四角） - noanoa 日々の日記
http://blog.livedoor.jp/noanoa07/archives/2046179.html

### A-1a. `===`を使った準備：判定相手が単独（atari_1.rb）
DXRubyのスプライトでは、`===`を使うと、衝突の有/無で`true`/`fasle`を返します。

`ball`（小さい正方形）が、`block`（大きい長方形）と衝突しているかを`===`で判定します。
衝突/非衝突 の結果をターミナル（コマンドプロンプト）に`true`/`false`で出力しつつ、`block`の色も`赤`/`白`にします。
また、ウィンドウに衝突時は`hit!`の文字列を表示します。

```atari_1.rb
require 'dxruby'

image0 = Image.new( 50,  50, C_WHITE)
image1 = Image.new(200, 100, C_WHITE)
image2 = Image.new(200, 100, C_RED)

ball  = Sprite.new(300, 400, image0)
block = Sprite.new(200, 200, image1)

font = Font.new(32)

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

  ball.draw

  result = (ball === block)
  p result

  if result
    Window.draw_font(0, 0, "hit!", font)
    block.image = image2
  else
    block.image = image1
  end

  block.draw
end
```

<img width="50%" alt="atari_1a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/b3ecd2cc-2c30-ddeb-c99d-eb3e9eaaa72b.png">

<img width="50%" alt="atari_1b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/4d661323-c8bd-d4cb-5deb-c5be3e1fafad.png">


### A-1b. `atari?`を自作：判定相手が単独（atari_2.rb）
`atari?(jibun, aite)`を作って、 衝突の有/無で`true`/`fasle`を返すようにします。

判定方法は、互いの四角形の四隅の座標を比較することにします。

- 自分`jibun`の`x座標`は`x0`〜`xx0`、y座標は`y0`〜`yy0`

- 相手`aite`の`x座標`は`x`〜`xx`、y座標は`y`〜`yy`

2つが重なっている条件は；

- `aite`の`x座標`の範囲`x`〜`xx` の中に、`jibun` の `x0` または `xx0` があること

かつ

- `aite`の`y座標`の範囲`y`〜`yy` の中に、`jibun` の `y0` または `yy0` があること


これをコーディングすると以下のようになります。

（`&&`は`かつ`、`||`は`または`の意味）

```ruby
(x <= x0  && x0  <= xx  ||
 x <= xx0 && xx0 <= xx)
 
 &&

(y <= y0  && y0  <= yy  ||
 y <= yy0 && yy0 <= yy)
```

また、`スプライト`の画像の`幅`と`高さ`を求めるには、

`幅`；`スプライト.image.width`

`高さ`；`スプライト.image.height`

を使います。

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

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


それでは、自作した`atari?`を使って、`===`を使ったコードを書き換えてみます。

```atari_2.rb
require 'dxruby'

def atari?(jibun, aite)
  x0  = jibun.x
  xx0 = x0 + jibun.image.width

  y0  = jibun.y
  yy0 = y0 + jibun.image.height

  x   = aite.x
  xx  = x  + aite.image.width

  y   = aite.y
  yy  = y  + aite.image.height

  (x <= x0  && x0  <= xx ||
   x <= xx0 && xx0 <= xx) &&

  (y <= y0  && y0  <= yy ||
   y <= yy0 && yy0 <= yy)
end

image0 = Image.new( 50,  50, C_WHITE)
image1 = Image.new(200, 100, C_WHITE)
image2 = Image.new(200, 100, C_RED)

ball  = Sprite.new(300, 400, image0)
block = Sprite.new(200, 200, image1)

font = Font.new(32)

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

  ball.draw

  result = atari?(ball, block)
  p result

  if result
    Window.draw_font(0, 0, "hit!", font)
    block.image = image2
  else
    block.image = image1
  end

  block.draw
end
```

<img width="50%" alt="atari_2a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/4ab5e226-638b-58ca-2a33-b7a2fd841a4f.png">

<img width="50%" alt="atari_2b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/b7e68bb8-a608-0ce2-09dd-1117ce64b29a.png">


### A-2a. `===`を使った準備:判定相手が配列（atari_3.rb）
DXRubyのスプライトでは、`===`は、相手がスプライトの配列でも、衝突の有/無で`true`/`fasle`を返します。

`ball`が、スプライトの配列`blocks`と衝突しているかを`===`で判定します。
`blocks`のいずれかと衝突していたら、ターミナル（コマンドプロンプト）に`true`で出力し、それ以外は`false`を出力します。
また、ウィンドウに衝突時は`hit!`の文字列を表示します。

```atari_3.rb
require 'dxruby'

image0 = Image.new( 50,  50, C_WHITE)
image1 = Image.new(200, 100, C_WHITE)
image2 = Image.new(200, 100, C_RED)

ball   = Sprite.new(300, 400, image0)

block1 = Sprite.new( 10, 200, image1)
block2 = Sprite.new(250, 200, image1)

blocks = [block1, block2]

font = Font.new(32)

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

  ball.draw

  result = (ball === blocks)
  p result

  if result
    Window.draw_font(0, 0, "hit!", font)
  end

  Sprite.draw(blocks)
end
```

<img width="50%" alt="atari_3a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/dc07e293-dfe6-f8b9-02fc-8575e518b699.png">

<img width="50%" alt="atari_3b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/c30926be-90a3-5a6b-6f62-acbe18a044ca.png">

<img width="50%" alt="atari_3c.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/760e143d-003e-c533-af5f-11c6877d2d37.png">

<img width="50%" alt="atari_3d.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/2be839b6-8836-5b63-eb95-5efc26ad09c5.png">


### A-2b. `atari_array?`を自作:判定相手が配列（atari_4.rb）
`===`の代わりに、`atari_array?(jibun, array)`を自作します。
判定相手の配列の要素を一つずつ`atari?`で判定していきます。

自作した`atari_array?`を使って、コードを書き換えます。

```atari_4.rb
require 'dxruby'

def atari?(jibun, aite)
  x0  = jibun.x
  xx0 = x0 + jibun.image.width

  y0  = jibun.y
  yy0 = y0 + jibun.image.height

  x   = aite.x
  xx  = x  + aite.image.width

  y   = aite.y
  yy  = y  + aite.image.height

  (x <= x0  && x0  <= xx ||
   x <= xx0 && xx0 <= xx) &&

  (y <= y0  && y0  <= yy ||
   y <= yy0 && yy0 <= yy)
end

def atari_array?(jibun, array)
  array.each do |a|
    if atari?(jibun, a)
      return true
    end
  end
  false
end

image0 = Image.new( 50,  50, C_WHITE)
image1 = Image.new(200, 100, C_WHITE)
image2 = Image.new(200, 100, C_RED)

ball   = Sprite.new(300, 400, image0)

block1 = Sprite.new( 10, 200, image1)
block2 = Sprite.new(250, 200, image1)

blocks = [block1, block2]

font = Font.new(32)

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

  ball.draw

  result = atari_array?(ball, blocks)
  p result

  if result
    Window.draw_font(0, 0, "hit!", font)
  end

  Sprite.draw(blocks)
end
```

<img width="50%" alt="atari_4a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/095638f2-ce6c-071c-e80a-6dcc12fd3b2e.png">

<img width="50%" alt="atari_4b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/21640403-54d7-4068-4168-cd54d5f21a69.png">

<img width="50%" alt="atari_4c.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/9d4e524d-1d4d-a518-414d-3ce3275d50eb.png">

<img width="50%" alt="atari_4d.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/f94106a8-94d6-366b-73dc-2c4f156b93b8.png">


### A-3a. `check`を使った準備（atari_5.rb）
DXRubyの`===`や、自作した`atari_array?`では、どの相手に衝突したかは分かりませんでした。

一方、DXRubyのスプライトでは`check`を使うと、衝突している相手すべてを配列に入れて返します。（衝突していない時は、何も入ってない配列を返す）

この配列を`array`とすると、0番目の`array.first`（`array[0]`でも同じ）が最初に衝突した相手です。また、`array.first`に何か入っていれば衝突している、`空（nil）`ならば衝突していないという、当たり判定にも使えます。

→ 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

プログラムでは、`ball`が`blocks`のどれに最初に衝突しているかを `check.first`で判定します。
最初に衝突しているブロックをターミナル（コマンドプロンプト）に出力し、そのブロックを赤色にします。それ以外は`nil`を出力します。
また、ウィンドウに衝突時は`hit!`の文字列を表示します。

```atari_5.rb
require 'dxruby'

image0 = Image.new( 50,  50, C_WHITE)
image1 = Image.new(200, 100, C_WHITE)
image2 = Image.new(200, 100, C_RED)

ball   = Sprite.new(300, 400, image0)

block1 = Sprite.new( 10, 200, image1)
block2 = Sprite.new(250, 200, image1)

blocks = [block1, block2]

font = Font.new(32)

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

  ball.draw

  col = ball.check(blocks).first
  p col

  if col
    Window.draw_font(0, 0, "hit!", font)
    col.image = image2
    Sprite.draw(blocks)
    col.image = image1
  else
    Sprite.draw(blocks)
  end
end
```

<img width="50%" alt="atari_5a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/a992b231-727f-31c5-4cda-bb4ac32e9a54.png">

<img width="50%" alt="atari_5b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/a3f942a9-bcaf-b0ec-9268-9fd8caa859af.png">

<img width="50%" alt="atari_5c.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/e4bc51a1-788b-18a8-a4f4-15d208b465da.png">

<img width="50%" alt="atari_5d.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/26a5bf74-2602-271d-5907-cf8d089e88f1.png">


### A-3b. `atari_array`を自作（atari_6.rb）
ぶつかった相手は最初のものだけ分かればよいので、DXRubyの`check.first`相当の`atari_array`を自作します。

つまり、`atari_array`は、衝突していないと`nil`を返し、衝突すると "`ぶつかった最初のもの`" を返します。

方法は、判定相手の配列の要素を一つずつ`atari?`で判定していき、最初に衝突している要素を返します。

自作した`atari_array`を使って、コードを書き換えます。

```atari_6.rb
require 'dxruby'

def atari?(jibun, aite)
  x0  = jibun.x
  xx0 = x0 + jibun.image.width

  y0  = jibun.y
  yy0 = y0 + jibun.image.height

  x   = aite.x
  xx  = x  + aite.image.width

  y   = aite.y
  yy  = y  + aite.image.height

  (x <= x0  && x0  <= xx ||
   x <= xx0 && xx0 <= xx) &&

  (y <= y0  && y0  <= yy ||
   y <= yy0 && yy0 <= yy)
end

def atari_array(jibun, array)
  array.each do |a|
    if atari?(jibun, a)
      return a
    end
  end
  nil
end

image0 = Image.new( 50,  50, C_WHITE)
image1 = Image.new(200, 100, C_WHITE)
image2 = Image.new(200, 100, C_RED)

ball   = Sprite.new(300, 400, image0)

block1 = Sprite.new( 10, 200, image1)
block2 = Sprite.new(250, 200, image1)

blocks = [block1, block2]

font = Font.new(32)

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

  ball.draw

  col = atari_array(ball, blocks)
  p col

  if col
    Window.draw_font(0, 0, "hit!", font)
    col.image = image2
    Sprite.draw(blocks)
    col.image = image1
  else
    Sprite.draw(blocks)
  end
end
```

<img width="50%" alt="atari_6a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/f9e07f66-78c4-722f-501c-6a881b56363b.png">

<img width="50%" alt="atari_6b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/5917453b-f080-de6b-362a-d01494b02c0e.png">

<img width="50%" alt="atari_6c.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/dfc81991-9876-adb6-ef47-e50ee961cfb8.png">

<img width="50%" alt=atari_6d.png"" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/2c28b926-7c12-35e4-0f9d-f5d2afbd0aa0.png">


### A-4. 自作の当たり判定（四角）を`Spriteクラスのメソッド`にする（atari_7.rb）
元の`===`と`check`は、`Sprite`クラスのメソッド（命令）なので、書き方としては、`ball.check(blocks)`のようになります。

自作の`atari_array`も同じような書き方になるように、`Sprite`クラスのメソッドにしてみます。

`クラス`や`メソッド`についての説明はここでは説明を省きますので、詳しくはRubyのテキストを見てください。

クラスメソッドを追加する方法は簡単で、以下のようにします。

```ruby
class Sprite
  def 追加したいメソッド
    #追加したいメソッドの内容
  end
end
```


`Sprite`クラスに`atari?`と`atari_array`追加します。

ちなみに、`jibun`（自分）に相当するものは、`self`と書きます。

```ruby
class Sprite
  def atari?(aite)
    x0  = self.x
    xx0 = x0 + self.image.width

    y0  = self.y
    yy0 = y0 + self.image.height

    x   = aite.x
    xx  = x  + aite.image.width

    y   = aite.y
    yy  = y  + aite.image.height

    (x <= x0  && x0  <= xx ||
     x <= xx0 && xx0 <= xx) &&

    (y <= y0  && y0  <= yy ||
     y <= yy0 && yy0 <= yy)
  end

  def atari_array(array)
    array.each do |a|
      if self.atari?(a)
        return a
      end
    end
    nil
  end
end
```

これで、クラスメソッドになったので、今までの`atari_array(ball, blocks)`という書き方ではなく、`ball.atari_array(blocks)`というように書くことができるようになりました。

```atari_7.rb
require 'dxruby'

class Sprite
  def atari?(aite)
    x0  = self.x
    xx0 = x0 + self.image.width

    y0  = self.y
    yy0 = y0 + self.image.height

    x   = aite.x
    xx  = x  + aite.image.width

    y   = aite.y
    yy  = y  + aite.image.height

    (x <= x0  && x0  <= xx ||
     x <= xx0 && xx0 <= xx) &&

    (y <= y0  && y0  <= yy ||
     y <= yy0 && yy0 <= yy)
  end

  def atari_array(array)
    array.each do |a|
      if self.atari?(a)
        return a
      end
    end
    nil
  end
end

image0 = Image.new( 50,  50, C_WHITE)
image1 = Image.new(200, 100, C_WHITE)
image2 = Image.new(200, 100, C_RED)

ball   = Sprite.new(300, 400, image0)

block1 = Sprite.new( 10, 200, image1)
block2 = Sprite.new(250, 200, image1)

blocks = [block1, block2]

font = Font.new(32)

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

  ball.draw

  col = ball.atari_array(blocks)
  p col

  if col
    Window.draw_font(0, 0, "hit!", font)
    col.image = image2
    Sprite.draw(blocks)
    col.image = image1
  else
    Sprite.draw(blocks)
  end
end
```

<img width="50%" alt="atari_7a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/97b12a3b-1f50-0a9a-1fad-d6b5975db4a6.png">

<img width="50%" alt="atari_7b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/06f006d8-2f81-d2a0-ef68-fec23bb845a7.png">

<img width="50%" alt="atari_7c.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/d2480abe-5a65-71ea-fd59-ef121a8c14e9.png">

<img width="50%" alt="atari_7d.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/d9522d02-633f-d57e-ab6b-44663f275e5b.png">


### A-5. 自作の当たり判定（四角）を使ったブロック崩し（atari_8.rb）
「ブロック崩し」のプログラム`block28.rb`を、自作の`atari_array`に書き換えてみましょう。

元の`===`と`check.first`を同じ動きをしているのがわかると思います。

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

```atari_8.rb
require 'dxruby'

class Sprite
  def atari?(aite)
    x0  = self.x
    xx0 = x0 + self.image.width

    y0  = self.y
    yy0 = y0 + self.image.height

    x   = aite.x
    xx  = x  + aite.image.width

    y   = aite.y
    yy  = y  + aite.image.height

    (x <= x0  && x0  <= xx ||
     x <= xx0 && xx0 <= xx) &&

    (y <= y0  && y0  <= yy ||
     y <= yy0 && yy0 <= yy)
  end

  def atari_array(array)
    array.each do |a|
      if self.atari?(a)
        return a
      end
    end
    nil
  end
end

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.atari_array(walls)
    ball.x -= dx
    dx = -dx
  end
  coll_x = ball.atari_array(blocks)
  if coll_x
    coll_x.image = img_block_y
    coll_x.draw     #一瞬色が変わって表示
    coll_x.vanish   #消える
    ball.x -= dx
    dx = -dx
  end

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

  ball.draw

  Sprite.draw(blocks)
end
```

<img width="50%" alt="atari_8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/bd4ff184-4eb6-599d-320f-d8884c3054e1.png">



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

```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
```

<img width="50%" alt="block28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/c5de26a4-2112-311b-f8ff-301b7332d7bd.png">