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

AndroidStudio4.2.1

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

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

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

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

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

        //２）-ボタンを押したら、スコアが１減る
        btnMinus.setOnClickListener {
            num--

            //４）スコア（num）が-５になったらGameOver
            if(num==-5){
                val intent = Intent(this,GameOver::class.java)
                startActivity(intent)
            }else{
                //１）マイナスしたスコアをテキストに表示
                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)
    }
}

テキスト

１）加算ボタン（インクリメント）

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

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

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

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

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

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

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

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

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

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

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

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

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

 

２）減算ボタン（デクリメント）

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

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

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

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

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

 

３）条件分岐（numが５の時）

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

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

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

 

//３）スコア（num）が５になったらGameClear

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

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

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

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

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

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

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

 

４）条件分岐（numが-５の時）

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

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

 

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

 

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

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

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

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

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

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

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

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

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