手机游戏—黑白翻棋

开发
这次给大家带来的小分享是黑白翻棋的手机版本,也是JS写的,功能代码基本一致(采用第二篇的算法),只是布局会作相应修改。

[[427565]]

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

前言

之前发过两篇黑白翻棋游戏的手表版本,感兴趣的uu们可以点击👉 穿梭机1穿梭机2。这次给大家带来的小分享是黑白翻棋的手机版本,也是JS写的,功能代码基本一致(采用第二篇的算法),只是布局会作相应修改。

概述

该游戏会随机生成一个题目,最终当棋盘上的方格都为白色的时候游戏成功,效果如下👇

【木棉花】:手机游戏——黑白翻棋-鸿蒙HarmonyOS技术社区【木棉花】:手机游戏——黑白翻棋-鸿蒙HarmonyOS技术社区

正文

一.创建一个空白的工程

DevEco Studio下载安装成功后,打开DevEco Studio,点击左上角的File,点击New,再选择New Project,选择Empty Ability,然后点击Next,给项目命名PhoneGame_BW,选择设备类型Phone,选择语言类型JS最后点击Finish。

【木棉花】:手机游戏——黑白翻棋-鸿蒙HarmonyOS技术社区
【木棉花】:手机游戏——黑白翻棋-鸿蒙HarmonyOS技术社区

二.界面布局

1.代码删除的部分

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

  1. <text class="title"
  2.         {{ $t('strings.hello') }} {{ title }} 
  3.     </text> 

 在entry>src>main>js>default>pages.index>index.js 文件里把以下代码删掉

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

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

2.棋盘设置

这里以画布组件canvas来描绘棋盘

  1. <canvas class="canvas" ref="canvas"> </canvas> 

index.css

  1. .canvas{ 
  2.     width:320px; 
  3.     height:320px; 
  4.     background-color: #BBADA0; 

打开模拟器,界面如下

【木棉花】:手机游戏——黑白翻棋-鸿蒙HarmonyOS技术社区

3.棋子设置

棋子是通过canvas组件的方法来绘制填充多个正方形,这里我设置的棋盘是7x7的,每个方格的边长SIDELEN为40,方格间的间距MARGIN为5,以一个数组来表示每个方格,并初始化赋值为0,用0表示白色,1代表黑色,这样我们就能定义一个用0和1表示键,颜色表示值的字典COLORS

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

  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]]; 
  9. var context; 
  10. const SIDELEN=40; 
  11. const MARGIN=5; 
  12.  
  13. const COLORS = { 
  14.     "0""#FFFFFF"
  15.     "1""#000000" 

 在export default下方添加以下代码,遍历数组grids的每一个元素,将其转换成String型,对应的是COLORS中的颜色,然后调用画布组件中的方法fillRect填充方格的颜色,参数为方格的左上角的坐标及方格的长宽

  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(); 
  6.  
  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.   }, 

 最后在drawGrids函数上方添加以下代码调用drawGrids

  1. onShow(){ 
  2.        this.drawGrids(); 
  3.    }, 

 打开模拟器,就能有如下效果

【木棉花】:手机游戏——黑白翻棋-鸿蒙HarmonyOS技术社区

三.游戏规则的设置

1.获取点击位置的坐标并对应方格

给画布组件添加点击事件onclick和触摸事件touchstart

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

事件touchstart,在手指刚触摸屏幕时就触发该事件,其参数为TouchEvent,其对象属性touches包含屏幕触摸点的信息数组,而我们需要的坐标信息就包含在这个数组里;这里我们需要获取到的坐标是相对于组件左上角的,即localX和localY,这样也方便我们设置点击范围来触发色块的翻转(获取坐标这块详细可看我上一篇文章)其次,参数a和b分别代表传递的方格的行列值。

