¿Cómo construir la aplicación del juego Spin the Bottle en Android?

En este artículo, construiremos un proyecto de juego Spin the Bottle utilizando Java y XML en Android. La aplicación se basa en un juego multijugador. Un jugador hace girar la botella y la dirección en la que gira la botella determinará el jugador seleccionado para una tarea o cualquier otra cosa. Habrá una sola actividad en esta aplicación. qué

Spin the Bottle Game Android App Sample GIF

Implementación paso a paso

Paso 1: crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: antes de ir a la sección de codificación, primero debe hacer una tarea previa

  • Agregue la imagen de la botella : vaya a la aplicación -> res -> dibujable y agregue esta imagen de la botella .
  • Modifique el archivo colors.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="green">#0F9D58</color>
</resources>

Paso 3: trabajar con el archivo activity_main.xml

Los códigos XML se utilizan para construir la estructura de la actividad, así como su parte de estilo. Contiene un TextView en la parte superior de la actividad para mostrar el título. Luego contiene un ImageView de la botella en el centro de la actividad. A continuación se muestra el código para el archivo activity_main.xml .

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/green"
    tools:context=".MainActivity">
  
    <!--to show the game title-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:fontFamily="cursive"
        android:text="GFG Spin the Bottle"
        android:textSize="40dp" />
  
    <!--image of the bottle with 
        an onClick function-->
    <ImageView
        android:id="@+id/bottle"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:onClick="spinBottle"
        android:src="@drawable/bottle" />
      
</RelativeLayout>

Paso 4: trabajar con el archivo MainActivity.java

Crearemos una función dentro del archivo Java que se llamará cuando se haga clic en la imagen de la botella. Dentro de esta función, generaremos un número aleatorio de 1-1800 que será la dirección de rotación de la imagen. Para esto, usaremos la función Random() . Crearemos un método de la función RotateAnimation que tendrá cuatro parámetros. Los parámetros son la dirección inicial, la dirección final, el pivote de rotación en la dirección X y el pivote de rotación en la dirección Y. Como queremos que la imagen gire desde el centro, haremos que el centro sea el pivote. Por lo tanto:

  • dirección inicial = 0,
  • dirección final = número generado aleatoriamente de 0 a 1800,
  • pivotX = la mitad del ancho de la imagen,
  • pivotY = la mitad de la altura de la imagen. 
  • Después de cada giro dirección inicial = dirección final. 

A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

Java

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
  
import androidx.appcompat.app.AppCompatActivity;
  
import java.util.Random;
  
public class MainActivity extends AppCompatActivity {
  
    private ImageView bot;
    private Random rand = new Random();
    private int lstDr;
    private boolean spn;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bot = findViewById(R.id.bottle);
    }
  
    // onClick function
    public void spinBottle(View v) {
        // check if the bottled has stopped spinning
        if (!spn) {
              
            // generate a random number from 1-1800
            int num = rand.nextInt(1800);
              
            // set the pivot to the centre of the image
            float pX = bot.getWidth() / 2;
            float pY = bot.getHeight() / 2;
              
            // pass parameters in RoatateAnimation function
            Animation rot = new RotateAnimation(lstDr, num, pX, pY);
              
            // set rotate duration 2500 millisecs
            rot.setDuration(2500);
              
            // rotation will persist after finishing
            rot.setFillAfter(true);
            rot.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                    spn = true;
                }
  
                @Override
                public void onAnimationEnd(Animation animation) {
                    spn = false;
                }
  
                @Override
                public void onAnimationRepeat(Animation animation) {
                }
            });
              
            // change the last direction
            lstDr = num;
              
            // start the animation
            bot.startAnimation(rot);
        }
    }
}

Producción:

Publicación traducida automáticamente

Artículo escrito por namanjha10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *