|
|
@@ -0,0 +1,263 @@
|
|
|
+import { RouterPage, YTAvoid } from 'basic'
|
|
|
+import { _YtHeader } from '../components/YtComp/_YtHeader'
|
|
|
+
|
|
|
+@ComponentV2
|
|
|
+@RouterPage
|
|
|
+struct chessPage {
|
|
|
+ @Local safeTop: number = AppStorage.get(YTAvoid.SAFE_TOP_KEY) as number
|
|
|
+ @Local safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
|
|
|
+
|
|
|
+ @Local selectTab: number = 0
|
|
|
+ @Local _left: number = 0
|
|
|
+ @Local h: number = 0
|
|
|
+
|
|
|
+ forEach: string[] = ['游戏简介', '棋盘布局', '棋手规则', '游戏策略']
|
|
|
+ areaList: Array<Area> = new Array(4).fill({} as Area)
|
|
|
+ controller: TabsController = new TabsController()
|
|
|
+
|
|
|
+ // 游戏简介
|
|
|
+ description: string = '军棋，又称陆战棋，是我国深受欢迎的棋类游戏之一。游戏模拟两支军队之间的对战，玩家需要运用策略消灭对方棋子或夺取军棋获胜。\n' +
|
|
|
+ '\n' +
|
|
|
+ '游戏通常由两人对弈，分为红蓝两方，每方拥有25个棋子，按照等级排列。玩家通过移动棋子攻击对方，目标是找到并吃掉对方的军旗。\n' +
|
|
|
+ '\n' +
|
|
|
+ '军棋游戏不仅考验玩家的战术思维，还锻炼逻辑推理和记忆能力，是一款兼具娱乐性和思维训练的经典棋类游戏。'
|
|
|
+
|
|
|
+ // 切换下标
|
|
|
+ changeIndex(index: number){
|
|
|
+ this.getUIContext().animateTo({duration: 200}, () => {
|
|
|
+ this.selectTab = index
|
|
|
+ this.controller.changeIndex(index)
|
|
|
+ this._left = this.areaList[index].globalPosition.x as number
|
|
|
+ this.h = this.areaList[index].height as number
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ build() {
|
|
|
+ NavDestination() {
|
|
|
+ Column() {
|
|
|
+ _YtHeader({
|
|
|
+ title: '军旗游戏规则普及',
|
|
|
+ _padding: 0
|
|
|
+ })
|
|
|
+
|
|
|
+ Row(){
|
|
|
+ ForEach(this.forEach, (item: string, index) => {
|
|
|
+ Column(){
|
|
|
+ Text(item)
|
|
|
+ .fontSize(this.selectTab == index ? 16 : 13)
|
|
|
+ .fontWeight(this.selectTab == index ? 500 : 400)
|
|
|
+ .fontColor(this.selectTab == index ? '#415C06' : '#52886F')
|
|
|
+ }
|
|
|
+ .layoutWeight(1)
|
|
|
+ .alignItems(HorizontalAlign.Start)
|
|
|
+ .onClick(() => { this.changeIndex(index) })
|
|
|
+ .onAreaChange((o, n) => {
|
|
|
+ this.areaList[index] = n
|
|
|
+ if(this.h == 0 && this._left == 0 && index == 0){
|
|
|
+ this.changeIndex(0)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ Text()
|
|
|
+ .width(15)
|
|
|
+ .height(3)
|
|
|
+ .borderRadius(16)
|
|
|
+ .backgroundColor('#415C06')
|
|
|
+ .position({ x: this._left + 5, y: this.h + 5})
|
|
|
+ }
|
|
|
+
|
|
|
+ Tabs({controller: this.controller}){
|
|
|
+ ForEach(this.forEach, (item: string, index) => {
|
|
|
+ TabContent(){
|
|
|
+ Column(){
|
|
|
+ List(){
|
|
|
+ ListItem(){
|
|
|
+ if(index == 0) {
|
|
|
+ Text(this.description)
|
|
|
+ .textStyle()
|
|
|
+ } else if(index == 1) {
|
|
|
+ this.chessLayout()
|
|
|
+ } else if(index == 2) {
|
|
|
+ this.chessRule()
|
|
|
+ } else {
|
|
|
+ this.gameStrategy()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .height('100%')
|
|
|
+ .scrollBar(BarState.Off)
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .height("100%")
|
|
|
+ .borderRadius(20)
|
|
|
+ .backgroundColor(Color.White)
|
|
|
+ .padding({left: 20, right: 20, top: 36})
|
|
|
+ }
|
|
|
+ .margin({right: 15})
|
|
|
+ })
|
|
|
+ }
|
|
|
+ .barHeight(0)
|
|
|
+ .width("100%")
|
|
|
+ .layoutWeight(1)
|
|
|
+ .padding({top: 20})
|
|
|
+ .scrollable(false)
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .height('100%')
|
|
|
+ .padding({left: 17, right: 17})
|
|
|
+ .justifyContent(FlexAlign.Start)
|
|
|
+ .alignItems(HorizontalAlign.Start)
|
|
|
+ }
|
|
|
+ .hideTitleBar(true)
|
|
|
+ .padding({ top: this.safeTop, bottom: this.safeBottom })
|
|
|
+ .linearGradient({ colors: [['#FF7FF9C3', 0], ['#FFEEECED', 0.3]]})
|
|
|
+ }
|
|
|
+
|
|
|
+ // 棋盘布局
|
|
|
+ @Builder
|
|
|
+ chessLayout() {
|
|
|
+ Column() {
|
|
|
+ Text('军旗棋盘由 12×5的网格组成，包含行营、大本营、铁道等特殊区域')
|
|
|
+ .textStyle()
|
|
|
+
|
|
|
+ Image($r('app.media.img_chessLayout'))
|
|
|
+ .width('100%')
|
|
|
+ .padding({top: 8})
|
|
|
+
|
|
|
+ Text('示例图')
|
|
|
+ .fontSize(10)
|
|
|
+ .fontWeight(400)
|
|
|
+ .fontColor('#616161')
|
|
|
+ .padding({bottom: 15})
|
|
|
+
|
|
|
+ Column({space: 25}){
|
|
|
+ ForEach(['棋盘布局', '关键区域'], (item: string, index) => {
|
|
|
+ this.title_1(item)
|
|
|
+
|
|
|
+ if(index == 0) {
|
|
|
+ this.title_2('铁路与公路线：', '铁路线是棋子的快行线，棋子在铁路线上可以直线移动任意格数。但不能转弯，除非是工兵。公路线则是慢行线，棋子每次只能移动一格。')
|
|
|
+ this.title_2('行营与大本营：', '行营是棋子的安全区，进入行营的棋子免受攻击，但每次只能移动一格。大本营有两个，一个是军旗的固定位置，另一个可以放置其他棋子，进入大本营的棋子不能再移动')
|
|
|
+ this.title_2('棋子布局：', '棋子布局有一定的限制，如炸弹不能放在第一行，地雷只能放在最后两行，军旗必须放在大本营中1。棋子的布局策略多种多样，常见的有进攻型、防守型和平衡型布局。')
|
|
|
+ } else {
|
|
|
+ this.title_2('九宫：', '棋盘中央的田字区域，是棋盘上的重要战略位置，控制九宫可以有效地控制整个棋盘。')
|
|
|
+ this.title_2('前线（锋线）：', '阵地的第一条线，是战斗的最前沿，棋子的布局和移动直接影响着战斗的进展。')
|
|
|
+ this.title_2('边路：', '阵地侧翼的两条线，分为左边路和右边路，是进攻和防守的重要通道。')
|
|
|
+ this.title_2('底线：', '阵地倒数第二条线，是防守的重要位置，通常布置有地雷和重要棋子。')
|
|
|
+ this.title_2('中腹：', '代表阵地五个行营及其附近四个可步子位置，是棋子的集结地和战略要地.')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .padding({bottom: 21})
|
|
|
+ }
|
|
|
+
|
|
|
+ // 棋子规则
|
|
|
+ @Builder
|
|
|
+ chessRule() {
|
|
|
+ Column({space: 20}) {
|
|
|
+ this.title_2('棋子数量：', '军棋的棋子各方均有25个，分别为军旗、司令、军长各一；师长、旅长、团长、营长、炸弹各二；连长、排长、工兵、地雷各三。', false)
|
|
|
+ this.title_2('吃子规则：', '司令>军长 >师长> 旅长 >团长> 营长 >连长 >排长> 工兵，小棋遇大棋被吃，相同棋子相遇，则同归于尽;工兵能排除地雷，其它棋子不能排雷;炸弹与任何棋子相遇时同归于尽。', false)
|
|
|
+ this.title_2('棋盘常识：', '兵站是棋子的摆放位置。铁路线是棋子的快行线，只要在直线上或弧型弯路子力走步数不限。公路线是慢行线，每次只能移动一步。行营是子力的活的保护区，在行营中的子力可以免受其他任何子力的攻击，行营里的子每次只能移动一步。大本营，其中一个必然是军旗所在位置，另一个可以摆放其他任何子力2。工兵在铁路线上可以走弯道。', false)
|
|
|
+ this.title_2('布子规则：', '炸弹不能放在第一行，地雷只能放在最后两行，军旗只能放在大本营。', false)
|
|
|
+ this.title_2('获胜方法：', '杀光对方所有能移动的棋子则获得胜利。或者一方用工兵挖掉对方三颗地雷后再用该方最小的棋子吃掉对方的军旗，也能获得胜利。如果有一方被逼得无棋可走了，也判定该方输棋。', false)
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .padding({bottom: 21})
|
|
|
+ }
|
|
|
+
|
|
|
+ // 游戏策略
|
|
|
+ @Builder
|
|
|
+ gameStrategy() {
|
|
|
+ Column({space: 25}) {
|
|
|
+ ForEach(['开局策略：', '中局策略：', '残局策略：'], (item: string, index) => {
|
|
|
+ Column({space: 15}){
|
|
|
+ this.title_1(item)
|
|
|
+
|
|
|
+ if(index == 0) {
|
|
|
+ this.title_2('', '合理布置防线，保护军旗和重要棋子')
|
|
|
+ this.title_2('', '利用行营保护关键棋子')
|
|
|
+ this.title_2('', '工兵要保留用于排雷和突袭')
|
|
|
+ this.title_2('', '炸弹要放在关键位置，用于对付对方大子')
|
|
|
+ } else if(index == 1) {
|
|
|
+ this.title_2('', '试探对方棋子分布')
|
|
|
+ this.title_2('', '利用铁路快速调动兵力')
|
|
|
+ this.title_2('', '保护工兵，准备排雷')
|
|
|
+ this.title_2('', '注意保护自己的军旗区域')
|
|
|
+ } else {
|
|
|
+ this.title_2('', '集中优势兵力攻击对方弱点')
|
|
|
+ this.title_2('', '利用工兵进行最后突击')
|
|
|
+ this.title_2('', '保护军旗，防止被偷袭')
|
|
|
+ this.title_2('', '注意棋子配合，形成有效攻击')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .alignItems(HorizontalAlign.Start)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .padding({bottom: 21})
|
|
|
+ }
|
|
|
+
|
|
|
+ @Builder
|
|
|
+ title_1(text: string){
|
|
|
+ Row({space: 5}){
|
|
|
+ Row()
|
|
|
+ .width(3)
|
|
|
+ .height(20)
|
|
|
+ .borderRadius(1.55)
|
|
|
+ .backgroundColor('#415C06')
|
|
|
+
|
|
|
+ Text(text)
|
|
|
+ .fontSize(16)
|
|
|
+ .fontWeight(500)
|
|
|
+ .fontColor('#415C06')
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ }
|
|
|
+
|
|
|
+ @Builder
|
|
|
+ title_2(text: string, description: string, showPoint: boolean = true) {
|
|
|
+ Row({space: 5}){
|
|
|
+ if(showPoint) {
|
|
|
+ Row()
|
|
|
+ .width(6)
|
|
|
+ .aspectRatio(1)
|
|
|
+ .borderRadius(10)
|
|
|
+ .margin({top: 8})
|
|
|
+ .backgroundColor('#FFA001')
|
|
|
+ }
|
|
|
+
|
|
|
+ Text(){
|
|
|
+ Span(text)
|
|
|
+ .fontWeight(500)
|
|
|
+ .fontColor('#333333')
|
|
|
+
|
|
|
+ Span(description)
|
|
|
+ .fontWeight(300)
|
|
|
+ .fontColor('#616161')
|
|
|
+ }
|
|
|
+ .fontSize(14)
|
|
|
+ .lineHeight(21)
|
|
|
+ }
|
|
|
+ .alignItems(VerticalAlign.Top)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@Extend(Text)
|
|
|
+function textStyle(){
|
|
|
+ .fontSize(14)
|
|
|
+ .lineHeight(21)
|
|
|
+ .fontWeight(400)
|
|
|
+ .fontColor('#333333')
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+@Builder
|
|
|
+function chessBuilder() {
|
|
|
+ chessPage()
|
|
|
+}
|
