返回发烧友论坛
发 帖  

[文章]【木棉花】：手表游戏——黑白翻棋 之 学习笔记（前篇）

jf_16575311
2021-09-16 00:54:23
阅读量0
1
5
前言
去年我们木棉花组织发过一篇文章“HarmonyOS手表游戏——黑白翻棋”，本文是我对该文章的一个学习笔记，随着IDE的升级，一些代码也需要作修改。以下是我的学习笔记及部分代码的修改O(∩_∩)O
源代码请移步至→原文章地址
概述
正文内容只展示部分代码，完整代码可以下载附件（附件1是源代码的代码更新）。效果图如下：


35.png

正文
1.创建一个空白的工程DevEco Studio下载安装成功后，打开DevEco Studio，点击左上角的File，点击New，再选择New Project，选择Empty Ability(JS),然后点击Next,给项目命名WatchGame_BW，选择设备类型Wearable，最后点击Finish。

2.界面布局
通过效果图可见，初始布局分三个部分，由上至下分别是文本框、棋盘（画布组件）、按钮；游戏成功的布局有四个部分：文本框、棋盘（画布组件）、游戏成功界面、按钮。(完整代码及解释可以去看原文章)
这里记几个小要点：
1.当前步数显示的是一个动态的值，不是一个固定的值，这里以动态变量currentSteps来显示数据
2.游戏成功的文本框是显示在画布组件之上的（覆盖），而不是在画布组件的下方。该实现可通过添加一个堆叠容器stack，将游戏成功的文本组件放在画布组件之后
3.“游戏成功”的显示在初始时不会显示，所以要设置属性show,对应设一个布尔型变量isShow，并令isShow的初始值为假，游戏成功时其值为真，当为真时就可以显示了
  1. <div class="container">
  2.     <text class="steps">
  3.         当前步数：{{currentSteps}}
  4.     </text>
  5.     <stack class="stack">
  6.         <canvas class="canvas" ref="canvas"></canvas>
  7.             <div class="subcontainer" show="{{isShow}}">
  8.                 <text class="gameover">
  9.                     游戏成功
  10.                 </text>
  11.             </div>
  12.     </stack>
  13.     <input type="button" value="重新开始" class="bit" onclick="restartGame"/>
  14. </div>
复制代码
相应的组件大小颜色等属性设置在entry>src>main>js>default>pages.index>index.css文件里通过class设定的名称来去设置，代码如下：
  1. .container {
  2.     flex-direction: column;
  3.     justify-content: center;
  4.     align-items: center;
  5.     width:240px;
  6.     height:240px;
  7. }
  8. .steps {
  9.     font-size: 10px;
  10.     text-align:center;
  11.     width:100px;
  12.     height:18px;
  13.     letter-spacing:0px;
  14.     margin-top:5px;
  15. }
  16. .canvas{
  17.     width:160px;
  18.     height:160px;
  19.     background-color: #BBADA0;
  20. }
  21. .bit {
  22.     width: 75px;
  23.     height: 15px;
  24.     background-color: #AD9D8F;
  25.     font-size: 10px;
  26.     margin-top: 5px;
  27. }

  29. .stack{
  30.     width: 160px;
  31.     height: 160px;
  32.     margin-top: 5px;
  33. }

  35. .subcontainer{
  36.     left: 25px;
  37.     top: 47.5px;
  38.     width: 110px;
  39.     height: 65px;
  40.     justify-content: center;
  41.     align-content: center;
  42.     background-color: #E9C2A6;
  43. }

  45. .gameover{
  46.     font-size: 19px;
  47.     color:black;
  48. }
