【はじめてのKotlinプログラミング(11)】インクリメント(1加算)と、デクリメント(1減算)を使った、スコアアプリを作ってみよう

AndroidStudio4.2.1

kotlinで
変数に1を加算するインクリメント、
1を減算するデクリメントを使って、
簡単なスコアアプリを作ってみたいと思います。

まあ、かっこつけてインクリメントとか横文字使ってますけど
なんのこっちゃない、ボタンを押すと1増えるというだけの話です。
マイナスを押すと、1減ると、これだけです。

プログラミングの際、スコアやカウント計算で、
何かをすると1加算、あるいは1減算というのを非常によく使います。
そういう時の特別な書き方として、変数に++とか- -、これで
1加算、あるいは1減算という意味になります。

なので、1回、簡単なアプリでも作って
数字が増えたり減ったりというのを
体験していただこうかと、こういう訳です。

 

動画

 

コード

▼activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="5 Score Game"
        android:textSize="34sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvScore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="0"
        android:textSize="70sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <Button
        android:id="@+id/btnMinus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="-"
        android:textSize="24sp"
        app:layout_constraintEnd_toStartOf="@+id/btnPlus"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvScore" />

    <Button
        android:id="@+id/btnPlus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="+"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/btnMinus"
        app:layout_constraintTop_toBottomOf="@+id/tvScore" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

▼MainActivity.kt

package com.example.fivescoreapp

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val tvScore:TextView =findViewById(R.id.tvScore)
        val btnMinus:Button =findViewById(R.id.btnMinus)
        val btnPlus:Button =findViewById(R.id.btnPlus)
        var num = 0

        //1)+ボタンを押したら、スコアが1増える
        btnPlus.setOnClickListener {
            num++

            //3)スコア(num)が5になったらGameClear
            if(num==5){
                val intent = Intent(this,GameClear::class.java)
                startActivity(intent)
            }else{
                //1)プラスしたスコアをテキストに表示
                tvScore.text = num.toString()
            }
        }

        //2)-ボタンを押したら、スコアが1減る
        btnMinus.setOnClickListener {
            num--

            //4)スコア(num)が-5になったらGameOver
            if(num==-5){
                val intent = Intent(this,GameOver::class.java)
                startActivity(intent)
            }else{
                //1)マイナスしたスコアをテキストに表示
                tvScore.text = num.toString()
            }
        }

    }
}

 

▼activity_game_clear.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFEB3B"
    tools:context=".GameClear">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GameClear"
        android:textSize="34sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

▼GameClear.kt(※変更なし)

package com.example.fivescoreapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class GameClear : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_game_clear)
    }
}

 

▼activity_game_over.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#87858A"
    tools:context=".GameOver">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GameOver"
        android:textSize="34sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

▼GameOver.kt(※変更なし)

package com.example.fivescoreapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class GameOver : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_game_over)
    }
}

テキスト

1)加算ボタン(インクリメント)

それではまずは、+ボタンをおすと、
カウントが1ずつ増えていくというのをやっていきましょう。

いつものように、こういう小さい忠告は無視していきます。
とにかく動けばOKということで、

じゃMainActivity.ktを開いてください。
まずは要素を取得していきます。
val tvScore:TextView = findViewById(R.id.tvScore)
val btnMinus:Button =findViewById(R.id.btnMinus)
val btnPlus:Button=findViewById(R.id.btnPlus)

それから変数も1つ用意しといてあげましょう。
ナンバーを略してnumとしてあげて
var num = 0

型推論で、明らかに整数だとわかるので
こちらは型推論により、型は省略可能です。

これでnumは、整数ですよと、定義されたので
今は0が入っていますけども
計算ができるようになりました。

後でnumは1とか2とか増えていく、つまり再代入されるので
valではなくてvarを使っています。

//1)+ボタンを押したら、スコアが1増える
        btnPlus.setOnClickListener {
            num++
                //tvScore.text ="" + num
                tvScore.text = num.toString()
            }
        }

はい、これでプラスボタンを押したら
numが1加算されて、
それをスコアのテキストに表示する、というのができました。

