色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

基于HarmonyOS的黑白翻棋手機版本

電子發燒友開源社區 ? 來源:HarmonyOS官方合作社區 ? 作者:木棉花_潘穎琳 ? 2021-10-13 09:38 ? 次閱讀

前言
之前發過兩篇黑白翻棋游戲的手表版本,這次給大家帶來的小分享是黑白翻棋的手機版本,也是JS寫的,功能代碼基本一致(采用第二篇的算法),只是布局會作相應修改。

概述

該游戲會隨機生成一個題目,最終當棋盤上的方格都為白色的時候游戲成功,效果如下

正文


1.創建一個空白的工程
DevEco Studio下載安裝成功后,打開DevEco Studio,點擊左上角的File,點擊New,再選擇New Project,選擇Empty Ability,然后點擊Next,給項目命名PhoneGame_BW,選擇設備類型Phone,選擇語言類型JS最后點擊Finish。

2.界面布局


2.1 代碼刪除的部分

先在entry>src>main>js>default>pages.index>index.hml文件里把以下代碼刪掉

class="title">    {{ $t('strings.hello') }} {{ title }}  

entry>src>main>js>default>pages.index>index.js文件里把以下代碼刪掉

title:" "  onInit() {    this.title = this.$t('strings.world');  }

entry>src>main>js>default>pages.index>index.css文件里把container部分以下的代碼刪掉

2.2 棋盤設置
這里以畫布組件canvas來描繪棋盤

index.hml

class="canvas" ref="canvas"> 

index.css

.canvas{  width:320px;  height:320px;  background-color: #BBADA0;}

打開模擬器

2.3 棋子設置
棋子是通過canvas組件的方法來繪制填充多個正方形,這里我設置的棋盤是7x7的,每個方格的邊長SIDELEN為40,方格間的間距MARGIN為5,以一個數組來表示每個方格,并初始化賦值為0,用0表示白色,1代表黑色,這樣我們就能定義一個用0和1表示鍵,顏色表示值的字典COLORS

index.js,在export default上方添加以下代碼

var grids=[[0, 0, 0, 0, 0, 0, 0],      [0, 0, 0, 0, 0, 0, 0],      [0, 0, 0, 0, 0, 0, 0],      [0, 0, 0, 0, 0, 0, 0],      [0, 0, 0, 0, 0, 0, 0],      [0, 0, 0, 0, 0, 0, 0],      [0, 0, 0, 0, 0, 0, 0],      [0, 0, 0, 0, 0, 0, 0]];var context;const SIDELEN=40;const MARGIN=5;
const COLORS = {  "0": "#FFFFFF",  "1": "#000000"}

在export default下方添加以下代碼,遍歷數組grids的每一個元素,將其轉換成String型,對應的是COLORS中的顏色,然后調用畫布組件中的方法fillRect填充方格的顏色,參數為方格的左上角的坐標及方格的長寬

  drawGrids(){    context=this.$refs.canvas.getContext('2d');    for (let row = 0 ;row < 7 ;row++){      for (let column = 0; column < 7;column++){        let gridStr = grids[row][column].toString();
        context.fillStyle = COLORS[gridStr];        let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;        let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;        context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);      }    }  },

最后在drawGrids函數上方添加以下代碼調用drawGrids

onShow(){    this.drawGrids();  },

打開模擬器,就能有如下效果

3.游戲規則的設置

3.1.獲取點擊位置的坐標并對應方格

給畫布組件添加點擊事件onclick和觸摸事件touchstart

index.hml

    class="canvas" ref="canvas" onclick="click" @touchstart='touchstartfunc'> 

事件touchstart,在手指剛觸摸屏幕時就觸發該事件,其參數為TouchEvent,其對象屬性touches包含屏幕觸摸點的信息數組,而我們需要的坐標信息就包含在這個數組里;這里我們需要獲取到的坐標是相對于組件左上角的,即localX和localY,這樣也方便我們設置點擊范圍來觸發色塊的翻轉(獲取坐標這塊詳細可看我上一篇文章)其次,參數a和b分別代表傳遞的方格的行列值。

index.js