复制代码
代码更新部分：组件大小的数据全部都在原文章源代码的基础上减半再作微调，即原文章的数据不适用，以上代码是我调整修改后的
3.实现色块的翻转
要先在运动手表上生成一个7*7的棋盘，并且点击棋盘中任一色块，其上下左右四个色块也会跟着一起变色（在边缘的色块则只会改变其中若干个色块的颜色）
原文章的实现方法是给这49个色块分别添加一个按钮，并分别添加点击事件。
布局方面如上所述，色块（按钮）是显示在棋盘（画布）之上，而游戏成功界面是显示在色块（按钮）及画布之上，因此stack里的顺序应该是canvas、button、gameover；且按钮的相关大小间距的数据也要如上“代码更新部分”一样作修改，代码（修改的部分）如下：
  1. .bitgrid1{
  2.     left:2.5px;
  3.     top:2.5px;
  4.     width:20px;
  5.     height:20px;
  6.     border-color:transparent;
  7.     background-color:transparent

  9. }
  10. .bitgrid2{
  11.     left:25px;
  12.     top:2.5px;
  13.     width:20px;
  14.     height:20px;
  15.     border-color:transparent;
  16.     background-color:transparent
  17. }
  18. .bitgrid3{
  19.     left:47.5px;
  20.     top:2.5px;
  21.     width:20px;
  22.     height:20px;
  23.     border-color:transparent;
  24.     background-color:transparent
  25. }
  26. .bitgrid4{
  27.     left:70px;
  28.     top:2.5px;
  29.     width:20px;
  30.     height:20px;
  31.     border-color:transparent;
  32.     background-color:transparent

  34. }
  35. .bitgrid5{
  36.     left:92.5px;
  37.     top:2.5px;
  38.     width:20px;
  39.     height:20px;
  40.     border-color:transparent;
  41.     background-color:transparent
  42. }
  43. .bitgrid6{
  44.     left:115px;
  45.     top:2.5px;
  46.     width:20px;
  47.     height:20px;
  48.     border-color:transparent;
  49.     background-color:transparent
  50. }
  51. .bitgrid7{
  52.     left:137.5px;
  53.     top:2.5px;
  54.     width:20px;
  55.     height:20px;
  56.     border-color:transparent;
  57.     background-color:transparent
  58. }
  59. .bitgrid8{
  60.     left:2.5px;
  61.     top:25px;
  62.     width:20px;
  63.     height:20px;
  64.     border-color:transparent;
  65.     background-color:transparent;
  66. }
  67. .bitgrid9{
  68.     left:25px;
  69.     top:25px;
  70.     width:20px;
  71.     height:20px;
  72.     border-color:transparent;
  73.     background-color:transparent;
  74. }
  75. .bitgrid10{
  76.     left:47.5px;
  77.     top:25px;
  78.     width:20px;
  79.     height:20px;
  80.     border-color:transparent;
  81.     background-color:transparent;
  82. }
  83. .bitgrid11{
  84.     left:70px;
  85.     top:25px;
  86.     width:20px;
  87.     height:20px;
  88.     border-color:transparent;
  89.     background-color:transparent;

  91. }
  92. .bitgrid12{
  93.     left:92.5px;
  94.     top:25px;
  95.     width:20px;
  96.     height:20px;
  97.     border-color:transparent;
  98.     background-color:transparent;
  99. }
  100. .bitgrid13{
  101.     left:115px;
  102.     top:25px;
  103.     width:20px;
  104.     height:20px;
  105.     border-color:transparent;
  106.     background-color:transparent;
  107. }
  108. .bitgrid14{
  109.     left:137.5px;
  110.     top:25px;
  111.     width:20px;
  112.     height:20px;
  113.     border-color:transparent;
  114.     background-color:transparent;
  115. }
  116. .bitgrid15{
  117.     left:2.5px;
  118.     top:47.5px;
  119.     width:20px;
  120.     height:20px;
  121.     border-color:transparent;
  122.     background-color:transparent;
  123. }
  124. .bitgrid16{
  125.     left:25px;
  126.     top:47.5px;
  127.     width:20px;
  128.     height:20px;
  129.     border-color:transparent;
  130.     background-color:transparent;
  131. }
  132. .bitgrid17{
  133.     left:47.5px;
  134.     top:47.5px;
  135.     width:20px;
  136.     height:20px;
  137.     border-color:transparent;
  138.     background-color:transparent;
  139. }
  140. .bitgrid18{
  141.     left:70px;
  142.     top:47.5px;
  143.     width:20px;
  144.     height:20px;
  145.     border-color:transparent;
  146.     background-color:transparent;

  148. }
  149. .bitgrid19{
  150.     left:92.5px;
  151.     top:47.5px;
  152.     width:20px;
  153.     height:20px;
  154.     border-color:transparent;
  155.     background-color:transparent;
  156. }
  157. .bitgrid20{
  158.     left:115px;
  159.     top:47.5px;
  160.     width:20px;
  161.     height:20px;
  162.     border-color:transparent;
  163.     background-color:transparent;
  164. }
  165. .bitgrid21{
  166.     left:137.5px;
  167.     top:47.5px;
  168.     width:20px;
  169.     height:20px;
  170.     border-color:transparent;
  171.     background-color:transparent;
  172. }
  173. .bitgrid22{
  174.     left:2.5px;
  175.     top:70px;
  176.     width:20px;
  177.     height:20px;
  178.     border-color:transparent;
  179.     background-color:transparent;
  180. }
  181. .bitgrid23{
  182.     left:25px;
  183.     top:70px;
  184.     width:20px;
  185.     height:20px;
  186.     border-color:transparent;
  187.     background-color:transparent;
  188. }
  189. .bitgrid24{
  190.     left:47.5px;
  191.     top:70px;
  192.     width:20px;
  193.     height:20px;
  194.     border-color:transparent;
  195.     background-color:transparent;
  196. }
  197. .bitgrid25{
  198.     left:70px;
  199.     top:70px;
  200.     width:20px;
  201.     height:20px;
  202.     border-color:transparent;
  203.     background-color:transparent;

  205. }
  206. .bitgrid26{
  207.     left:92.5px;
  208.     top:70px;
  209.     width:20px;
  210.     height:20px;
  211.     border-color:transparent;
  212.     background-color:transparent;
  213. }
  214. .bitgrid27{
  215.     left:115px;
  216.     top:70px;
  217.     width:20px;
  218.     height:20px;
  219.     border-color:transparent;
  220.     background-color:transparent;
  221. }
  222. .bitgrid28{
  223.     left:137.5px;
  224.     top:70px;
  225.     width:20px;
  226.     height:20px;
  227.     border-color:transparent;
  228.     background-color:transparent;
  229. }
  230. .bitgrid29{
  231.     left:2.5px;
  232.     top: 92.5px;
  233.     width:20px;
  234.     height:20px;
  235.     border-color:transparent;
  236.     background-color:transparent;
  237. }
  238. .bitgrid30{
  239.     left:25px;
  240.     top:92.5px;
  241.     width:20px;
  242.     height:20px;
  243.     border-color:transparent;
  244.     background-color:transparent;
  245. }
  246. .bitgrid31{
  247.     left:47.5px;
  248.     top:92.5px;
  249.     width:20px;
  250.     height:20px;
  251.     border-color:transparent;
  252.     background-color:transparent;
  253. }
  254. .bitgrid32{
  255.     left:70px;
  256.     top:92.5px;
  257.     width:20px;
  258.     height:20px;
  259.     border-color:transparent;
  260.     background-color:transparent;

  262. }
  263. .bitgrid33{
  264.     left:92.5px;
  265.     top:92.5px;
  266.     width:20px;
  267.     height:20px;
  268.     border-color:transparent;
  269.     background-color:transparent;
  270. }
  271. .bitgrid34{
  272.     left:115px;
  273.     top:92.5px;
  274.     width:20px;
  275.     height:20px;
  276.     border-color:transparent;
  277.     background-color:transparent;
  278. }
  279. .bitgrid35{
  280.     left:137.5px;
  281.     top:92.5px;
  282.     width:20px;
  283.     height:20px;
  284.     border-color:transparent;
  285.     background-color:transparent;
  286. }
  287. .bitgrid36{
  288.     left:2.5px;
  289.     top:115px;
  290.     width:20px;
  291.     height:20px;
  292.     border-color:transparent;
  293.     background-color:transparent;
  294. }
  295. .bitgrid37{
  296.     left:25px;
  297.     top:115px;
  298.     width:20px;
  299.     height:20px;
  300.     border-color:transparent;
  301.     background-color:transparent;
  302. }
  303. .bitgrid38{
  304.     left:47.5px;
  305.     top:115px;
  306.     width:20px;
  307.     height:20px;
  308.     border-color:transparent;
  309.     background-color:transparent;
  310. }
  311. .bitgrid39{
  312.     left:70px;
  313.     top:115px;
  314.     width:20px;
  315.     height:20px;
  316.     border-color:transparent;
  317.     background-color:transparent;

  319. }
  320. .bitgrid40{
  321.     left:92.5px;
  322.     top:115px;
  323.     width:20px;
  324.     height:20px;
  325.     border-color:transparent;
  326.     background-color:transparent;
  327. }
  328. .bitgrid41{
  329.     left:115px;
  330.     top:115px;
  331.     width:20px;
  332.     height:20px;
  333.     border-color:transparent;
  334.     background-color:transparent;
  335. }
  336. .bitgrid42{
  337.     left:137.5px;
  338.     top:115px;
  339.     width:20px;
  340.     height:20px;
  341.     border-color:transparent;
  342.     background-color:transparent;
  343. }
  344. .bitgrid43{
  345.     left:2.5px;
  346.     top:137.5px;
  347.     width:20px;
  348.     height:20px;
  349.     border-color:transparent;
  350.     background-color:transparent;
  351. }
  352. .bitgrid44{
  353.     left:25px;
  354.     top:137.5px;
  355.     width:20px;
  356.     height:20px;
  357.     border-color:transparent;
  358.     background-color:transparent;
  359. }
  360. .bitgrid45{
  361.     left:47.5px;
  362.     top:137.5px;
  363.     width:20px;
  364.     height:20px;
  365.     border-color:transparent;
  366.     background-color:transparent;
  367. }
  368. .bitgrid46{
  369.     left:70px;
  370.     top:137.5px;
  371.     width:20px;
  372.     height:20px;
  373.     border-color:transparent;
  374.     background-color:transparent;

  376. }
  377. .bitgrid47{
  378.     left:92.5px;
  379.     top:137.5px;
  380.     width:20px;
  381.     height:20px;
  382.     border-color:transparent;
  383.     background-color:transparent;
  384. }
  385. .bitgrid48{
  386.     left:115px;
  387.     top:137.5px;
  388.     width:20px;
  389.     height:20px;
  390.     border-color:transparent;
  391.     background-color:transparent;
  392. }
  393. .bitgrid49{
  394.     left:137.5px;
  395.     top:137.5px;
  396.     width:20px;
  397.     height:20px;
  398.     border-color:transparent;
  399.     background-color:transparent;
  400. }

