日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
手表游戲—黑白翻棋 之 學(xué)習(xí)筆記（前篇）

想了解更多內(nèi)容，請訪問：

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.

前言

去年我們木棉花組織發(fā)過一篇文章“HarmonyOS手表游戲——黑白翻棋”，本文是我對該文章的一個學(xué)習(xí)筆記，隨著IDE的升級，一些代碼也需要作修改。以下是我的學(xué)習(xí)筆記及部分代碼的修改O(∩_∩)O

源代碼請移步至→原文章地址

概述

正文內(nèi)容只展示部分代碼，完整代碼可以下載附件(附件1是源代碼的代碼更新)。效果圖如下：

正文

1.創(chuàng)建一個空白的工程

DevEco Studio下載安裝成功后，打開DevEco Studio，點擊左上角的File，點擊New，再選擇New Project，選擇Empty Ability(JS),然后點擊Next,給項目命名WatchGame_BW，選擇設(shè)備類型Wearable，最后點擊Finish。

2.界面布局

通過效果圖可見，初始布局分三個部分，由上至下分別是文本框、棋盤(畫布組件)、按鈕;游戲成功的布局有四個部分：文本框、棋盤(畫布組件)、游戲成功界面、按鈕。(完整代碼及解釋可以去看原文章)

這里記幾個小要點：

1.當(dāng)前步數(shù)顯示的是一個動態(tài)的值，不是一個固定的值，這里以動態(tài)變量currentSteps來顯示數(shù)據(jù)

2.游戲成功的文本框是顯示在畫布組件之上的(覆蓋)，而不是在畫布組件的下方。該實現(xiàn)可通過添加一個堆疊容器stack，將游戲成功的文本組件放在畫布組件之后