var localx;var localy;var a;var b;
touchstartfunc(msg) {    localx=msg.touches[0].localX;    localy=msg.touches[0].localY;  },getgrid() {  if (MARGIN < localx && localx < (MARGIN + SIDELEN)) {    b = 0;  }  if (1 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 2 * (MARGIN + SIDELEN)) {    b = 1;  }  if (2 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 3 * (MARGIN + SIDELEN)) {    b = 2;  }  if (3 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 4 * (MARGIN + SIDELEN)) {    b = 3;  }  if (4 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 5 * (MARGIN + SIDELEN)) {    b = 4;  }  if (5 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 6 * (MARGIN + SIDELEN)) {    b = 5;  }  if (6 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 7 * (MARGIN + SIDELEN)) {    b = 6;  }  if (MARGIN < localy && localy < (MARGIN + SIDELEN)) {    a = 0;  }  if (1 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 2 * (MARGIN + SIDELEN)) {    a = 1;  }  if (2 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 3 * (MARGIN + SIDELEN)) {    a = 2;  }  if (3 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 4 * (MARGIN + SIDELEN)) {    a = 3;  }  if (4 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 5 * (MARGIN + SIDELEN)) {    a = 4;  }  if (5 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 6 * (MARGIN + SIDELEN)) {    a = 5;  }  if (6 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 7 * (MARGIN + SIDELEN)) {    a = 6;  }}

3.2 點擊的方格及其上下左右都變色

change控制變色,若值為0則變為1,若為1則變為0。方格的橫縱坐標都是0~6,changeOneGrids第一個判斷是被點擊的方格的變色,第二個判斷是右邊的格子是否在棋盤上,假如被點擊的格子是右邊界,則判斷為假,右格子不會變色。以此類推對左格,上格,下格作判斷,最后調用drawGrids繪制方格。

index.js

change(x,y){       if(grids[x][y] == 0){       grids[x][y] = 1;     }else{       grids[x][y] = 0;     }   },changeOneGrids(x,y){   if(x>-1 && y>-1 && x<7 && y<7){     this.change(x,y);   }   if(x+1>-1 && y>-1 && x+1<7 && y<7){     this.change(x+1,y);   }   if(x-1>-1 && y>-1 && x-1<7 && y<7){     this.change(x-1,y);   }   if(x>-1 && y+1>-1 && x<7 && y+1<7){     this.change(x,y+1);   }   if(x>-1 && y-1>-1 && x<7 && y-1<7){     this.change(x,y-1);   }   this.drawGrids();}

最后在點擊事件上調用getgrid和changeOneGrids

click(){   this.getgrid();   this.changeOneGrids(a,b); }

到此,效果如下

3.3 生成隨機打亂的棋盤(游戲題目)

先將數組以坐標形式存儲在array,共49組坐標,然后隨機生成0~48的整數,取該組坐標中第一個元素作為橫坐標,第二個元素作為縱坐標,這里設置的是隨機生成點擊10下后的題目(后期為在此基礎上以不同次數來設置不同難度)

initGrids(){    let array = [];    for (let row = 0; row < 7; row++) {      for (let column = 0; column < 7; column++) {        if (grids[row][column] == 0) {          array.push([row, column])                       }      }    }    for (let i = 0; i < 10; i++){      let randomIndex = Math.floor(Math.random() * array.length);        let row = array[randomIndex][0];                     let column = array[randomIndex][1];                    this.changeOneGrids(row,column);    }  }

然后在onshow上調用initGrids,注意initGrids要放在drawGrids之前

  onShow(){    this.initGrids();    this.drawGrids();  },

4.設置步數顯示及游戲的重新開始

4.1 步數顯示
步數這個文本組件顯示在棋盤上方,故在index.hml文件里,將以下代碼放在canvas上方,其中由于步數是個變量,故以currentSteps的值的變動來動態更新步數

index.hml

class="steps">    當前步數:{{currentSteps}}  

index.css