复制代码
然后在index.js文件里用一个7*7的数组表示色块，其中0表示白色，1代表黑色，这样我们就能定义一个用0和1表示键，颜色表示值的字典COLORS，并且定义全局常量边长SIDELEN为20，间距MARGIN为2.5，定义一个全局变量的二维数组grids，其中的值全为0
  1. var grids=[[0, 0, 0, 0, 0, 0, 0],
  2.            [0, 0, 0, 0, 0, 0, 0],
  3.            [0, 0, 0, 0, 0, 0, 0],
  4.            [0, 0, 0, 0, 0, 0, 0],
  5.            [0, 0, 0, 0, 0, 0, 0],
  6.            [0, 0, 0, 0, 0, 0, 0],
  7.            [0, 0, 0, 0, 0, 0, 0],
  8.            [0, 0, 0, 0, 0, 0, 0]];

  10. const SIDELEN=20;
  11. const MARGIN=2.5;
  12. const COLORS = {
  13.     "0": "#FFFFFF",
  14.     "1": "#000000"
  15. }
复制代码
设置色块的点击事件
要点：点击时对应获取该方块的位置（例如该方块时第3行第4个，则坐标为（2，3）），并将该坐标传给函数changeOneGrids，去判断该方块上下左右是否有方块，并调用函数change变换其数组的值——若0则变为1，若1则变为0
  1. change(x,y){
  2.         if(this.isShow==false){
  3.             if(grids[x][y] == 0){
  4.                 grids[x][y] = 1;
  5.             }else{
  6.                 grids[x][y] = 0;
  7.             }
  8.         }
  9.     },
  10. changeOneGrids(x,y){
  11.         if(x>-1 && y>-1 && x<7 && y<7){
  12.             this.change(x,y);
  13.         }
  14.         if(x+1>-1 && y>-1 && x+1<7 && y<7){
  15.             this.change(x+1,y);
  16.         }
  17.         if(x-1>-1 && y>-1 && x-1<7 && y<7){
  18.             this.change(x-1,y);
  19.         }
  20.         if(x>-1 && y+1>-1 && x<7 && y+1<7){
  21.             this.change(x,y+1);
  22.         }
  23.         if(x>-1 && y-1>-1 && x<7 && y-1<7){
  24.             this.change(x,y-1);
  25.         }
  26. }
