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

一个简单的JS鸿蒙小游戏——飞行棋页面搭建

时间：2023-03-12 12:30:17 科技观察

了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言飞行棋大家应该都玩过。红、绿、黄、蓝玩家轮流掷骰子移动棋子，争取先到终点，过程中注意自己的棋子不被击落。今天就带大家学习如何完成飞行棋游戏的简单布局。项目结构页面的布局并不复杂。分为四个部分：左边的飞行记录，中间的棋盘，右边的骰子和按钮操作区，游戏结束的排行榜。左侧飞行记录：即当前各营地的记录统计。除了直接关系到游戏胜负的到达终点的棋子数量外，还记录了双方击落敌机的数量。这也是游戏的乐趣之一。——飞行记录——派系|击落敌机|飞行进度{{$item.hit}}{{$item.progress}}/4

中间棋盘：背景图片为飞行棋盘，棋盘上有4×4=16棋子，而棋子的位置在游戏过程中是动态变化的，所以使用绝对定位，将棋子的坐标赋给棋子的left和top属性。相应区域的棋子方位也会发生变化，否则棋子总是一个方向，有点死板。另外，棋子能否走动，与掷出的骰子数量和飞行器的状态有关。disabled属性用于控制棋子是否可以交互移动。

右侧操作区：文字提示本轮轮到哪个阵营，点击骰子随机掷1~6，重启开始按钮，将其触发事件设置为长按事件，避免误操作touch长按重??启{{roundtitle}}

排行榜：默认隐藏，当游戏结束，会显示各阵营的排名和所花费的时间。

————游戏排名————

{{$item.rank}}

??{{$item.round}}

走棋准备我们还需要新建一个js文件作为棋盘的地图，记录每个棋格的序号、坐标、角度、颜色等属性。文件格式如下：//MapData.jsexportletMapData=[{index:0,//网格序号x:85,//网格X轴y:63,//网格Y轴角度：270,//棋子方位角（顺时针）color:"blue",//gridcolorchess:[],//在这个棋子gridchesspieces},{index:1,x:79,y:65,angle:270,color:"red",chess:[],},…………{index:95,x:86.45,y:14.1,angle:180,color:"blue",chess:[],},]导出默认地图数据；序号索引对应的棋盘下标用于查找棋盘；坐标的x和y分别赋值给走到棋盘上的棋子的left和top属性；angle用于设置棋子在棋格上的方位角；color记录棋格的颜色，当棋子走到相同颜色的格子时，会触发位移事件；棋子数组chess[]用于记录当前回合有哪些棋子在格子上。如果是相同颜色的棋子，则数组长度加一；如果是不同颜色的棋子，则触发踩踏事件，清除并重置原数组中的元素，写入新的棋子。由于每个阵营的棋子都有不同的棋路，所以需要先设置它们对应的路，用上面设置的棋格下标分别设置4条路。//各种飞机的飞行路线letRoute=[[76,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,52,53,54,55,56,57],//红线[81,13,14,15,16,17,18,19,20,21、22、23、24、25、26、27、28、29、30、31、32、33、34、35、36、37、38、39、40、41、42、43、44、45、46,47,48,49,50,51,0,1,2,3,4,5,6,7,8,9,10,58,59,60,61,62,63],//绿色行[86,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49、50、51、0、1、2、3、4、5、6、7、8、9、10、11、12、13、14、15、16、17、18、19、20、21、22,23,64,65,66,67,68,69],//黄线[91,39,40,41,42,43,44,45,46,47,48,49,50,51,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,70,71,72,73,74,75]//蓝线]待定延续至此，飞行棋小游戏的页面布局就做好了，关键的游戏逻辑会在下一篇文章中讲解。了解更多开源内容，请访问：开源基础软件社区//ost.51cto.com。

上一篇：五款全新Python框架，让你快速体验！_0

下一篇：Objective-C在编程语言中的受欢迎程度持续下滑_0

一个简单的JS鸿蒙小游戏——飞行棋页面搭建相关文章

最新推荐

猜你喜欢