สร้างเกมที่ยั่งยืนโดยใช้ Flutter และ Back4app

บทนำ ในบทเรียนนี้ เราจะพาท่านไปเรียนรู้วิธีการสร้าง เกมที่ยั่งยืน โดยใช้ flutter และ back4app เกมนี้จะช่วยให้ผู้ใช้เรียนรู้เกี่ยวกับพฤติกรรมที่เป็นมิตรต่อสิ่งแวดล้อมและให้รางวัลแก่พวกเขาสำหรับการกระทำเชิงบวกต่อสิ่งแวดล้อม เราจะใช้ back4app สำหรับบริการด้านหลัง เช่น การติดตามความก้าวหน้าของผู้ใช้และให้รางวัลพวกเขาด้วยไอเทมดิจิทัล แนวคิดเกม ecowarrior เกมนี้จะมีชื่อว่า ecowarrior , ซึ่งผู้ใช้จะทำภารกิจเล็ก ๆ ด้านสิ่งแวดล้อม เช่น การรีไซเคิล การประหยัดน้ำ และการลดการใช้พลังงาน ผู้ใช้จะได้รับคะแนนและรางวัลดิจิทัลเมื่อพวกเขาทำภารกิจสำเร็จ เราจะมุ่งเน้นไปที่ การบันทึกภารกิจและการติดตามความก้าวหน้า ผู้ใช้บันทึกการกระทำที่เป็นมิตรต่อสิ่งแวดล้อมที่พวกเขาทำ ระบบรางวัล ผู้เล่นจะได้รับคะแนนและเหรียญตราสำหรับการมีส่วนร่วมของพวกเขา การรวมระบบหลังบ้าน ข้อมูลผู้ใช้และความก้าวหน้าทั้งหมดจะถูกเก็บไว้ใน back4app ข้อกำหนดเบื้องต้น การตั้งค่า flutter development ทำตาม คู่มือการติดตั้ง 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 โดยมีฟิลด์ดังต่อไปนี้ ชื่อผู้ใช้ (string) ชื่อผู้ใช้ของผู้เล่น ประเภทการกระทำ (string) ประเภทของการกระทำ (เช่น "การรีไซเคิล", "การอนุรักษ์น้ำ") คะแนน (number) คะแนนที่ได้รับสำหรับการกระทำ เวลา (datetime) เวลาที่การกระทำถูกบันทึก 1 2 ตั้งค่าข้อมูลประจำตัว back4app ของคุณ ไปที่การตั้งค่าโปรเจกต์ back4app ของคุณและรับ application id และ client key สิ่งเหล่านี้จะถูกใช้ในการเริ่มต้น back4app ใน flutter ขั้นตอนที่ 2 การตั้งค่าโปรเจกต์ flutter ของคุณ 2 1 สร้างโปรเจกต์ flutter ใหม่ flutter create eco warrior cd eco warrior 2 2 เพิ่ม dependencies เปิด pubspec yaml และเพิ่ม dependencies ต่อไปนี้สำหรับ parse sdk และ flutter dependencies flutter sdk flutter parse server sdk flutter latest version provider ^5 0 0 # state management รัน flutter pub get เพื่อติดตั้ง dependencies 2 3 เริ่มต้น parse sdk ใน flutter ใน lib/main dart , เริ่มต้น parse โดยการเพิ่มข้อมูลประจำตัว back4app ของคุณ 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 และฟังก์ชันการทำงานของเกม ตอนนี้เราจะสร้าง ui ของเกม ecowarrior และรวมเข้ากับ back4app 3 1 สร้าง gamescreen ใน 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 ดึงคะแนนของผู้เล่นจาก backend ในการรับคะแนนของผู้เล่น เราจำเป็นต้องดึงการกระทำทั้งหมดของพวกเขาจาก 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 โดย เพิ่มงานและการกระทำด้านสิ่งแวดล้อมมากขึ้น implementing a leaderboard to show the top eco friendly players เพิ่มความสำเร็จสำหรับการทำงานให้เสร็จจำนวนหนึ่ง บทสรุป ในบทเรียนนี้ เราได้สร้างเกมที่ยั่งยืนโดยใช้ flutter และ back4app เกมนี้อนุญาตให้ผู้เล่นบันทึกการกระทำที่เป็นมิตรต่อสิ่งแวดล้อม ติดตามความก้าวหน้าของพวกเขาผ่านทางแบ็คเอนด์ และให้รางวัลพวกเขาด้วยคะแนน ด้วยเฟรมเวิร์ก ui ที่หลากหลายของ flutter และแบ็คเอนด์ที่สามารถขยายได้ของ back4app คุณสามารถขยายแนวคิดนี้เพื่อสร้างเกมที่ยั่งยืนที่ซับซ้อนและโต้ตอบได้มากขึ้น สำหรับข้อมูลเพิ่มเติม เอกสาร flutter https //flutter dev/docs เอกสาร back4app https //www back4app com/docs