复制代码
最后调用函数drawgrids去“上色”
  1. drawGrids(){
  2.         context=this.$refs.canvas.getContext('2d');
  3.         for (let row = 0 ;row < 7 ;row++){
  4.             for (let column = 0; column < 7;column++){
  5.                 let gridStr = grids[row][column].toString();

  7.                 context.fillStyle = COLORS[gridStr];
  8.                 let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;
  9.                 let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;
  10.                 context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);
  11.             }
  12.         }
  13.     },
复制代码
4.实现题目的随机生成
随机生成一个色块被打乱的7x7的棋盘，这里是在原来全白的棋盘上随机生成20个黑色块。
要点：把二维数组的下标放进一个列表中,Math.random()函数是随机[0,1)内的小数，Math.floor（x）为得出小于或等于x的最大整数，每次随机生成一个数后，读取刚才的列表对应的下标,即获得一个在7x7内的随机的坐标，调用函数changeOneGrids（x,y）
  1. initGrids(){
  2.         let array = [];
  3.         for (let row = 0; row < 7; row++) {
  4.             for (let column = 0; column < 7; column++) {
  5.                 if (grids[row][column] == 0) {
  6.                     array.push([row, column])
  7.                 }
  8.             }
  9.         }
  10.         for (let i = 0; i < 20; i++){
  11.             let randomIndex = Math.floor(Math.random() * array.length);
  12.             let row = array[randomIndex][0];
  13.             let column = array[randomIndex][1];
  14.             this.changeOneGrids(row,column);
  15.         }
  16.     }