ここの””、はですね、テキストを表示させるときにはこの中に何かしら書いてあげます。
たとえば”スコアは”とかですね。

今回は何も書かないので空欄になっています。
“”がないと、それはそれで、このように変数だけだとワーニングが出るので
空欄の場合も、空っぽのまま用意してあげてください。

ただし、特に文字を連結させる必要がない場合は、
この変数をStringに変換すれば解決しますので、
tvScore.text = num.toString()
これでも解決します。

それでは、+ボタンができたので、マイナスボタンも書いてあげましょう。

 

2)減算ボタン(デクリメント)

それでは、マイナスボタンを押した時に
スコアが、1減算する処理を書いてあげましょう。

ぶっちゃけ、ここの++を–に変えるだけでOKです。

        //2)-ボタンを押したら、スコアが1減る
        btnMinus.setOnClickListener {
            num--
                tvScore.text= num.toString()
            }
        }

これで、マイナスボタンをおしたら
1減算された数字がテキストに表示されているはずです。
エミュレータを起動して確認してみましょう。

こうですね。
それでは、プラスボタンを押し続けて、
スコアつまりnumが5になったらゲームクリア画面に渡すという
条件分岐をしてあげましょう。

 

3)条件分岐(numが5の時)

スコアが5点に達した時にゲームクリア、
あるいはー5点になったらゲームオーバーになる、という処理を加えて完成させましょう。

条件分岐はif文、
それから画面を渡すのはintentを使います。

ここは過去の動画でも何度も出ていますので
ご存知の方は復習的な感じでご覧ください。

 

//3)スコア(num)が5になったらGameClear

もし、numが5になった場合は、こう、それ以外はelseに続けて、こう、と書いてあげます。
等しいっていうのは==を使います。

            if(num==5){
                val intent = Intent(this,GameClear::class.java)
                startActivity(intent)
            }else{
                //1)プラスしたスコアをテキストに表示
                //tvScore.text ="" + num
                tvScore.text = num.toString()
            }

それ以外というのは、スコアを表示させればいいので、
先ほどの記述をそっくりうつしてあげればOK。

numが5だった場合はintentでゲームクリア画面に渡してあげます。
この辺は決まり文句なので、一言一句覚えるというより、
ひな形は検索すれば出てきますから、必要なところだけ書き換えられる知識を身に着けておいてください。
今回でいうと、GameClearですね。
ここ以外は完全にテンプレートです。

てことで、これで本当にnumが5になったら次の画面にわたっているか
エミュレータを起動して確認してみましょう。

はい、ちゃんとわたっているのがわかります。
リプレイボタンは、次回の動画で解説するとして

最後、numが-5になったら、ゲームオーバー画面に渡して、今回は完成としましょう。

 

4)条件分岐(numが-5の時)

はい、それでは最後に、
スコアが-5になったときの条件分岐もしてあげましょう。

といっても、こっちとほぼ一緒です。

 

     //4)スコア(num)が-5になったらGameClear
            if(num==-5){
                val intent = Intent(this,GameOver::class.java)
                startActivity(intent)
            }else{
                //1)マイナスしたスコアをテキストに表示
                tvScore.text= num.toString()
            }

 

もしnumがー5と等しい場合は、こう
そうじゃない場合はelseに続けてこう。

で、そうじゃない場合というのはテキストに表示なので、これを入れてあげるだけ。

で、-5の場合はintentでgameoverに渡せばいいので
横着して、前回のこっちをコピーして
これを
GameOver
に変えるだけでOKです。

それでは最後、エミュレータを起動して確認してみましょう。

プラスの方はさっき確認したので
マイナスボタンを押し続けて、-5になった時に
ゲームオーバー画面に移動すれば大成功と、いうことになります。

ではやっていきましょう。

こうですね、ちゃんとゲームクリア、ゲームオーバー、それぞれに振り分けることが出来るようになりました。

以上、インクリメント、デクリメントを使った簡単なアプリの作り方でした。

次回は、リプレイボタンで、
元の画面に戻る仕方を解説します。

コメントを残す