続きをやっていきます。

円が表示できたので、円と同じようにモグラ的なもの、ここではクジラにしていますが、これを円と同じように表示します。まず、円を表示するコードは

for location in locations{
   let hole = Circle(radius: 4.0)
   hole.color = .orange
   hole.center = Point(x: location[0], y: location[1] + 5.2)
}

ですので、これを真似してクジラを表示させます。

for location in locations{

   let mole = Text(string:"🐳")
   
   mole.fontSize = 55
   
   mole.center = Point(x: location[0], y: location[1])
   
}

クジラは絵文字なので大きさをフォントサイズで指定しています。

これで円と、クジラが表示されました。これができたら、このクジラを隠して、出入りする仕組みを作ります。このシリーズの1回目で作っているのでそれを真似して作ります。

円の位置を少し上げてやりクジラは背景と同じ色で隠してやります。

for location in locations{
   let cover = Rectangle(width: 8, height: 8)
   
   cover .color = .green
   
   cover.center = Point(x: location[0], y: location[1])
}

円ですがy 座標を上に"5.6"上げてやります。

hole.center = Point(x: location[0], y: location[1] + 5.6)

実行すると、

しっかりと隠れてしまいました。

これで表示部分はできました。あとは動かせば完成に近づきます。Timer()で動かします。

まず準備をします。動かすのは、

for location in locations{
   let mole = Text(string:"🐳")
   mole.fontSize = 55
   mole.center = Point(x: location[0], y: location[1])
}

の部分ですが、変数moleは1つのものしか表せません。7つのクジラを作り上げてはいますが、このままでは1つのクジラです。この7つのクジラをそれぞれ動かしていきたいので、7つのクジラが表現できるようにします。

ここでまた配列を使います。まず、変数宣言です。変数locationsを宣言している下ぐらいに配列の変数molesを宣言します。

var moles = [Text]()

そしてfor in ループで座標を指定して配置する際にその情報を配列molesに入れていきます。

var moles = [Text]()for location in locations{
let mole = Text(string:"🐳")
mole.fontSize = 55
mole.center = Point(x: location[0], y: location[1])

moles.append(mole)
}

そしてもう一つ必要なものがあります。7つのクジラがあるのでそれぞれの動く量も必要となります。その配列宣言します。

var mVels = [Double]()

そして、移動距離の配列を(0,0)として作っておきます。

for i in 0..<locations.count{
   mVels.append(Double(0.0))
}

これで準備は整いました。Timer()を設定していきます。まず基本形です。

let timer  =  Timer.scheduledTimer(withTimeInterval: 0.05, repeats: true, block: { _ in

})

0.05秒ごとに動かしていきます。動きですが、上下させたいので、上限にきたらする動作と下限にきた時の動作をつけてやらないいといけません。

もう一つ必要なのが、上下するスピードもランダムにしたいので、乱数を仕込んでやります。

ここで"if"分を使って判定して条件により動作を決めていきます。その前に何を判定していくかが大事ですので基準を考えます。

上に行くということは今ある座標から上の座標へ移動するということなのでその差分を調べてやれば、移動距離がわかります。この移動距離で判定して、動きを反転させれば良さそうです。移動距離を示す変数"mVels"を使っていきます。

for in ループを使ってクジラを示す変数"mole"について7つの動きが出るようにしていきます。

　　var i = 0
   
   for mole in moles{
       var y = mole.center.y - locations[i][1]
       if y <= 0{
           mVels[i] = Double.random(in: 0.2 ... 0.6)
       }else if y >= 9.5{
           mVels[i] *= -1.0
       }
       moles[i].center.y += mVels[i]
       i += 1
       
   }

このループの時に配列番号を取得するために使う変数"i"をループの前に作っておきます。

そして"if"で判定するための差分のコードですが

var y = mole.center.y - locations[i][1]

としています。"i"には0から7まで数字が入りますので、今現在のmoleのy座標から元の座標を引いてやることで差分が出ます。

その差分が"0"より小さい場合(下限の場合)は

if y <= 0{
mVels[i] = Double.random(in: 0.2 ... 0.6)

として、移動距離"mVels"をランダムに決めていきます。"mVels[i] "ということなので、"i"を

 i += 1

とすることで配列の要素に入れていきます。そして

moles[i].center.y += mVels[i]

として"mVels[i]"の数値分を移動させます。"i"で配列を指定いきます。

その差分が"9.5"より大きい場合(上限の場合)は

else if y >= 9.5{
mVels[i] *= -1.0
}

そのままにしていれば上の方へ行ってしまうのでそれぞれの配列の要素"mVels[i]"に"-1"をかけてやることで反転します。

これで、自動で上下するようになりました。