复制代码
5.游戏结束
当该7x7数组的值全为1时游戏成功，此时isShow的值为真，色块的点击事件就不起效（change函数里加个对isShow的真假判断）
  1. gameover(){
  2.         for (let row = 0 ;row < 7 ;row++){
  3.             for (let column = 0; column < 7;column++){
  4.                 if (grids[row][column]==1){
  5.                     return false;
  6.                 }
  7.             }
  8.         }
  9.         return true;
  10.     }
复制代码
然后在changeOneGrids函数里调用gameover函数；同时，随着每一次点击，都会调用changeOneGrids函数，所以步数的增加可以直接在每次changeOneGrids函数被调用时累加
  1. if(this.isShow==false){
  2.             this.currentSteps+=1;;
  3.         }
  4.         if(this.gameover()){
  5.             this.isShow=true;
  6.         }
复制代码
6.重新开始
最后编写重新按钮对应的函数restartGame()，作用是是二维数组、isShow和当前步数全部置为初始化界面
  1.    restartGame(){
  2.         this.initGrids();
  3.         this.drawGrids();
  4.         this.isShow = false;
  5.         this.currentSteps = 0;
  6.     }
复制代码
修改的说明
1.画布组件的getContext不支持在onInit和onReady中进行调用，因此我改在drawGrids中调用，然后再在onShow中调用drawGrids
2.随机生成打乱的色块时，会调用changeOneGrids函数，此时会增加步数20
  1. data: {
  2.         currentSteps: -20,
  3.     }​
复制代码
3.同1，色块的随机生成函数initGrids也放在onShow中调用

结语
以上是我的初步学习笔记啦，我修改过的源代码会上传到附件，更多详细的注解步骤可去看原文章。该学习笔记还有后续哦，后续是对其中一些功能实现采用另一种算法来实现，代码会在该篇的基础上再作修改，并且还会对相关知识注解作一个小分享，敬请期待(●ˇ∀ˇ●)

更多资料请关注我们的项目 : Awesome-Harmony_木棉花

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友