当前位置: 首页 > 科技观察

七夕打青蛙——HarmonyOS服务卡牌游戏

时间:2023-03-11 22:02:54 科技观察

更多内容请访问:Harmonyos技术社区https://harmonyos.51cto.com,整天都听到青蛙的声音。吃了一整天的狗粮,有些卡顿,决定加班,用服务卡实现了一个简单的小游戏:打七夕蛙!游戏很简单,但是玩起来真的很爽!效果展示视频编写效果视频效果图的过程。更改程序标签和程序图标。修改resources文件下zh.element中的string.json如下,将应用名称改为“七夕蛙”,主页面也由“HelloWorld!”改为“七夕蛙”。变成“再见世界!”修改config.json文件中icon的值,引用media中的青蛙。创建JS卡片写卡片样式游戏卡片的结构非常非常非常简单,就是一个div容器,通过设置div容器的背景图来实现游戏效果。playGame卡片的hml代码如下:"onclick="messageEvent">

GamePanel的样式有点复杂,其实很简单。需要设置两个变量,score和countdown,这里score设置为上下结构。hml代码如下:
SCORE{{score}}
{{countDown}}
开始停止
给变量赋初值在playGame卡的index.json文件中,修改"data"如下图,默认一开始没有青蛙出现,在GamePanel卡片的index.json文件中,如下图修改“data”,设置卡片的动作事件,“actions”数组是一个所有事件的集合,后面是每个事件的名称,名称包含包含事件的类型“action”和参数“params”。在playGame卡的index.json文件中,修改“actions”如图在GamePanel卡片的index.json文件中,如下图修改“actions”,写入游戏部分七夕青蛙的随机出现七夕青蛙的出现是通过设置背景图来实现的上面说的div容器,所以你可以通过生成随机数来随机设置div容器的背景来实现游戏过程,所以你需要ed把div的背景设置为变量,加上onclick标签。//两个背景图片的路径privatestaticfinalStringfrog="url(\"/common/frog1.png\")";privatestaticfinalStringhole="url(\"/common/hole.png\")";publicStringrand_bg(){Stringbg;doublerandnumber=Math.random();if(randnumber>0.65)//当随机数大于0.65时,返回的字符串对应青蛙图。这个值可以自己设置bg=frog;elsebg=hole;returnbg;}创建一个数据体来存储卡信息,使用MAP存储是哪张卡发送了回调,需要记录卡信息:卡名,卡片ID、卡片相关参数等这里写一个卡片数据类,以1*2格式存储卡片信息。publicclassGameWigetData{publicStringbackground;publiclongFormId;publicGameWigetData(){super();}}publicstaticMapgameWidgetDataMap=newHashMap<>()//key是FormId,value是数据体修改onCreateForm()方法onCreateForm()方法中的两个案件被称为。第一个是向上滑动呼出卡片时,此时向上滑动的卡片是哪种类型的卡片,会调用一次onCreateForm()方法生成该类型的卡片;第二种情况是长按应用,然后点击“服务卡片”,此时会显示该应用的所有卡片,每张卡片都会回调一次onCreateForm()方法生成一张卡片。当其中一张卡片被选中并添加到桌面时,其他卡片会回调onDeleteForm()方法删除卡片。所有的卡片都是通过调用同一个方法一起生成的,所以需要判断卡片的名称来判断卡片的类型。在onCreateForm()中添加如下代码:if(formName.equals("GamePanel"))//如果是游戏控制面板卡,则有如下操作{if(gamePanelFormId==0){//如果两个是placed,那么只有第一个placed有用,游戏控制面板应该只需要一个gamePanelFormId=formId;}}//如果是游戏卡,那么创建一个databody实例,把它的cardid和databody实例一起传过去在Mapelseif(formName.equals("playGame")){GameWigetDatagameWidgetData=newGameWigetData();gameWigetDataMap.put(formId,gameWidgetData);//System.out.println("formID->"+formId);}修改onDeleteForm()方法中的onDeleteForm()方法,删除卡片时添加两个设置很重要。一开始我没有设置游戏卡,结果会报错没有对应的FormId。查看卡片时,所有卡片都会调用onCreateForm()方法,然后将12张卡片的ID全部写入Map中,但是当其中一张卡片放到桌子上,其他卡片又回调onDeleteForm()删除,这12张牌的信息没有从Mapremove中删除。这样会导致Map中并不是每个FormId都有对应的卡片。if(gamePanelFormId==formId){gamePanelFormId=0;}else{gameWigetDataMap.remove(formId);写入变量的update方法经常用于更新和修改卡上的变量,所以在操作之前进行如下操作,我们先写一个修改变量的方法。//当更新值为字符串时;}catch(Exceptione){System.out.println(e.getMessage());}}//当更新值为整数时publicvoidupdateWidget(longformId,Stringkey,intvalue){updateWidget(formId,key,String.valueOf(value));}修改onTriggerFormEvent()方法在这个游戏中,一共需要响应三个点击事件:开始按钮,停止按钮,青蛙。同样,这三个事件共享一个回调方法,所以需要通过事件携带的参数来判断是哪个事件回调了方法。在onTriggerFormEvent()中添加如下代码://接受事件传递的参数ZSONObjectzsonObject=ZSONObject.stringToZSON(message);Stringmessage1=zsonObject.getString("message");//如果是start触发的事件key,把startflag设置为trueif(message1.equals("start")){startFlag=true;System.out.println("start");}//如果是停止键触发的事件,将开始标志设置为false,并重置面板上的数据elseif(message1.equals("stop")){startFlag=false;score=0;countdown1=60;updateWidget(gamePanelFormId,"score",score);updateWidget(gamePanelFormId,"countdown",countdown1);}//如果是“青蛙击中”事件else{if(startFlag)//如果游戏进行中{//判断当前面板是否是青蛙GameWigetDatagameFormData=gameWigetDataMap.get(formId);if(gameFormData.background.equals(frog)){score=score+10;//获得额外十分System.out.println("当前分数为"+score);gameFormData.background=hole;//击中后重置为空洞");}在onStart()方法中编写游戏线程游戏线程添加如下:if(gameThread==null){//如果游戏线程还没有创建,则创建游戏线程gameThread=newThread(()->{while(true){try{Thread.sleep(50);if(startFlag){//为所有卡片随机设置背景for(GameWigetDatagameWigetData:gameWigetDataMap.values()){gameWigetData.background=tool.rand_bg();}//更新所有1*2卡片longgameWigetFormId:gameWigetDataMap.keySet()){GameWigetDatagameWigetData=gameWigetDataMap.get(gameWigetFormId);updateWidget(gameWigetFormId,"background",gameWigetData.background);}}Thread.sleep(750);}catch(Exceptione){System.out.println(e.getMessage());startFlag=false;}}});gameThread.start();}写倒计时线程在onStart()方法中写倒计时线程如下:if(countDownThread==null){countDownThread=newThread(newRunnable(){publicvoidrun(){while(true){try{Thread.sleep(50);if(startFlag){if(countdown1>0){updateWidget(gamePanelFormId,"countdown",countdown1);countdown1--;System.out.println("现在剩余时间为"+countdown1);}else//countdown==0,reset{updateWidget(gamePanelFormId,"countdown",0);startFlag=false;countdown1=60;System.out.println("Gameover!");}}Thread.sleep(1000);}catch(Exceptione){System.out.println(e.getMessage());}}}});countDownThread.start();}项目的小坑1.score要设置成静态变量,否则会被释放,导致打了很多次也只有10分,却无法累积2.在onDeleteForm()方法,记得把被删除卡片的ID从Map中移除。最后祝有情人终成眷属,单身者早日脱单!也感谢为我担心的一群朋友!(文末附有单独压缩包)Card_Game_the_frog.zip更多内容请访问:与华为官方共建的鸿蒙科技社区https://harmonyos.51cto.com