loading...

Creating a Brain-Mining Mini Game Bot on Telegram

#webdev#javascript#api#vue

Introduction

In the world of Telegram bots, creativity knows no bounds. Recently, I developed another mini app on Telegram called "Memory Game: Brain Mining Edition." Yes, you read that right – I'm mining brains! 🧠😄 This game challenges your memory skills in a fun and engaging way.

Game Mechanics

The game is simple yet addictive. It consists of a grid of cards, each hiding a symbol. Your task is to flip over pairs of cards to find matching symbols. Each successful match earns you points, represented by 🧠 emojis. The more pairs you match, the higher your score climbs.

Technical Implementation

Here's a brief overview of how the game works under the hood:

Frontend (Vue.js)

The frontend of the game is built using Vue.js. Here's a snippet from my App.vue file:

<template>
    <div class="container">
      <h1>Memory Game: Brain Mining Edition</h1>
      <h2 class="username">king_triton</h2>
      <h3 class="score">{{ totalScore }} 🧠</h3>
      <div class="memory-board">
        <MemoryCard
          v-for="card in cards"
          :key="card.id"
          :card="card"
          :isFlipped="flippedCards.includes(card) || card.matched"
          @flip-card="handleFlipCard"
        />
      </div>
    </div>
  </template>
  
Enter fullscreen mode Exit fullscreen mode
<script>
  import MemoryCard from './components/MemoryCard.vue';
  
  export default {
    name: 'App',
    components: {
      MemoryCard,
    },
    data() {
      return {
        cards: this.generateCards(),
        flippedCards: [],
        totalScore: 0,
        userId: null,
      };
    },
    methods: {
      // Methods for card flipping, matching, game reset, and score saving
    },
    mounted() {
      // Initialization and user data handling
    },
  };
  </script>
  
Enter fullscreen mode Exit fullscreen mode

Backend (Telegram API)

The game interacts with the Telegram API for user authentication and cloud storage for saving scores. Here's a snippet showing how scores are saved:

// Example of score saving function
  saveScore() {
    if (this.userId) {
      const tg = window.Telegram.WebApp;
      tg.CloudStorage.setItem(`score_${this.userId}`, this.totalScore.toString(), (error, success) => {
        if (error) {
          console.error('Error saving score:', error);
        } else {
          console.log('Score saved successfully:', success);
        }
      });
    }
  },
  
Enter fullscreen mode Exit fullscreen mode

Play the Game!

You can experience the Brain Mining game firsthand by clicking here. Challenge your memory skills and compete for the top score!