index.js

  1. var localx; 
  2. var localy; 
  3. var a; 
  4. var b; 
  1. touchstartfunc(msg) { 
  2.         localx=msg.touches[0].localX; 
  3.         localy=msg.touches[0].localY; 
  4.     }, 
  5. getgrid() { 
  6.     if (MARGIN < localx && localx < (MARGIN + SIDELEN)) { 
  7.         b = 0; 
  8.     } 
  9.     if (1 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 2 * (MARGIN + SIDELEN)) { 
  10.         b = 1; 
  11.     } 
  12.     if (2 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 3 * (MARGIN + SIDELEN)) { 
  13.         b = 2; 
  14.     } 
  15.     if (3 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 4 * (MARGIN + SIDELEN)) { 
  16.         b = 3; 
  17.     } 
  18.     if (4 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 5 * (MARGIN + SIDELEN)) { 
  19.         b = 4; 
  20.     } 
  21.     if (5 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 6 * (MARGIN + SIDELEN)) { 
  22.         b = 5; 
  23.     } 
  24.     if (6 * (MARGIN + SIDELEN) + MARGIN < localx && localx < 7 * (MARGIN + SIDELEN)) { 
  25.         b = 6; 
  26.     } 
  27.     if (MARGIN < localy && localy < (MARGIN + SIDELEN)) { 
  28.         a = 0; 
  29.     } 
  30.     if (1 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 2 * (MARGIN + SIDELEN)) { 
  31.         a = 1; 
  32.     } 
  33.     if (2 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 3 * (MARGIN + SIDELEN)) { 
  34.         a = 2; 
  35.     } 
  36.     if (3 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 4 * (MARGIN + SIDELEN)) { 
  37.         a = 3; 
  38.     } 
  39.     if (4 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 5 * (MARGIN + SIDELEN)) { 
  40.         a = 4; 
  41.     } 
  42.     if (5 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 6 * (MARGIN + SIDELEN)) { 
  43.         a = 5; 
  44.     } 
  45.     if (6 * (MARGIN + SIDELEN) + MARGIN < localy && localy < 7 * (MARGIN + SIDELEN)) { 
  46.         a = 6; 
  47.     } 

2.点击的方格及其上下左右都变色

change控制变色,若值为0则变为1,若为1则变为0。方格的横纵坐标都是0~6,changeOneGrids第一个判断是被点击的方格的变色,第二个判断是右边的格子是否在棋盘上,假如被点击的格子是右边界,则判断为假,右格子不会变色。以此类推对左格,上格,下格作判断,最后调用drawGrids绘制方格。

index.js

  1. change(x,y){ 
  2.      
  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.      this.drawGrids(); 

 最后在点击事件上调用getgrid和changeOneGrids

  1. click(){ 
  2.       this.getgrid(); 
  3.       this.changeOneGrids(a,b); 
  4.   } 

 到此,效果如下

【木棉花】:手机游戏——黑白翻棋-鸿蒙HarmonyOS技术社区

3.生成随机打乱的棋盘(游戏题目)

先将数组以坐标形式存储在array,共49组坐标,然后随机生成0~48的整数,取该组坐标中第一个元素作为横坐标,第二个元素作为纵坐标,这里设置的是随机生成点击10下后的题目(后期为在此基础上以不同次数来设置不同难度)

  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 < 10; 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.     } 

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

  1. onShow(){ 
  2.        this.initGrids(); 
  3.        this.drawGrids(); 
  4.    }, 

四.设置步数显示及游戏的重新开始

1.步数显示

步数这个文本组件显示在棋盘上方,故在index.hml文件里,将以下代码放在canvas上方,其中由于步数是个变量,故以currentSteps的值的变动来动态更新步数

index.hml

  1. <text class="steps"
  2.         当前步数:{{currentSteps}} 
  3.     </text> 

 index.css

  1. .steps { 
  2.     font-size: 21px; 
  3.     text-align:center; 
  4.     width:200px; 
  5.     height:39px; 
  6.     letter-spacing:0px; 
  7.     margin-top:10px; 
  8.     background-color: #BBAD20; 

 由于initGrids会随机点击10下,为了使步数清零,在data里给它赋初值-10

index.js

  1. data: { 
  2.        currentSteps:-10, 
  3.    }, 

 在changeOneGrids上添加以下代码,使每次点击步数加一

  1. this.currentSteps+=1; 

2.游戏的重新开始

重新开始的按钮在棋盘的下方,故index.hml文件中在canvas下方添加代码

  1. <input type="button" value="重新开始" class="bit" onclick="restartGame"/> 

index.css

  1. .bit { 
  2.     top: 20px; 
  3.     width: 220px; 
  4.     height: 40px; 
  5.     background-color: #AD9D8F; 
  6.     font-size: 25px; 
  7.     margin-top: 10px; 

游戏重新开始时,会再次随机生成游戏题目,并且步数重置为0

index.js

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

五.游戏成功的设置

游戏成功的弹窗是显示在棋盘(canvas)上方的,该实现可通过添加一个堆叠容器stack,将游戏成功的文本组件放在画布组件之后;其次,“游戏成功”的显示在初始时不会显示,所以要设置属性show,对应设一个布尔型变量isShow,并令isShow的初始值为假,游戏成功时其值为真,当为真时就可以显示了

index.hml

  1. <stack class="stack"
  2.        <canvas class="canvas" ref="canvas" onclick="click" @touchstart='touchstartfunc'> </canvas> 
  3.        <div class="subcontainer" show="{{isShow}}"
  4.            <text class="gameover"
  5.                游戏成功 
  6.            </text> 
  7.        </div> 
  8.    </stack> 

index.css

  1. .stack{ 
  2.     width: 320px; 
  3.     height: 320px; 
  4.     margin-top: 10px; 
  5.  
  6. .subcontainer{ 
  7.     left: 50px; 
  8.     top: 95px; 
  9.     width: 220px; 
  10.     height: 130px; 
  11.     justify-content: center; 
  12.     align-content: center; 
  13.     background-color: #E9C2A6; 
  14.  
  15. .gameover{ 
  16.     font-size: 38px; 
  17.     color:black; 
  18.     justify-content: center; 
  19.     margin-top: 30px; 

 index.js

  1. data: { 
  2.        currentSteps:-10, 
  3.        isShow:false 
  4.    }, 
  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中给“步数增加”添加判断条件

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

在restartGame中添加代码

  1. this.isShow = false

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

结语

以上就是我这次的小分享啦❀❀!后续会有该游戏的进阶版,我会不断完善的(ง •_•)ง

文章相关附件可以点击下面的原文链接前往下载

https://harmonyos.51cto.com/resource/1288

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2022-08-22 17:28:34

ArkUI鸿蒙

2021-09-17 14:47:33

鸿蒙HarmonyOS应用

2020-12-14 09:58:28

鸿蒙HarmonyOS手表游戏

2022-11-01 15:17:48

JS鸿蒙小游戏

2022-12-19 16:56:48

游戏开发鸿蒙

2013-07-24 10:10:08

2012-12-28 09:54:29

手机游戏产品设计

2024-01-15 07:47:09

井字棋游戏编程练习Python

2013-04-07 14:36:19

手机游戏手机游戏引擎

2022-10-31 15:22:37

JS鸿蒙小游戏

2012-05-04 10:24:18

手机游戏微软

2013-03-29 11:47:37

2016-12-29 13:34:04

阿尔法狗围棋计算机

2009-04-17 09:17:04

2013-07-31 10:34:30

手机游戏营销手游市场盈利

2011-05-13 13:35:42

手机游戏游戏营销iOS

2011-10-18 09:46:16

诺基亚NFC手机游戏

2016-04-14 16:48:56

WOT2016运维与开发者大会51CTO

2016-04-13 13:56:43

IT讨厌理由

2022-03-17 15:28:18

五子棋HarmonyOSJSAPI
点赞
收藏

51CTO技术栈公众号