.steps {  font-size: 21px;  text-align:center;  width:200px;  height:39px;  letter-spacing:0px;  margin-top:10px;  background-color: #BBAD20;}

由于initGrids會隨機點擊10下,為了使步數清零,在data里給它賦初值-10

index.js

data: {    currentSteps:-10,  },

在changeOneGrids上添加以下代碼,使每次點擊步數加一

this.currentSteps+=1;

4.2 游戲的重新開始
重新開始的按鈕在棋盤的下方,故index.hml文件中在canvas下方添加代碼

"button" value="重新開始" class="bit" onclick="restartGame"/>

index.css

.bit {  top: 20px;  width: 220px;  height: 40px;  background-color: #AD9D8F;  font-size: 25px;  margin-top: 10px;}

游戲重新開始時,會再次隨機生成游戲題目,并且步數重置為0

index.js

  restartGame(){    this.initGrids();    this.drawGrids();    this.currentSteps = 0;  }

5.游戲成功的設置

游戲成功的彈窗是顯示在棋盤(canvas)上方的,該實現可通過添加一個堆疊容器stack,將游戲成功的文本組件放在畫布組件之后;其次,“游戲成功”的顯示在初始時不會顯示,所以要設置屬性show,對應設一個布爾型變量isShow,并令isShow的初始值為假,游戲成功時其值為真,當為真時就可以顯示了

index.hml

  class="stack">    class="canvas" ref="canvas" onclick="click" @touchstart='touchstartfunc'>     
class="subcontainer" show="{{isShow}}"> class="gameover"> 游戲成功

index.css

.stack{  width: 320px;  height: 320px;  margin-top: 10px;}
.subcontainer{  left: 50px;  top: 95px;  width: 220px;  height: 130px;  justify-content: center;  align-content: center;  background-color: #E9C2A6;}
.gameover{  font-size: 38px;  color:black;  justify-content: center;  margin-top: 30px;}

index.js

data: {    currentSteps:-10,    isShow:false  },
  gameover(){    for (let row = 0 ;row < 7 ;row++){      for (let column = 0; column < 7;column++){        if (grids[row][column]==1){          return false;        }      }    }    return true;  },

在changeOneGrids中給“步數增加”添加判斷條件

if(this.isShow==false){      this.currentSteps+=1;    }    if(this.gameover()){      this.isShow=true;    }

在restartGame中添加代碼

 this.isShow = false;

恭喜你!!完成以上步驟后你就可以開始玩啦!!O(∩_∩)O

結語

以上就是我這次的小分享啦??!后續會有該游戲的進階版,我會不斷完善的(? ?_?)?
責任編輯:haq


聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 操作系統
    +關注

    關注

    37

    文章

    6848

    瀏覽量

    123428
  • 鴻蒙系統
    +關注

    關注

    183

    文章

    2636

    瀏覽量

    66443
  • HarmonyOS
    +關注

    關注

    79

    文章

    1979

    瀏覽量

    30280

原文標題:基于HarmonyOS的手機游戲——黑白翻棋

文章出處:【微信號:HarmonyOS_Community,微信公眾號:電子發燒友開源社區】歡迎添加關注!文章轉載請注明出處。

收藏 人收藏

    評論

    相關推薦

    HarmonyOS開發指導類文檔更新速遞(下)

    伴隨著HarmonyOS 5.0.0 Release、HarmonyOS 5.0.1 Release版本的發布,HarmonyOS官網文檔也帶來了不少上新內容。本期
    的頭像 發表于 12-30 09:54 ?108次閱讀
    <b class='flag-5'>HarmonyOS</b>開發指導類文檔更新速遞(下)

    HarmonyOS開發指導類文檔更新速遞(上)

    伴隨著HarmonyOS 5.0.0 Release版本的發布,HarmonyOS官網文檔也帶來了不少上新內容。本期HarmonyOS NEXT開發者資料直通車將從文檔更新角度為開發者
    的頭像 發表于 12-30 09:50 ?99次閱讀
    <b class='flag-5'>HarmonyOS</b>開發指導類文檔更新速遞(上)

    HarmonyOS Next元服務蒹葭動卡體驗互動

    各位大佬,純血鴻蒙HarmonyOS NEX手機、平板,應用市場搜索“蒹葭動卡”即可體驗,打開留言即可發表你的文學觀點,謝謝互動。 您也可以通過以下方式,打開“蒹葭動卡”互動。
    發表于 11-26 10:31

    【「HarmonyOS NEXT啟程:零基礎構建純血鴻蒙應用」閱讀體驗】+1-7章有感

    的支持,對此我建議大家一定要注意真機環境與手機系統版本IDE,SDK版本必須要一致。 然后在第2章講解了ArkTS語言,上來就說明了ArkTS語言與JavaScript的關系,這也是我說
    發表于 11-24 19:27

    AWTK 最新動態:支持鴻蒙系統(HarmonyOS Next)

    導讀HarmonyOS是全球第三大移動操作系統,有巨大的市場潛力,在國產替代的背景下,機會多多,AWTK支持HarmonyOS,讓AWTK開發者也能享受HarmonyOS生態的紅利。AWTK全稱
    的頭像 發表于 11-06 08:03 ?270次閱讀
    AWTK 最新動態:支持鴻蒙系統(<b class='flag-5'>HarmonyOS</b> Next)

    華為“純血”鴻蒙系統 HarmonyOS NEXT 將于9月底推出正式版

    HarmonyOS NEXT 將于今年 9 月底推出正式版本。 “從發布第一個版本到今年的 9 月份,這個(9 月)月底我們會正式發布 HarmonyOS NEXT,這一
    的頭像 發表于 09-14 14:27 ?1197次閱讀

    板液位計怎么用磁鐵校正

    板液位計是一種常用的液位測量裝置,它利用磁鐵和磁板的相互作用來實現液位的測量。在使用過程中,有時需要對磁板液位計進行磁鐵校正,以確保測量的準確性。以下是關于磁板液位計磁鐵校正
    的頭像 發表于 07-31 09:40 ?973次閱讀

    華為HarmonyOS NEXT鴻蒙星河版正式開啟Beta計劃

    在剛剛落幕的華為開發者大會(HDC 2024)盛會上,華為震撼宣布HarmonyOS NEXT鴻蒙星河版正式邁入Beta測試階段,并預告其商用版本將于今年第四季度璀璨登場,預示著今年10月,搭載全新鴻蒙星河系統的華為手機即將與消
    的頭像 發表于 07-15 15:59 ?908次閱讀

    帶你快速認識 HarmonyOS

    國產操作系統HarmonyOS(鴻蒙操作系統)開始進入到大眾的視野。鴻蒙寓意為“萬物起源”,發展至今已經經過了好幾個迭代版本。1.1.1.早期鴻蒙雛形LiteOS2015年5月20日,華為大會上
    的頭像 發表于 07-06 08:04 ?1256次閱讀
    帶你快速認識 <b class='flag-5'>HarmonyOS</b>

    HUAWEI Pura 70系列搭載HarmonyOS 4.2,玩轉小藝AI智慧體驗!

    也有顯著增強。首款搭載HarmonyOS 4.2的產品——HUAWEI Pura 70系列手機上市以來,深受消費者喜愛。 ? ? 其中H
    的頭像 發表于 05-16 17:49 ?521次閱讀

    HarmonyOS開發案例:【首選項】

    基于HarmonyOS的首選項能力實現的一個簡單示例。
    的頭像 發表于 04-19 16:20 ?1277次閱讀
    <b class='flag-5'>HarmonyOS</b>開發案例:【首選項】

    2024款鴻蒙OS 最新HarmonyOS Next_HarmonyOS4.0系列教程分享

    鴻蒙的出現,標志著中國科技的崛起。HarmonyOS就是我們說的華為鴻蒙系統,截止到2023年8月4日已有超過7億臺設備搭載了鴻蒙OS系統。據多家媒體報道,2024年國內有21所985大學都開設
    發表于 02-28 10:29

    PS-2205ST-M系列折屏手機扭力測試儀:原理、作用及應用

    PS-2205ST-M系列折屏手機扭力測試儀:原理、作用及應用?|深圳磐石測控儀器
    的頭像 發表于 02-27 09:12 ?422次閱讀
    PS-2205ST-M系列<b class='flag-5'>翻</b>折屏<b class='flag-5'>手機</b>扭力測試儀:原理、作用及應用

    蘋果上架近500元龍年手機殼 蘋果Vision Pro加價3倍

    蘋果上架近500元龍年手機殼 蘋果Vision Pro加價3倍 蘋果手機最近大事是什么?那就莫過于蘋果開售iphone15龍年款手機殼;蘋果也真的敢開價,一個
    的頭像 發表于 01-22 17:56 ?509次閱讀
    蘋果上架近500元龍年<b class='flag-5'>手機</b>殼 蘋果Vision Pro加價<b class='flag-5'>翻</b>3倍

    harmonyos和安卓的區別

    卓的比較分析。 一、架構設計: HarmonyOS采用了分布式架構設計,可以應用于多種終端設備,從手機到智能家居、汽車等,實現設備之間的協同工作和資源共享。而安卓主要是面向手機和平板等消費電子設備設計的操作系統。 在架構設計上,
    的頭像 發表于 01-10 17:55 ?3715次閱讀
    主站蜘蛛池模板: 欧美黑白配性xxxxx| tobu中国日本高清| 美女叉腿掰阴大胆艺术照| 穿着丝袜被男生强行啪啪| 亚洲无遮挡| 色综合久久天天影视网| 久久永久视频| 国产人妻麻豆蜜桃色精| avtt天堂网Av无码| 艳照门在线观看| 无码AV精品一区二区三区| 女人和男人插曲视频大全| 久99视频精品免费观看福利| 国产成人h在线视频| caoporon超碰在线视频| 夜色爽爽爽久久精品日韩| 婷婷久久无码欧美人妻| 欧美性情一线免费http| 久色乳综合思思在线视频| 国产亚洲精品久久综合阿香蕉| 成人国产精品日本在线| 5g天天奭视频| 伊人免费在线| 亚洲欧美一区二区成人片| 四房播播最新地址| 青青草AV国产精品| 蜜柚在线观看免费高清官网视频| 精品手机在线视频| 国内久经典AAAAA片| 国产精品视频在线自在线| 俄罗斯12x13x处| 超碰 无码 中文字幕| NANANA在线观看高清影院| 99久久精品国产国产毛片| 91精品欧美一区二区三区| 中文字幕高清在线中文字幕| 一区二区三区国产亚洲网站| 亚洲色图在线播放| 亚洲无遮挡无码A片在线| 亚洲男人天堂2018av| 亚洲欧美国产综合在线|