使用Flutter和Back4app构建可持续游戏

介绍 在本教程中，我们将介绍如何构建一个 可持续游戏 ，使用 flutter 和 back4app 。这个游戏将教育用户环保行为，并奖励他们为环境采取积极行动。我们将利用 back4app 提供后端服务，例如跟踪用户的进度并用数字物品奖励他们。 游戏概念：生态战士 这个游戏将被称为 生态战士 , 用户将承担小的环保任务，如回收、节水和减少能源消耗。用户在完成任务时将获得积分和数字奖励。我们将重点关注： 任务记录和进度跟踪 用户记录他们采取的环保行动。 奖励系统 玩家因其贡献而获得积分和徽章。 后端集成 所有用户数据和进度将存储在 back4app 中。 先决条件 flutter开发设置 请遵循 flutter安装指南 https //flutter dev/docs/get started/install back4app账户 在 back4app https //www back4app com/ 注册一个免费账户 对flutter小部件的基本知识以及如何与后端进行交互。 步骤1：设置back4app 1 1 创建back4app项目 登录到 back4app https //www back4app com/ 并创建一个名为 ecowarriorgame 的新后端项目 创建一个 parse类 ，名为 ecoactions ，包含以下字段 用户名 (字符串) 玩家用户名 动作类型 (字符串) 动作类型 (例如，"回收利用", "节水") 积分 (数字) 为该动作授予的积分 时间戳 (日期时间) 记录该动作的时间 1 2 设置您的back4app凭据 前往您的back4app项目设置，获取您的 应用程序id 和 客户端密钥 这些将用于在flutter中初始化back4app 步骤 2：设置您的 flutter 项目 2 1 创建一个新的 flutter 项目 flutter create eco warrior cd eco warrior 2 2 添加依赖 打开 pubspec yaml 并添加以下依赖项以支持 parse sdk 和 flutter dependencies flutter sdk flutter parse server sdk flutter latest version provider ^5 0 0 # state management 运行 flutter pub get 来安装依赖项。 2 3 在 flutter 中初始化 parse sdk 在 lib/main dart , 通过添加您的 back4app 凭据来初始化 parse import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'ecowarrior game', theme themedata(primaryswatch colors green), home gamescreen(), ); } } 将 your back4app app id 和 your back4app client key 替换为您的实际 back4app 凭据。 步骤 3：游戏 ui 和功能 现在我们将构建 ecowarrior 游戏的用户界面并与 back4app 集成。 3 1 创建游戏界面 在 lib/game screen dart , 创建一个基本的游戏界面，玩家可以在其中记录环保任务并查看他们的得分。 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; class gamescreen extends statefulwidget { @override gamescreenstate createstate() => gamescreenstate(); } class gamescreenstate extends state\<gamescreen> { string? selectedaction; int score = 0; final list\<string> actions = \['recycling', 'water conservation', 'energy saving']; future\<void> logaction() async { if ( selectedaction == null) { scaffoldmessenger of(context) showsnackbar(snackbar( content text('please select an action '), )); return; } // assign points for the action int points = 0; switch ( selectedaction) { case 'recycling' points = 10; break; case 'water conservation' points = 15; break; case 'energy saving' points = 20; break; } // save action to back4app final ecoaction = parseobject('ecoactions') set('username', 'player1') // example username set('actiontype', selectedaction) set('points', points) set('timestamp', datetime now()); final response = await ecoaction save(); if (response success) { setstate(() { score += points; }); scaffoldmessenger of(context) showsnackbar(snackbar( content text('action logged! you earned $points points '), )); } else { scaffoldmessenger of(context) showsnackbar(snackbar( content text('failed to log action '), )); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('ecowarrior'), ), body padding( padding const edgeinsets all(16 0), child column( crossaxisalignment crossaxisalignment stretch, children \[ text( 'select an eco friendly action ', style textstyle(fontsize 18), ), dropdownbutton\<string>( value selectedaction, hint text('choose action'), items actions map((string action) { return dropdownmenuitem\<string>( value action, child text(action), ); }) tolist(), onchanged (string? newvalue) { setstate(() { selectedaction = newvalue; }); }, ), sizedbox(height 20), elevatedbutton( onpressed logaction, child text('log action'), ), sizedbox(height 20), text( 'current score $ score', style textstyle(fontsize 20, fontweight fontweight bold), ), ], ), ), ); } } 步骤 4：从 back4app 检索用户数据 我们将检索并显示用户记录的总分和操作。 4 1 从后端获取玩家的分数 要获取玩家的分数，我们需要从 back4app 获取他们的所有操作并计算总分。 在 lib/game screen dart , 更新 gamescreenstate 以包含获取逻辑： future\<void> fetchscore() async { final query = querybuilder\<parseobject>(parseobject('ecoactions')) whereequalto('username', 'player1'); // example username final response = await query query(); if (response success && response results != null) { int totalscore = 0; for (var result in response results!) { totalscore += result get\<int>('points')!; } setstate(() { score = totalscore; }); } } 当屏幕初始化时调用 fetchscore() ： @override void initstate() { super initstate(); fetchscore(); } 步骤 5：运行游戏 在您的设备或模拟器上运行应用程序： 玩家将从下拉菜单中选择一个动作，记录它，他们的积分将保存到 back4app 总分将从 back4app 获取并显示在屏幕上。 步骤 6：扩展游戏 您可以通过以下方式扩展 ecowarrior 游戏： 添加更多环境任务和行动。 实现一个排行榜，以显示顶级环保玩家。 为完成一定数量的任务添加成就。 结论 在本教程中，我们使用 flutter 和 back4app 构建了一个可持续的游戏。该游戏允许玩家记录环保行动，使用后端跟踪他们的进度，并用积分奖励他们。借助 flutter 丰富的 ui 框架和 back4app 可扩展的后端，您可以轻松扩展此概念，以构建更复杂和互动的可持续游戏。 有关更多信息： flutter 文档 https //flutter dev/docs back4app 文档 https //www back4app com/docs