【開發(fā)者說】開發(fā)案例分享：萬能卡片也能用來玩游戲

【開發(fā)者說】欄目是為HarmonyOS開發(fā)者提供的展示和分享平臺(tái)，在這里，大家可以發(fā)表自己的技術(shù)洞察和見解，也可以展示自己的開發(fā)心得和成果。

歡迎大家積極投稿，后臺(tái)回復(fù)【投稿】，即可獲得投稿渠道。期待你們的分享~

一

前言

作為一名開發(fā)愛好者，從大了講，我學(xué)習(xí)并進(jìn)行HarmonyOS相關(guān)開發(fā)是為了能為鴻蒙生態(tài)建設(shè)盡一份綿薄之力，從小了講，就是為了自己的興趣。而萬能卡片是一個(gè)讓我非常感興趣的東西。

很多時(shí)候我跟別人解釋什么是萬能卡片，都會(huì)這么說："萬能卡片能實(shí)現(xiàn)讓你在不用打開app的前提下，在桌面上就能使用到相關(guān)服務(wù)"。有一天，我的朋友跟我說，既然可以體驗(yàn)到各種服務(wù)，那么能直接在桌面上玩游戲嗎？

通過對(duì)萬能卡片相關(guān)文檔的閱讀，我認(rèn)為想要實(shí)現(xiàn)一些簡(jiǎn)單的游戲應(yīng)該沒有問題，思考再三，我決定做一個(gè)井字棋小游戲，希望能給各位開發(fā)者提供些開發(fā)思路。

實(shí)現(xiàn)效果如下：

二

基本知識(shí)

想要學(xué)習(xí)這個(gè)項(xiàng)目的開發(fā)，首先我們要掌握以下幾個(gè)知識(shí)：

1. HUAWEI DevEco Studio是開發(fā)工具，是華為基于IDEA開源版本打造的開發(fā)平臺(tái)，支持頁(yè)面預(yù)覽、多端模擬等功能；

2. ArkTS是目前主推的開發(fā)語言，簡(jiǎn)潔的語法規(guī)則極大的減少了學(xué)習(xí)成本；

三

項(xiàng)目創(chuàng)建

1. 建立項(xiàng)目

選擇"Atomic Service"即建立一個(gè)元服務(wù)項(xiàng)目，點(diǎn)擊"Next"。

2. 項(xiàng)目目錄

3. 預(yù)覽器

展開Previewer，預(yù)覽器中可以查看頁(yè)面效果，其中Default尺寸與大部分手機(jī)的實(shí)際效果是相同的?？梢苑奖愕牟榭醋约旱腢I代碼寫出來是什么效果，也可以測(cè)試交互代碼，非常方便。

四

項(xiàng)目開發(fā)

以下操作均是在WidgetCard.ets中完成：

1. 繪制棋盤

棋盤的繪制分為三個(gè)部分：

首先是背景圖，直接在Column()上進(jìn)行設(shè)置背景，代碼為：

.backgroundImage($r('app.media.back'))
.backgroundImageSize(ImageSize.Cover)

(左右滑動(dòng)查看更多)

（1）自定義組件

這里的"gezi"就是一個(gè)自定義組件，傳入idx，num這兩個(gè)參數(shù)，再綁定上一個(gè)click事件。

（2）循環(huán)渲染

這里需要在棋盤里顯示9個(gè)"gezi"組件，最簡(jiǎn)單的辦法是寫上9遍基本同樣的代碼，但是這樣既不便于維護(hù)，也不美觀，因此可以使用循環(huán)渲染的方法。

Flex({wrap:FlexWrap.Wrap}){
  ForEach(this.qipan,(item,idx)=>{
    gezi({
      idx:idx,
      num:item,
      click:()=>{
        if(!this.canplay)return;
        let n = this.qipan[idx];
        if(n > 0)return;
        this.qipan[idx] = this.shunxv;
        this.shunxv = this.shunxv == 1 ? 2 : 1;
        //檢查
        this._Check();
      }
    })
  })
}.width(35*3)
.height(35*3)

(左右滑動(dòng)查看更多)

然后創(chuàng)建下方的兩個(gè)小圖標(biāo)，"刷新"用來重置棋盤，而"信息"用來點(diǎn)擊進(jìn)入小游戲的說明頁(yè)。這里對(duì)于頁(yè)面的跳轉(zhuǎn)，使用的是postCardAction方法。

最后再繪制一個(gè)結(jié)果顯示頁(yè)面，使用條件渲染來控制是否顯示，由于需要覆蓋整個(gè)頁(yè)面，因此采用了position+zindex的寫法。

if(this.resshow){
  //這里繪制一個(gè)結(jié)果提示頁(yè)面
  Column(){
    Text(this.res).fontSize(20).fontColor('white')
  }
  .backgroundColor('rgba(0,0,0,0.3)')
  .height('100%')
  .width('100%')
  .position({x:0,y:0})
  .zIndex(1)
  .alignItems(HorizontalAlign.Center)
  .justifyContent(FlexAlign.Center)
  .onClick(()=>{
    this._Init();
  })
}

(左右滑動(dòng)查看更多)

最后效果如下：

2. 項(xiàng)目邏輯

井字棋的基本原理非常簡(jiǎn)單，就是在橫、豎或者斜線上，同一類棋子排成三個(gè)即為勝利，而且整體只有9個(gè)格子，所以我們可以直接創(chuàng)建一個(gè)一維數(shù)組代表棋盤：

@State qipan : Array<number> =
  [0,0,0,
   0,0,0,
0,0,0]

(左右滑動(dòng)查看更多)

0代表這個(gè)格子沒有落子，1代表是"X"，2代表是"O"，當(dāng)玩家每次落子后，這個(gè)數(shù)組中相應(yīng)的數(shù)字就會(huì)改變，同時(shí)渲染棋盤。

作為一個(gè)簡(jiǎn)單的小游戲，其勝利的情況是有限的幾種，可以直接將其羅列出來：

constwin=[[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];

(左右滑動(dòng)查看更多)

簡(jiǎn)單解釋一下，比如第一個(gè)[0,1,2]，指的就是，當(dāng)棋盤數(shù)組的第0位、第1位和第2位，這三個(gè)數(shù)字相同時(shí)，說明有一個(gè)玩家勝出了。

五

總結(jié)

萬能卡片的潛力實(shí)際上是非常巨大的，目前市面上我發(fā)現(xiàn)大部分的卡片主要用來進(jìn)行信息的展示，還需要在"交互"或者"可玩性"上繼續(xù)挖掘，希望這篇文章能給大家?guī)硪稽c(diǎn)啟發(fā)，期待出現(xiàn)更多好玩的萬能卡片。

更多推薦

點(diǎn)擊下方圖片鏈接，查看更多欄目?jī)?nèi)容