3.“游戲成功”的顯示在初始時不會顯示，所以要設(shè)置屬性show,對應(yīng)設(shè)一個布爾型變量isShow，并令isShow的初始值為假，游戲成功時其值為真，當(dāng)為真時就可以顯示了

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.         當(dāng)前步數(shù)：{{currentSteps}} 
    4.   
  
  
  
  4.      
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.          
    7.   
  
  
  
  7.              
    8.   
  
  
  
  8.                  
    9.   
  
  
  
  9.                     游戲成功 
    10.   
  
  
  
  10.                  
    11.   
  
  
  
  11.             
 
  •      
  •      
  •  

    相應(yīng)的組件大小顏色等屬性設(shè)置在entry>src>main>js>default>pages.index>index.css文件里通過class設(shè)定的名稱來去設(shè)置，代碼如下：

     
 
 
 
        
  
  
  
    1. .container { 
      2.   
  
  
  
    2.     flex-direction: column; 
      3.   
  
  
  
    3.     justify-content: center; 
      4.   
  
  
  
    4.     align-items: center; 
      5.   
  
  
  
    5.     width:240px; 
      6.   
  
  
  
    6.     height:240px; 
      7.   
  
  
  
    7. } 
      8.   
  
  
  
    8. .steps { 
      9.   
  
  
  
    9.     font-size: 10px; 
      10.   
  
  
  
    10.     text-align:center; 
      11.   
  
  
  
    11.     width:100px; 
      12.   
  
  
  
    12.     height:18px; 
      13.   
  
  
  
    13.     letter-spacing:0px; 
      14.   
  
  
  
    14.     margin-top:5px; 
      15.   
  
  
  
    15. } 
      16.   
  
  
  
    16. .canvas{ 
      17.   
  
  
  
    17.     width:160px; 
      18.   
  
  
  
    18.     height:160px; 
      19.   
  
  
  
    19.     background-color: #BBADA0; 
      20.   
  
  
  
    20. } 
      21.   
  
  
  
    21. .bit { 
      22.   
  
  
  
    22.     width: 75px; 
      23.   
  
  
  
    23.     height: 15px; 
      24.   
  
  
  
    24.     background-color: #AD9D8F; 
      25.   
  
  
  
    25.     font-size: 10px; 
      26.   
  
  
  
    26.     margin-top: 5px; 
      27.   
  
  
  
    27. } 
      28.   
  
  
  
    28.  
      29.   
  
  
  
    29. .stack{ 
      30.   
  
  
  
    30.     width: 160px; 
      31.   
  
  
  
    31.     height: 160px; 
      32.   
  
  
  
    32.     margin-top: 5px; 
      33.   
  
  
  
    33. } 
      34.   
  
  
  
    34.  
      35.   
  
  
  
    35. .subcontainer{ 
      36.   
  
  
  
    36.     left: 25px; 
      37.   
  
  
  
    37.     top: 47.5px; 
      38.   
  
  
  
    38.     width: 110px; 
      39.   
  
  
  
    39.     height: 65px; 
      40.   
  
  
  
    40.     justify-content: center; 
      41.   
  
  
  
    41.     align-content: center; 
      42.   
  
  
  
    42.     background-color: #E9C2A6; 
      43.   
  
  
  
    43. } 
      44.   
  
  
  
    44.  
      45.   
  
  
  
    45. .gameover{ 
      46.   
  
  
  
    46.     font-size: 19px; 
      47.   
  
  
  
    47.     color:black; 
      48.   
  
  
  
    48. } 
      49.

    代碼更新部分：組件大小的數(shù)據(jù)全部都在原文章源代碼的基礎(chǔ)上減半再作微調(diào)，即原文章的數(shù)據(jù)不適用，以上代碼是我調(diào)整修改后的

    3.實現(xiàn)色塊的翻轉(zhuǎn)

    要先在運動手表上生成一個7*7的棋盤，并且點擊棋盤中任一色塊，其上下左右四個色塊也會跟著一起變色(在邊緣的色塊則只會改變其中若干個色塊的顏色)

    原文章的實現(xiàn)方法是給這49個色塊分別添加一個按鈕，并分別添加點擊事件。

    布局方面如上所述，色塊(按鈕)是顯示在棋盤(畫布)之上，而游戲成功界面是顯示在色塊(按鈕)及畫布之上，因此stack里的順序應(yīng)該是canvas、button、gameover;且按鈕的相關(guān)大小間距的數(shù)據(jù)也要如上“代碼更新部分”一樣作修改，代碼(修改的部分)如下：

     
 
 
 
        
  
  
  
    1. .bitgrid1{ 
      2.   
  
  
  
    2.     left:2.5px; 
      3.   
  
  
  
    3.     top:2.5px; 
      4.   
  
  
  
    4.     width:20px; 
      5.   
  
  
  
    5.     height:20px; 
      6.   
  
  
  
    6.     border-color:transparent; 
      7.   
  
  
  
    7.     background-color:transparent 
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9. } 
      10.   
  
  
  
    10. .bitgrid2{ 
      11.   
  
  
  
    11.     left:25px; 
      12.   
  
  
  
    12.     top:2.5px; 
      13.   
  
  
  
    13.     width:20px; 
      14.   
  
  
  
    14.     height:20px; 
      15.   
  
  
  
    15.     border-color:transparent; 
      16.   
  
  
  
    16.     background-color:transparent 
      17.   
  
  
  
    17. } 
      18.   
  
  
  
    18. .bitgrid3{ 
      19.   
  
  
  
    19.     left:47.5px; 
      20.   
  
  
  
    20.     top:2.5px; 
      21.   
  
  
  
    21.     width:20px; 
      22.   
  
  
  
    22.     height:20px; 
      23.   
  
  
  
    23.     border-color:transparent; 
      24.   
  
  
  
    24.     background-color:transparent 
      25.   
  
  
  
    25. } 
      26.   
  
  
  
    26. .bitgrid4{ 
      27.   
  
  
  
    27.     left:70px; 
      28.   
  
  
  
    28.     top:2.5px; 
      29.   
  
  
  
    29.     width:20px; 
      30.   
  
  
  
    30.     height:20px; 
      31.   
  
  
  
    31.     border-color:transparent; 
      32.   
  
  
  
    32.     background-color:transparent 
      33.   
  
  
  
    33.  
      34.   
  
  
  
    34. } 
      35.   
  
  
  
    35. .bitgrid5{ 
      36.   
  
  
  
    36.     left:92.5px; 
      37.   
  
  
  
    37.     top:2.5px; 
      38.   
  
  
  
    38.     width:20px; 
      39.   
  
  
  
    39.     height:20px; 
      40.   
  
  
  
    40.     border-color:transparent; 
      41.   
  
  
  
    41.     background-color:transparent 
      42.   
  
  
  
    42. } 
      43.   
  
  
  
    43. .bitgrid6{ 
      44.   
  
  
  
    44.     left:115px; 
      45.   
  
  
  
    45.     top:2.5px; 
      46.   
  
  
  
    46.     width:20px; 
      47.   
  
  
  
    47.     height:20px; 
      48.   
  
  
  
    48.     border-color:transparent; 
      49.   
  
  
  
    49.     background-color:transparent 
      50.   
  
  
  
    50. } 
      51.   
  
  
  
    51. .bitgrid7{ 
      52.   
  
  
  
    52.     left:137.5px; 
      53.   
  
  
  
    53.     top:2.5px; 
      54.   
  
  
  
    54.     width:20px; 
      55.   
  
  
  
    55.     height:20px; 
      56.   
  
  
  
    56.     border-color:transparent; 
      57.   
  
  
  
    57.     background-color:transparent 
      58.   
  
  
  
    58. } 
      59.   
  
  
  
    59. .bitgrid8{ 
      60.   
  
  
  
    60.     left:2.5px; 
      61.   
  
  
  
    61.     top:25px; 
      62.   
  
  
  
    62.     width:20px; 
      63.   
  
  
  
    63.     height:20px; 
      64.   
  
  
  
    64.     border-color:transparent; 
      65.   
  
  
  
    65.     background-color:transparent; 
      66.   
  
  
  
    66. } 
      67.   
  
  
  
    67. .bitgrid9{ 
      68.   
  
  
  
    68.     left:25px; 
      69.   
  
  
  
    69.     top:25px; 
      70.   
  
  
  
    70.     width:20px; 
      71.   
  
  
  
    71.     height:20px; 
      72.   
  
  
  
    72.     border-color:transparent; 
      73.   
  
  
  
    73.     background-color:transparent; 
      74.   
  
  
  
    74. } 
      75.   
  
  
  
    75. .bitgrid10{ 
      76.   
  
  
  
    76.     left:47.5px; 
      77.   
  
  
  
    77.     top:25px; 
      78.   
  
  
  
    78.     width:20px; 
      79.   
  
  
  
    79.     height:20px; 
      80.   
  
  
  
    80.     border-color:transparent; 
      81.   
  
  
  
    81.     background-color:transparent; 
      82.   
  
  
  
    82. } 
      83.   
  
  
  
    83. .bitgrid11{ 
      84.   
  
  
  
    84.     left:70px; 
      85.   
  
  
  
    85.     top:25px; 
      86.   
  
  
  
    86.     width:20px; 
      87.   
  
  
  
    87.     height:20px; 
      88.   
  
  
  
    88.     border-color:transparent; 
      89.   
  
  
  
    89.     background-color:transparent; 
      90.   
  
  
  
    90.  
      91.   
  
  
  
    91. } 
      92.   
  
  
  
    92. .bitgrid12{ 
      93.   
  
  
  
    93.     left:92.5px; 
      94.   
  
  
  
    94.     top:25px; 
      95.   
  
  
  
    95.     width:20px; 
      96.   
  
  
  
    96.     height:20px; 
      97.   
  
  
  
    97.     border-color:transparent; 
      98.   
  
  
  
    98.     background-color:transparent; 
      99.   
  
  
  
    99. } 
      100.   
  
  
  
    100. .bitgrid13{ 
      101.   
  
  
  
    101.     left:115px; 
      102.   
  
  
  
    102.     top:25px; 
      103.   
  
  
  
    103.     width:20px; 
      104.   
  
  
  
    104.     height:20px; 
      105.   
  
  
  
    105.     border-color:transparent; 
      106.   
  
  
  
    106.     background-color:transparent; 
      107.   
  
  
  
    107. } 
      108.   
  
  
  
    108. .bitgrid14{ 
      109.   
  
  
  
    109.     left:137.5px; 
      110.   
  
  
  
    110.     top:25px; 
      111.   
  
  
  
    111.     width:20px; 
      112.   
  
  
  
    112.     height:20px; 
      113.   
  
  
  
    113.     border-color:transparent; 
      114.   
  
  
  
    114.     background-color:transparent; 
      115.   
  
  
  
    115. } 
      116.   
  
  
  
    116. .bitgrid15{ 
      117.   
  
  
  
    117.     left:2.5px; 
      118.   
  
  
  
    118.     top:47.5px; 
      119.   
  
  
  
    119.     width:20px; 
      120.   
  
  
  
    120.     height:20px; 
      121.   
  
  
  
    121.     border-color:transparent; 
      122.   
  
  
  
    122.     background-color:transparent; 
      123.   
  
  
  
    123. } 
      124.   
  
  
  
    124. .bitgrid16{ 
      125.   
  
  
  
    125.     left:25px; 
      126.   
  
  
  
    126.     top:47.5px; 
      127.   
  
  
  
    127.     width:20px; 
      128.   
  
  
  
    128.     height:20px; 
      129.   
  
  
  
    129.     border-color:transparent; 
      130.   
  
  
  
    130.     background-color:transparent; 
      131.   
  
  
  
    131. } 
      132.   
  
  
  
    132. .bitgrid17{ 
      133.   
  
  
  
    133.     left:47.5px; 
      134.   
  
  
  
    134.     top:47.5px; 
      135.   
  
  
  
    135.     width:20px; 
      136.   
  
  
  
    136.     height:20px; 
      137.   
  
  
  
    137.     border-color:transparent; 
      138.   
  
  
  
    138.     background-color:transparent; 
      139.   
  
  
  
    139. } 
      140.   
  
  
  
    140. .bitgrid18{ 
      141.   
  
  
  
    141.     left:70px; 
      142.   
  
  
  
    142.     top:47.5px; 
      143.   
  
  
  
    143.     width:20px; 
      144.   
  
  
  
    144.     height:20px; 
      145.   
  
  
  
    145.     border-color:transparent; 
      146.   
  
  
  
    146.     background-color:transparent; 
      147.   
  
  
  
    147.  
      148.   
  
  
  
    148. } 
      149.   
  
  
  
    149. .bitgrid19{ 
      150.   
  
  
  
    150.     left:92.5px; 
      151.   
  
  
  
    151.     top:47.5px; 
      152.   
  
  
  
    152.     width:20px; 
      153.   
  
  
  
    153.     height:20px; 
      154.   
  
  
  
    154.     border-color:transparent; 
      155.   
  
  
  
    155.     background-color:transparent; 
      156.   
  
  
  
    156. } 
      157.   
  
  
  
    157. .bitgrid20{ 
      158.   
  
  
  
    158.     left:115px; 
      159.   
  
  
  
    159.     top:47.5px; 
      160.   
  
  
  
    160.     width:20px; 
      161.   
  
  
  
    161.     height:20px; 
      162.   
  
  
  
    162.     border-color:transparent; 
      163.   
  
  
  
    163.     background-color:transparent; 
      164.   
  
  
  
    164. } 
      165.   
  
  
  
    165. .bitgrid21{ 
      166.   
  
  
  
    166.     left:137.5px; 
      167.   
  
  
  
    167.     top:47.5px; 
      168.   
  
  
  
    168.     width:20px; 
      169.   
  
  
  
    169.     height:20px; 
      170.   
  
  
  
    170.     border-color:transparent; 
      171.   
  
  
  
    171.     background-color:transparent; 
      172.   
  
  
  
    172. } 
      173.   
  
  
  
    173. .bitgrid22{ 
      174.   
  
  
  
    174.     left:2.5px; 
      175.   
  
  
  
    175.     top:70px; 
      176.   
  
  
  
    176.     width:20px; 
      177.   
  
  
  
    177.     height:20px; 
      178.   
  
  
  
    178.     border-color:transparent; 
      179.   
  
  
  
    179.     background-color:transparent; 
      180.   
  
  
  
    180. } 
      181.   
  
  
  
    181. .bitgrid23{ 
      182.   
  
  
  
    182.     left:25px; 
      183.   
  
  
  
    183.     top:70px; 
      184.   
  
  
  
    184.     width:20px; 
      185.   
  
  
  
    185.     height:20px; 
      186.   
  
  
  
    186.     border-color:transparent; 
      187.   
  
  
  
    187.     background-color:transparent; 
      188.   
  
  
  
    188. } 
      189.   
  
  
  
    189. .bitgrid24{ 
      190.   
  
  
  
    190.     left:47.5px; 
      191.   
  
  
  
    191.     top:70px; 
      192.   
  
  
  
    192.     width:20px; 
      193.   
  
  
  
    193.     height:20px; 
      194.   
  
  
  
    194.     border-color:transparent; 
      195.   
  
  
  
    195.     background-color:transparent; 
      196.   
  
  
  
    196. } 
      197.   
  
  
  
    197. .bitgrid25{ 
      198.   
  
  
  
    198.     left:70px; 
      199.   
  
  
  
    199.     top:70px; 
      200.   
  
  
  
    200.     width:20px; 
      201.   
  
  
  
    201.     height:20px; 
      202.   
  
  
  
    202.     border-color:transparent; 
      203.   
  
  
  
    203.     background-color:transparent; 
      204.   
  
  
  
    204.  
      205.   
  
  
  
    205. } 
      206.   
  
  
  
    206. .bitgrid26{ 
      207.   
  
  
  
    207.     left:92.5px; 
      208.   
  
  
  
    208.     top:70px; 
      209.   
  
  
  
    209.     width:20px; 
      210.   
  
  
  
    210.     height:20px; 
      211.   
  
  
  
    211.     border-color:transparent; 
      212.   
  
  
  
    212.     background-color:transparent; 
      213.   
  
  
  
    213. } 
      214.   
  
  
  
    214. .bitgrid27{ 
      215.   
  
  
  
    215.     left:115px; 
      216.   
  
  
  
    216.     top:70px; 
      217.   
  
  
  
    217.     width:20px; 
      218.   
  
  
  
    218.     height:20px; 
      219.   
  
  
  
    219.     border-color:transparent; 
      220.   
  
  
  
    220.     background-color:transparent; 
      221.   
  
  
  
    221. } 
      222.   
  
  
  
    222. .bitgrid28{ 
      223.   
  
  
  
    223.     left:137.5px; 
      224.   
  
  
  
    224.     top:70px; 
      225.   
  
  
  
    225.     width:20px; 
      226.   
  
  
  
    226.     height:20px; 
      227.   
  
  
  
    227.     border-color:transparent; 
      228.   
  
  
  
    228.     background-color:transparent; 
      229.   
  
  
  
    229. } 
      230.   
  
  
  
    230. .bitgrid29{ 
      231.   
  
  
  
    231.     left:2.5px; 
      232.   
  
  
  
    232.     top: 92.5px; 
      233.   
  
  
  
    233.     width:20px; 
      234.   
  
  
  
    234.     height:20px; 
      235.   
  
  
  
    235.     border-color:transparent; 
      236.   
  
  
  
    236.     background-color:transparent; 
      237.   
  
  
  
    237. } 
      238.   
  
  
  
    238. .bitgrid30{ 
      239.   
  
  
  
    239.     left:25px; 
      240.   
  
  
  
    240.     top:92.5px; 
      241.   
  
  
  
    241.     width:20px; 
      242.   
  
  
  
    242.     height:20px; 
      243.   
  
  
  
    243.     border-color:transparent; 
      244.   
  
  
  
    244.     background-color:transparent; 
      245.   
  
  
  
    245. } 
      246.   
  
  
  
    246. .bitgrid31{ 
      247.   
  
  
  
    247.     left:47.5px; 
      248.   
  
  
  
    248.     top:92.5px; 
      249.   
  
  
  
    249.     width:20px; 
      250.   
  
  
  
    250.     height:20px; 
      251.   
  
  
  
    251.     border-color:transparent; 
      252.   
  
  
  
    252.     background-color:transparent; 
      253.   
  
  
  
    253. } 
      254.   
  
  
  
    254. .bitgrid32{ 
      255.   
  
  
  
    255.     left:70px; 
      256.   
  
  
  
    256.     top:92.5px; 
      257.   
  
  
  
    257.     width:20px; 
      258.   
  
  
  
    258.     height:20px; 
      259.   
  
  
  
    259.     border-color:transparent; 
      260.   
  
  
  
    260.     background-color:transparent; 
      261.   
  
  
  
    261.  
      262.   
  
  
  
    262. } 
      263.   
  
  
  
    263. .bitgrid33{ 
      264.   
  
  
  
    264.     left:92.5px; 
      265.   
  
  
  
    265.     top:92.5px; 
      266.   
  
  
  
    266.     width:20px; 
      267.   
  
  
  
    267.     height:20px; 
      268.   
  
  
  
    268.     border-color:transparent; 
      269.   
  
  
  
    269.     background-color:transparent; 
      270.   
  
  
  
    270. } 
      271.   
  
  
  
    271. .bitgrid34{ 
      272.   
  
  
  
    272.     left:115px; 
      273.   
  
  
  
    273.     top:92.5px; 
      274.   
  
  
  
    274.     width:20px; 
      275.   
  
  
  
    275.     height:20px; 
      276.   
  
  
  
    276.     border-color:transparent; 
      277.   
  
  
  
    277.     background-color:transparent; 
      278.   
  
  
  
    278. } 
      279.   
  
  
  
    279. .bitgrid35{ 
      280.   
  
  
  
    280.     left:137.5px; 
      281.   
  
  
  
    281.     top:92.5px; 
      282.   
  
  
  
    282.     width:20px; 
      283.   
  
  
  
    283.     height:20px; 
      284.   
  
  
  
    284.     border-color:transparent; 
      285.   
  
  
  
    285.     background-color:transparent; 
      286.   
  
  
  
    286. } 
      287.   
  
  
  
    287. .bitgrid36{ 
      288.   
  
  
  
    288.     left:2.5px; 
      289.   
  
  
  
    289.     top:115px; 
      290.   
  
  
  
    290.     width:20px; 
      291.   
  
  
  
    291.     height:20px; 
      292.   
  
  
  
    292.     border-color:transparent; 
      293.   
  
  
  
    293.     background-color:transparent; 
      294.   
  
  
  
    294. } 
      295.   
  
  
  
    295. .bitgrid37{ 
      296.   
  
  
  
    296.     left:25px; 
      297.   
  
  
  
    297.     top:115px; 
      298.   
  
  
  
    298.     width:20px; 
      299.   
  
  
  
    299.     height:20px; 
      300.   
  
  
  
    300.     border-color:transparent; 
      301.   
  
  
  
    301.     background-color:transparent; 
      302.   
  
  
  
    302. } 
      303.   
  
  
  
    303. .bitgrid38{ 
      304.   
  
  
  
    304.     left:47.5px; 
      305.   
  
  
  
    305.     top:115px; 
      306.   
  
  
  
    306.     width:20px; 
      307.   
  
  
  
    307.     height:20px; 
      308.   
  
  
  
    308.     border-color:transparent; 
      309.   
  
  
  
    309.     background-color:transparent; 
      310.   
  
  
  
    310. } 
      311.   
  
  
  
    311. .bitgrid39{ 
      312.   
  
  
  
    312.     left:70px; 
      313.   
  
  
  
    313.     top:115px; 
      314.   
  
  
  
    314.     width:20px; 
      315.   
  
  
  
    315.     height:20px; 
      316.   
  
  
  
    316.     border-color:transparent; 
      317.   
  
  
  
    317.     background-color:transparent; 
      318.   
  
  
  
    318.  
      319.   
  
  
  
    319. } 
      320.   
  
  
  
    320. .bitgrid40{ 
      321.   
  
  
  
    321.     left:92.5px; 
      322.   
  
  
  
    322.     top:115px; 
      323.   
  
  
  
    323.     width:20px; 
      324.   
  
  
  
    324.     height:20px; 
      325.   
  
  
  
    325.     border-color:transparent; 
      326.   
  
  
  
    326.     background-color:transparent; 
      327.   
  
  
  
    327. } 
      328.   
  
  
  
    328. .bitgrid41{ 
      329.   
  
  
  
    329.     left:115px; 
      330.   
  
  
  
    330.     top:115px; 
      331.   
  
  
  
    331.     width:20px; 
      332.   
  
  
  
    332.     height:20px; 
      333.   
  
  
  
    333.     border-color:transparent; 
      334.   
  
  
  
    334.     background-color:transparent; 
      335.   
  
  
  
    335. } 
      336.   
  
  
  
    336. .bitgrid42{ 
      337.   
  
  
  
    337.     left:137.5px; 
      338.   
  
  
  
    338.     top:115px; 
      339.   
  
  
  
    339.     width:20px; 
      340.   
  
  
  
    340.     height:20px; 
      341.   
  
  
  
    341.     border-color:transparent; 
      342.   
  
  
  
    342.     background-color:transparent; 
      343.   
  
  
  
    343. } 
      344.   
  
  
  
    344. .bitgrid43{ 
      345.   
  
  
  
    345.     left:2.5px; 
      346.   
  
  
  
    346.     top:137.5px; 
      347.   
  
  
  
    347.     width:20px; 
      348.   
  
  
  
    348.     height:20px; 
      349.   
  
  
  
    349.     border-color:transparent; 
      350.   
  
  
  
    350.     background-color:transparent; 
      351.   
  
  
  
    351. } 
      352.   
  
  
  
    352. .bitgrid44{ 
      353.   
  
  
  
    353.     left:25px; 
      354.   
  
  
  
    354.     top:137.5px; 
      355.   
  
  
  
    355.     width:20px; 
      356.   
  
  
  
    356.     height:20px; 
      357.   
  
  
  
    357.     border-color:transparent; 
      358.   
  
  
  
    358.     background-color:transparent; 
      359.   
  
  
  
    359. } 
      360.   
  
  
  
    360. .bitgrid45{ 
      361.   
  
  
  
    361.     left:47.5px; 
      362.   
  
  
  
    362.     top:137.5px; 
      363.   
  
  
  
    363.     width:20px; 
      364.   
  
  
  
    364.     height:20px; 
      365.   
  
  
  
    365.     border-color:transparent; 
      366.   
  
  
  
    366.     background-color:transparent; 
      367.   
  
  
  
    367. } 
      368.   
  
  
  
    368. .bitgrid46{ 
      369.   
  
  
  
    369.     left:70px; 
      370.   
  
  
  
    370.     top:137.5px; 
      371.   
  
  
  
    371.     width:20px; 
      372.   
  
  
  
    372.     height:20px; 
      373.   
  
  
  
    373.     border-color:transparent; 
      374.   
  
  
  
    374.     background-color:transparent; 
      375.   
  
  
  
    375.  
      376.   
  
  
  
    376. } 
      377.   
  
  
  
    377. .bitgrid47{ 
      378.   
  
  
  
    378.     left:92.5px; 
      379.   
  
  
  
    379.     top:137.5px; 
      380.   
  
  
  
    380.     width:20px; 
      381.   
  
  
  
    381.     height:20px; 
      382.   
  
  
  
    382.     border-color:transparent; 
      383.   
  
  
  
    383.     background-color:transparent; 
      384.   
  
  
  
    384. } 
      385.   
  
  
  
    385. .bitgrid48{ 
      386.   
  
  
  
    386.     left:115px; 
      387.   
  
  
  
    387.     top:137.5px; 
      388.   
  
  
  
    388.     width:20px; 
      389.   
  
  
  
    389.     height:20px; 
      390.   
  
  
  
    390.     border-color:transparent; 
      391.   
  
  
  
    391.     background-color:transparent; 
      392.   
  
  
  
    392. } 
      393.   
  
  
  
    393. .bitgrid49{ 
      394.   
  
  
  
    394.     left:137.5px; 
      395.   
  
  
  
    395.     top:137.5px; 
      396.   
  
  
  
    396.     width:20px; 
      397.   
  
  
  
    397.     height:20px; 
      398.   
  
  
  
    398.     border-color:transparent; 
      399.   
  
  
  
    399.     background-color:transparent; 
      400.   
  
  
  
    400. } 
      401.

    然后在index.js文件里用一個7*7的數(shù)組表示色塊，其中0表示白色，1代表黑色，這樣我們就能定義一個用0和1表示鍵，顏色表示值的字典COLORS，并且定義全局常量邊長SIDELEN為20，間距MARGIN為2.5，定義一個全局變量的二維數(shù)組grids，其中的值全為0

     
 
 
 
        
  
  
  
    1. var grids=[[0, 0, 0, 0, 0, 0, 0], 
      2.   
  
  
  
    2.            [0, 0, 0, 0, 0, 0, 0], 
      3.   
  
  
  
    3.            [0, 0, 0, 0, 0, 0, 0], 
      4.   
  
  
  
    4.            [0, 0, 0, 0, 0, 0, 0], 
      5.   
  
  
  
    5.            [0, 0, 0, 0, 0, 0, 0], 
      6.   
  
  
  
    6.            [0, 0, 0, 0, 0, 0, 0], 
      7.   
  
  
  
    7.            [0, 0, 0, 0, 0, 0, 0], 
      8.   
  
  
  
    8.            [0, 0, 0, 0, 0, 0, 0]]; 
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10. const SIDELEN=20; 
      11.   
  
  
  
    11. const MARGIN=2.5; 
      12.   
  
  
  
    12. const COLORS = { 
      13.   
  
  
  
    13.     "0": "#FFFFFF", 
      14.   
  
  
  
    14.     "1": "#000000" 
      15.   
  
  
  
    15. } 
      16.

    設(shè)置色塊的點擊事件

    要點：點擊時對應(yīng)獲取該方塊的位置(例如該方塊時第3行第4個，則坐標(biāo)為(2，3))，并將該坐標(biāo)傳給函數(shù)changeOneGrids，去判斷該方塊上下左右是否有方塊，并調(diào)用函數(shù)change變換其數(shù)組的值——若0則變?yōu)?，若1則變?yōu)?

     
 
 
 
        
  
  
  
    1. change(x,y){ 
      2.   
  
  
  
    2.         if(this.isShow==false){ 
      3.   
  
  
  
    3.             if(grids[x][y] == 0){ 
      4.   
  
  
  
    4.                 grids[x][y] = 1; 
      5.   
  
  
  
    5.             }else{ 
      6.   
  
  
  
    6.                 grids[x][y] = 0; 
      7.   
  
  
  
    7.             } 
      8.   
  
  
  
    8.         } 
      9.   
  
  
  
    9.     }, 
      10.   
  
  
  
    10. changeOneGrids(x,y){ 
      11.   
  
  
  
    11.         if(x>-1 && y>-1 && x<7 && y<7){ 
      12.   
  
  
  
    12.             this.change(x,y); 
      13.   
  
  
  
    13.         } 
      14.   
  
  
  
    14.         if(x+1>-1 && y>-1 && x+1<7 && y<7){ 
      15.   
  
  
  
    15.             this.change(x+1,y); 
      16.   
  
  
  
    16.         } 
      17.   
  
  
  
    17.         if(x-1>-1 && y>-1 && x-1<7 && y<7){ 
      18.   
  
  
  
    18.             this.change(x-1,y); 
      19.   
  
  
  
    19.         } 
      20.   
  
  
  
    20.         if(x>-1 && y+1>-1 && x<7 && y+1<7){ 
      21.   
  
  
  
    21.             this.change(x,y+1); 
      22.   
  
  
  
    22.         } 
      23.   
  
  
  
    23.         if(x>-1 && y-1>-1 && x<7 && y-1<7){ 
      24.   
  
  
  
    24.             this.change(x,y-1); 
      25.   
  
  
  
    25.         } 
      26.   
  
  
  
    26. } 
      27.

    最后調(diào)用函數(shù)drawgrids去“上色”

     
 
 
 
        
  
  
  
    1. drawGrids(){ 
      2.   
  
  
  
    2.         context=this.$refs.canvas.getContext('2d'); 
      3.   
  
  
  
    3.         for (let row = 0 ;row < 7 ;row++){ 
      4.   
  
  
  
    4.             for (let column = 0; column < 7;column++){ 
      5.   
  
  
  
    5.                 let gridStr = grids[row][column].toString(); 
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7.                 context.fillStyle = COLORS[gridStr]; 
      8.   
  
  
  
    8.                 let leftTopX = column * (MARGIN + SIDELEN) + MARGIN; 
      9.   
  
  
  
    9.                 let leftTopY = row * (MARGIN + SIDELEN) + MARGIN; 
      10.   
  
  
  
    10.                 context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN); 
      11.   
  
  
  
    11.             } 
      12.   
  
  
  
    12.         } 
      13.   
  
  
  
    13.     }, 
      14.

    4.實現(xiàn)題目的隨機生成

    隨機生成一個色塊被打亂的7x7的棋盤，這里是在原來全白的棋盤上隨機生成20個黑色塊。

    要點：把二維數(shù)組的下標(biāo)放進一個列表中,Math.random()函數(shù)是隨機[0,1)內(nèi)的小數(shù)，Math.floor(x)為得出小于或等于x的最大整數(shù)，每次隨機生成一個數(shù)后，讀取剛才的列表對應(yīng)的下標(biāo),即獲得一個在7x7內(nèi)的隨機的坐標(biāo)，調(diào)用函數(shù)changeOneGrids(x,y)

     
 
 
 
        
  
  
  
    1. initGrids(){ 
      2.   
  
  
  
    2.         let array = []; 
      3.   
  
  
  
    3.         for (let row = 0; row < 7; row++) { 
      4.   
  
  
  
    4.             for (let column = 0; column < 7; column++) { 
      5.   
  
  
  
    5.                 if (grids[row][column] == 0) { 
      6.   
  
  
  
    6.                     array.push([row, column]) 
      7.   
  
  
  
    7.                 } 
      8.   
  
  
  
    8.             } 
      9.   
  
  
  
    9.         } 
      10.   
  
  
  
    10.         for (let i = 0; i < 20; i++){ 
      11.   
  
  
  
    11.             let randomIndex = Math.floor(Math.random() * array.length); 
      12.   
  
  
  
    12.             let row = array[randomIndex][0]; 
      13.   
  
  
  
    13.             let column = array[randomIndex][1]; 
      14.   
  
  
  
    14.             this.changeOneGrids(row,column); 
      15.   
  
  
  
    15.         } 
      16.   
  
  
  
    16.     } 
      17.

    5.游戲結(jié)束

    當(dāng)該7x7數(shù)組的值全為1時游戲成功，此時isShow的值為真，色塊的點擊事件就不起效(change函數(shù)里加個對isShow的真假判斷)

     
 
 
 
        
  
  
  
    1. gameover(){ 
      2.   
  
  
  
    2.         for (let row = 0 ;row < 7 ;row++){ 
      3.   
  
  
  
    3.             for (let column = 0; column < 7;column++){ 
      4.   
  
  
  
    4.                 if (grids[row][column]==1){ 
      5.   
  
  
  
    5.                     return false; 
      6.   
  
  
  
    6.                 } 
      7.   
  
  
  
    7.             } 
      8.   
  
  
  
    8.         } 
      9.   
  
  
  
    9.         return true; 
      10.   
  
  
  
    10.     } 
      11.

    然后在changeOneGrids函數(shù)里調(diào)用gameover函數(shù);同時，隨著每一次點擊，都會調(diào)用changeOneGrids函數(shù)，所以步數(shù)的增加可以直接在每次changeOneGrids函數(shù)被調(diào)用時累加

     
 
 
 
        
  
  
  
    1. if(this.isShow==false){ 
      2.   
  
  
  
    2.            this.currentSteps+=1;; 
      3.   
  
  
  
    3.        } 
      4.   
  
  
  
    4.        if(this.gameover()){ 
      5.   
  
  
  
    5.            this.isShow=true; 
      6.   
  
  
  
    6.        } 
      7.

    6.重新開始

    最后編寫重新按鈕對應(yīng)的函數(shù)restartGame()，作用是是二維數(shù)組、isShow和當(dāng)前步數(shù)全部置為初始化界面

     
 
 
 
        
  
  
  
    1. restartGame(){ 
      2.   
  
  
  
    2.      this.initGrids(); 
      3.   
  
  
  
    3.      this.drawGrids(); 
      4.   
  
  
  
    4.      this.isShow = false; 
      5.   
  
  
  
    5.      this.currentSteps = 0; 
      6.   
  
  
  
    6.  } 
      7.

    修改的說明

    1.畫布組件的getContext不支持在onInit和onReady中進行調(diào)用，因此我改在drawGrids中調(diào)用，然后再在onShow中調(diào)用drawGrids

    2.隨機生成打亂的色塊時，會調(diào)用changeOneGrids函數(shù)，此時會增加步數(shù)20

     
 
 
 
        
  
  
  
    1. data: { 
      2.   
  
  
  
    2.         currentSteps: -20, 
      3.   
  
  
  
    3.     }? 
      4.

    3.同1，色塊的隨機生成函數(shù)initGrids也放在onShow中調(diào)用

    結(jié)語

    以上是我的初步學(xué)習(xí)筆記啦，我修改過的源代碼會上傳到附件，更多詳細的注解步驟可去看原文章。該學(xué)習(xí)筆記還有后續(xù)哦，后續(xù)是對其中一些功能實現(xiàn)采用另一種算法來實現(xiàn)，代碼會在該篇的基礎(chǔ)上再作修改，并且還會對相關(guān)知識注解作一個小分享，敬請期待(●ˇ?ˇ●)

    文章相關(guān)附件可以點擊下面的原文鏈接前往下載

    https://harmonyos./resource/1222

    想了解更多內(nèi)容，請訪問：

    和華為官方合作共建的鴻蒙技術(shù)社區(qū)

    https://harmonyos.


    網(wǎng)頁標(biāo)題：手表游戲—黑白翻棋 之 學(xué)習(xí)筆記（前篇）
    文章地址：http://www.5511xx.com/article/djighje.html