鸿蒙开发案例:推箱子

推箱子游戏(Sokoban)的实现。游戏由多个单元格组成,每个单元格可以是透明的、墙或可移动的区域。游戏使用Cell类定义单元格的状态,如类型(透明、墙、可移动区域)、圆角大小及坐标偏移。而MyPosition类则用于表示位置信息,并提供设置位置的方法。

游戏主体结构Sokoban定义了游戏的基本元素,包括网格单元格的状态、胜利位置、箱子的位置以及玩家的位置等,并提供了初始化游戏状态的方法。游戏中还包含有动画效果,当玩家尝试移动时,会检查目标位置是否允许移动,并根据情况决定是否需要移动箱子。此外,游戏支持触摸输入,并在完成一次移动后检查是否所有箱子都在目标位置上,如果是,则游戏胜利,并显示一个对话框展示游戏用时。

【算法分析】

1. 移动玩家和箱子算法分析:

算法思路:根据玩家的滑动方向,计算新的位置坐标,然后检查新位置的合法性,包括是否超出边界、是否是墙等情况。如果新位置是箱子,则需要进一步判断箱子后面的位置是否为空,以确定是否可以推动箱子。

实现逻辑:通过定义方向对象和计算新位置坐标的方式,简化了移动操作的逻辑。在移动过程中,需要考虑动画效果的控制,以提升用户体验。

movePlayer(direction: string) {
    const directions: object = Object({
      'right': Object({ dx: 0, dy:  1}),
      'left': Object({ dx:0 , dy:-1 }),
      'down': Object({ dx: 1, dy: 0 }),
      'up': Object({ dx: -1, dy: 0 })
    });
    const dx: number = directions[direction]['dx']; //{ dx, dy }
    const dy: number = directions[direction]['dy']; //{ dx, dy }
    const newX: number = this.playerPosition.x + dx;
    const newY: number = this.playerPosition.y + dy;

    // 检查新位置是否合法
    // 箱子移动逻辑...

    // 动画效果控制...
}

2. 胜利条件判断算法分析:

算法思路:遍历所有箱子的位置,检查每个箱子是否在一个胜利位置上,如果所有箱子都在胜利位置上,则判定游戏胜利。

实现逻辑:通过嵌套循环和数组方法,实现了对胜利条件的判断。这种算法适合用于检查游戏胜利条件是否满足的场景。

isVictoryConditionMet(): boolean {
    return this.cratePositions.every(crate => {
        return this.victoryPositions.some(victory => crate.x === victory.x && crate.y === victory.y);
    });
}

3. 动画控制算法分析:

算法思路:利用动画函数实现移动过程中的动画效果,包括移动过程的持续时间和结束后的处理逻辑。

实现逻辑:通过嵌套调用动画函数,实现了移动过程中的动画效果控制。这种方式可以使移动过程更加流畅和生动。

animateToImmediately({
    duration: 150,
    onFinish: () => {
        animateToImmediately({
            duration: 0,
            onFinish: () => {
                // 动画结束后的处理...
            }
        }, () => {
            // 动画过程中的处理...
        });
    }
}, () => {
    // 动画效果控制...
});

4. 触摸操作和手势识别算法分析:

算法思路:监听触摸事件和手势事件,识别玩家的滑动方向,然后调用相应的移动函数处理玩家和箱子的移动。

实现逻辑:通过手势识别和事件监听,实现了玩家在屏幕上滑动操作的识别和响应。这种方式可以使玩家通过触摸操作来控制游戏的进行。

gesture(
    SwipeGesture({ direction: SwipeDirection.All })
        .onAction((_event: GestureEvent) => {
            // 手势识别和处理逻辑...
        })
)

【完整代码】

import { promptAction } from '@kit.ArkUI' // 导入ArkUI工具包中的提示操作模块
@ObservedV2 // 观察者模式装饰器
class Cell { // 定义游戏中的单元格类
  @Trace // 跟踪装饰器,标记属性以被跟踪
  type: number = 0; // 单元格类型,0:透明,1:墙,2:可移动区域
  @Trace topLeft: number = 0; // 左上角圆角大小
  @Trace topRight: number = 0; // 右上角圆角大小
  @Trace bottomLeft: number = 0; // 左下角圆角大小
  @Trace bottomRight: number = 0; // 右下角圆角大小
  @Trace x: number = 0; // 单元格的X坐标偏移量
  @Trace y: number = 0; // 单元格的Y坐标偏移量
  constructor(cellType: number) { // 构造函数
    this.type = cellType; // 初始化单元格类型
  }
}
@ObservedV2 // 观察者模式装饰器
class MyPosition { // 定义位置类
  @Trace // 跟踪装饰器,标记属性以被跟踪
  x: number = 0; // X坐标
  @Trace y: number = 0; // Y坐标
  setPosition(x: number, y: number) { // 设置位置的方法
    this.x = x; // 更新X坐标
    this.y = y; // 更新Y坐标
  }
}
@Entry // 入口装饰器
@Component // 组件装饰器
struct Sokoban  { // 定义游戏主结构
  cellWidth: number = 100; // 单元格宽度
  @State grid: Cell[][] = [ // 游戏网格状态
    [new Cell(0), new Cell(1), new Cell(1), new Cell(1), new Cell(1), new Cell(1)],
    [new Cell(1), new Cell(1), new Cell(2), new Cell(2), new Cell(2), new Cell(1)],
    [new Cell(1), new Cell(2), new Cell(2), new Cell(2), new Cell(1), new Cell(1)],
    [new Cell(1), new Cell(2), new Cell(2), new Cell(2), new Cell(2), new Cell(1)],
    [new Cell(1), new Cell(1), new Cell(2), new Cell(2), new Cell(2), new Cell(1)],
    [new Cell(0), new Cell(1), new Cell(1), new Cell(1), new Cell(1), new Cell(1)],
  ];
  @State victoryPositions: MyPosition[] = [new MyPosition(), new MyPosition()]; // 胜利位置数组
  @State cratePositions: MyPosition[] = [new MyPosition(), new MyPosition()]; // 箱子位置数组
  playerPosition: MyPosition = new MyPosition(); // 玩家位置
  @State screenStartX: number = 0; // 触摸开始时的屏幕X坐标
  @State screenStartY: number = 0; // 触摸开始时的屏幕Y坐标
  @State lastScreenX: number = 0; // 触摸结束时的屏幕X坐标
  @State lastScreenY: number = 0; // 触摸结束时的屏幕Y坐标
  @State startTime: number = 0; // 游戏开始时间
  isAnimationRunning: boolean = false // 动画是否正在运行
  aboutToAppear(): void { // 游戏加载前的准备工作
    // 初始化某些单元格的圆角大小...
    this.grid[0][1].topLeft = 25;
    this.grid[0][5].topRight = 25;
    this.grid[1][0].topLeft = 25;
    this.grid[4][0].bottomLeft = 25;
    this.grid[5][1].bottomLeft = 25;
    this.grid[5][5].bottomRight = 25;
    this.grid[1][1].bottomRight = 10;
    this.grid[4][1].topRight = 10;
    this.grid[2][4].topLeft = 10;
    this.grid[2][4].bottomLeft = 10;
    this.initializeGame(); // 初始化游戏
  }
  initializeGame() { // 初始化游戏状态
    this.startTime = Date.now(); // 设置游戏开始时间为当前时间
    // 设置胜利位置和箱子位置...
    this.startTime = Date.now(); // 设置游戏开始时间为当前时间
    this.victoryPositions[0].setPosition(1, 3);
    this.victoryPositions[1].setPosition(1, 4);
    this.cratePositions[0].setPosition(2, 2);
    this.cratePositions[1].setPosition(2, 3);
    this.playerPosition.setPosition(1, 2);
  }
  isVictoryPositionVisible(x: number, y: number): boolean { // 判断位置是否为胜利位置
    return this.victoryPositions.some(position => position.x === x && position.y === y); // 返回是否有胜利位置与给定位置匹配
  }
  isCratePositionVisible(x: number, y: number): boolean { // 判断位置是否为箱子位置
    return this.cratePositions.some(position => position.x === x && position.y === y); // 返回是否有箱子位置与给定位置匹配
  }
  isPlayerPositionVisible(x: number, y: number): boolean { // 判断位置是否为玩家位置
    return this.playerPosition.x === x && this.playerPosition.y === y; // 返回玩家位置是否与给定位置相同
  }

  movePlayer(direction: string) {
    const directions: object = Object({
      'right': Object({ dx: 0, dy:  1}),
      'left': Object({ dx:0 , dy:-1 }),
      'down': Object({ dx: 1, dy: 0 }),
      'up': Object({ dx: -1, dy: 0 })
    });
    const dx: number = directions[direction]['dx']; //{ dx, dy }
    const dy: number = directions[direction]['dy']; //{ dx, dy }
    const newX: number = this.playerPosition.x + dx;
    const newY: number = this.playerPosition.y + dy;

    const targetCell = this.grid[newX][newY];

    // 检查新位置是否超出边界
    if (!targetCell) {
      return;
    }

    // 如果新位置是墙,则不能移动
    if (targetCell.type === 1) {
      return;
    }

    let crateIndex = -1;
    if (this.isCratePositionVisible(newX, newY)) {
      const crateBehindCell = this.grid[newX + dx][newY + dy];
      if (!crateBehindCell || crateBehindCell.type !== 2) {
        return;
      }

      crateIndex = this.cratePositions.findIndex(crate => crate.x === newX && crate.y === newY);
      if (crateIndex === -1 || this.isCratePositionVisible(newX + dx, newY + dy)) {
        return;
      }
    }

    if (this.isAnimationRunning) {
      return
    }
    this.isAnimationRunning = true
    animateToImmediately({
      duration: 150,
      onFinish: () => {
        animateToImmediately({
          duration: 0,
          onFinish: () => {
            this.isAnimationRunning = false
          }
        }, () => {
          if (crateIndex !== -1) {
            this.grid[this.cratePositions[crateIndex].x][this.cratePositions[crateIndex].y].x = 0;
            this.grid[this.cratePositions[crateIndex].x][this.cratePositions[crateIndex].y].y = 0;
            this.cratePositions[crateIndex].x += dx;
            this.cratePositions[crateIndex].y += dy;
          }
          this.grid[this.playerPosition.x][this.playerPosition.y].x = 0
          this.grid[this.playerPosition.x][this.playerPosition.y].y = 0


          this.playerPosition.setPosition(newX, newY);

          // 检查是否获胜
          const isAllCrateOnTarget = this.cratePositions.every(crate => {
            return this.victoryPositions.some(victory => crate.x === victory.x && crate.y === victory.y);
          });

          if (isAllCrateOnTarget) {
            console.log("恭喜你,你赢了!");
            // 可以在这里添加胜利处理逻辑
            promptAction.showDialog({
              // 显示对话框
              title: '游戏胜利!', // 对话框标题
              message: '恭喜你,用时:' + ((Date.now() - this.startTime) / 1000).toFixed(3) + '秒', // 对话框消息
              buttons: [{ text: '重新开始', color: '#ffa500' }] // 对话框按钮
            }).then(() => { // 对话框关闭后执行
              this.initializeGame(); // 重新开始游戏
            });
          }

        })
      }
    }, () => {
      this.grid[this.playerPosition.x][this.playerPosition.y].x = dy * this.cellWidth;
      this.grid[this.playerPosition.x][this.playerPosition.y].y = dx * this.cellWidth;
      if (crateIndex !== -1) {
        this.grid[this.cratePositions[crateIndex].x][this.cratePositions[crateIndex].y].x = dy * this.cellWidth;
        this.grid[this.cratePositions[crateIndex].x][this.cratePositions[crateIndex].y].y = dx * this.cellWidth;
      }
      console.info(`dx:${dx},dy:${dy}`)
    })
  }

  build() {
    Column({ space: 20 }) {
      //游戏区
      Stack() {
        //非零区加瓷砖
        Column() {
          ForEach(this.grid, (row: [], rowIndex: number) => {
            Row() {
              ForEach(row, (item: Cell, colIndex: number) => {
                Stack() {
                  Text()
                    .width(`${this.cellWidth}lpx`)
                    .height(`${this.cellWidth}lpx`)
                    .backgroundColor(item.type == 0 ? Color.Transparent :
                      ((rowIndex + colIndex) % 2 == 0 ? "#cfb381" : "#e1ca9f"))
                    .borderRadius({
                      topLeft: item.topLeft > 10 ? item.topLeft : 0,
                      topRight: item.topRight > 10 ? item.topRight : 0,
                      bottomLeft: item.bottomLeft > 10 ? item.bottomLeft : 0,
                      bottomRight: item.bottomRight > 10 ? item.bottomRight : 0
                    })
                  //如果和是胜利坐标,显示叉号
                  Stack() {
                    Text()
                      .width(`${this.cellWidth / 2}lpx`)
                      .height(`${this.cellWidth / 8}lpx`)
                      .backgroundColor(Color.White)
                    Text()
                      .width(`${this.cellWidth / 8}lpx`)
                      .height(`${this.cellWidth / 2}lpx`)
                      .backgroundColor(Color.White)
                  }.rotate({ angle: 45 })
                  .visibility(this.isVictoryPositionVisible(rowIndex, colIndex) ? Visibility.Visible : Visibility.None)

                }
              })
            }
          })
        }

        Column() {
          ForEach(this.grid, (row: [], rowIndex: number) => {
            Row() {
              ForEach(row, (item: Cell, colIndex: number) => {


                //是否显示箱子
                Stack() {
                  Text()
                    .width(`${this.cellWidth}lpx`)
                    .height(`${this.cellWidth}lpx`)
                    .backgroundColor(item.type == 1 ? "#412c0f" : Color.Transparent)
                    .borderRadius({
                      topLeft: item.topLeft,
                      topRight: item.topRight,
                      bottomLeft: item.bottomLeft,
                      bottomRight: item.bottomRight
                    })
                  Text('箱')
                    .fontColor(Color.White)
                    .textAlign(TextAlign.Center)
                    .fontSize(`${this.cellWidth / 2}lpx`)
                    .width(`${this.cellWidth - 5}lpx`)
                    .height(`${this.cellWidth - 5}lpx`)
                    .backgroundColor("#cb8321")//#995d12   #cb8321
                    .borderRadius(10)
                    .visibility(this.isCratePositionVisible(rowIndex, colIndex) ? Visibility.Visible : Visibility.None)
                  Text('我')
                    .fontColor(Color.White)
                    .textAlign(TextAlign.Center)
                    .fontSize(`${this.cellWidth / 2}lpx`)
                    .width(`${this.cellWidth - 5}lpx`)
                    .height(`${this.cellWidth - 5}lpx`)
                    .backgroundColor("#007dfe")//#995d12   #cb8321
                    .borderRadius(10)
                    .visibility(this.isPlayerPositionVisible(rowIndex, colIndex) ? Visibility.Visible : Visibility.None)
                }
                .width(`${this.cellWidth}lpx`)
                .height(`${this.cellWidth}lpx`)
                .translate({ x: `${item.x}lpx`, y: `${item.y}lpx` })

              })
            }
          })
        }
      }

      Button('重新开始').clickEffect({ level: ClickEffectLevel.MIDDLE })
        .onClick(() => {
          this.initializeGame();
        });

    }
    .width('100%')
    .height('100%')
    .backgroundColor("#fdb300")
    .padding({ top: 20 })
    .onTouch((e) => {
      if (e.type === TouchType.Down && e.touches.length > 0) { // 触摸开始,记录初始位置
        this.screenStartX = e.touches[0].x;
        this.screenStartY = e.touches[0].y;
      } else if (e.type === TouchType.Up && e.changedTouches.length > 0) { // 当手指抬起时,更新最后的位置
        this.lastScreenX = e.changedTouches[0].x;
        this.lastScreenY = e.changedTouches[0].y;
      }
    })
    .gesture(
      SwipeGesture({ direction: SwipeDirection.All })// 支持方向中 all可以是上下左右
        .onAction((_event: GestureEvent) => {
          const swipeX = this.lastScreenX - this.screenStartX;
          const swipeY = this.lastScreenY - this.screenStartY;
          // 清除开始位置记录,准备下一次滑动判断
          this.screenStartX = 0;
          this.screenStartY = 0;
          if (Math.abs(swipeX) > Math.abs(swipeY)) {
            if (swipeX > 0) {
              // 向右滑动
              this.movePlayer('right');
            } else {
              // 向左滑动
              this.movePlayer('left');
            }
          } else {
            if (swipeY > 0) {
              // 向下滑动
              this.movePlayer('down');
            } else {
              // 向上滑动
              this.movePlayer('up');
            }
          }
        })
    )
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/894159.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

三菱PLC如何实现数据排序的分析?

一、分析 将D100到D104中的据从小到大排序结果存在D100到D104中,如D100到D104中存入100,34,27,45,22这5个数据,编写一个子程序,只到通过调用这个子程序就可以实现这5个数据的排序。当然简单的方…

iOS IPA上传到App Store Connect的三种方案详解

引言 在iOS应用开发中,完成开发后的重要一步就是将IPA文件上传到App Store Connect以便进行测试或发布到App Store。无论是使用Xcode进行原生开发,还是通过uni-app、Flutter等跨平台工具生成的IPA文件,上传到App Store的流程都是类似的。苹果…

衡石分析平台系统分析人员手册-应用模版

应用模板​ 应用模板使分析成果能被快速复用,节省应用创作成本,提升应用创作效率。此外应用模板实现了应用在不同环境上快速迁移。 支持应用复制功能 用户可以从现有的分析成果关联到新的分析需求并快速完成修改。 支持应用导出为模板功能 实现多个用户…

数论的第二舞——卡特兰数

当然了,虽然主角是卡特兰数,但是我们该学的数论还是不能落下的,首先先来介绍一个开胃小菜线性筛 1.积性函数: 2.线性筛 线性筛的筛选素数的时间复杂度更低,可以达到O(n)的时间复杂度 将每一轮进行筛选的数 n 表示…

Threejs 实现3D 地图(02)创建3d 地图

"d3": "^7.9.0", "three": "^0.169.0", "vue": "^3.5.10" 地图数据来源&#xff1a; DataV.GeoAtlas地理小工具系列 <script setup> import {onMounted, ref} from vue import * as THREE from three im…

Spring Cloud 解决了哪些问题?

大家好&#xff0c;我是锋哥。今天分享关于【Spring Cloud 解决了哪些问题&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; Spring Cloud 解决了哪些问题&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Spring Cloud 是一个为构建分布式…

汽车建模用什么软件最好?汽车建模渲染建议!

在汽车建模和渲染领域&#xff0c;选择合适的软件对于实现精确的设计与高质量的视觉效果至关重要。那么不少的汽车设计师如何选择合适的建模软件与渲染方案呢&#xff0c;一起来简单看看吧&#xff01; 一、汽车建模用软件推荐 1、Alias Autodesk旗下的Alias系列软件是汽车设…

C语言复习第4章 数组

目录 一、一维数组的创建和初始化1.1数组的创建1.2 变长数组1.3 数组的初始化1.4 全局数组默认初始化为01.5 区分两种字符数组1.6 用sizeof计算数组元素个数1.7 如何访问数组元素1.8 一维数组在内存中的存储(连续存储)1.9 访问数组元素的另一种方式:指针变量1.10 数组越界是运行…

【Linux】平台设备驱动

在设备驱动模型中&#xff0c;引入总线的概念可以对驱动代码和设备信息进行分离。但是驱动中总线的概念是软件层面的一种抽象&#xff0c;与我们SOC中物理总线的概念并不严格相等。 物理总线&#xff1a;芯片与各个功能外设之间传送信息的公共通信干线&#xff0c;其中又包括数…

百度AI图片助手 处理本地图片

import random import time import requests import base64 import os import datetime import numpy as np import cv2 from PIL import Image import argparseclass IMGNetProcess(object):"""百度 图片处理"""def __init__(self, file, kind)…

【计算机网络】HTTP报文详解,HTTPS基于HTTP做了哪些改进?(面试经典题)

HTTP协议基本报文格式 在计算机网络中&#xff0c;HTTP&#xff08;超文本传输协议&#xff09;是应用层的一种协议&#xff0c;用于客户端&#xff08;通常是浏览器&#xff09;和服务器之间的通信。HTTP报文分为请求报文和响应报文&#xff0c;以下是它们的基本格式。 1. H…

Java爬虫API:获取商品详情数据的利器

为什么选择Java爬虫API 强大的库支持&#xff1a;Java拥有丰富的网络编程库&#xff0c;如Apache HttpClient、OkHttp等&#xff0c;这些库提供了强大的HTTP请求功能&#xff0c;使得发送请求和处理响应变得简单。高效的数据处理&#xff1a;Java的数据处理能力&#xff0c;结…

如何给手机换ip地址

在当今数字化时代&#xff0c;IP地址作为设备在网络中的唯一标识&#xff0c;扮演着举足轻重的角色。然而&#xff0c;有时出于隐私保护、网络访问需求或其他特定原因&#xff0c;我们可能需要更改手机的IP地址。本文将详细介绍几种实用的方法&#xff0c;帮助您轻松实现手机IP…

计算力学|采用python进行有限元模拟

从abaqus输出的inp文件中读取节点和单元信息 import meshio mesh meshio.read(Job-3.inp) coords mesh.points###coords即为各个节点的坐标 Edof mesh.cells_dict[triangle]#Edof为三角形单元的节点号 1.单元刚度矩阵 def element_stiffness(n1,coords,E,v,t): node1 c…

目标检测——Cascade R-CNN算法解读

论文&#xff1a; Cascade R-CNN: Delving into High Quality Object Detection (2017.12.3) 链接&#xff1a;https://arxiv.org/abs/1712.00726 Cascade R-CNN: High Quality Object Detection and Instance Segmentation (2019.6.24) 链接&#xff1a;https://arxiv.org/abs…

ubuntu22.04下GStreamer源码编译单步调试

前言 本文会通过介绍在linux平台下的GStreamer的源码编译和单步调试example实例。官网介绍直接通过命令行来安装gstreamer可以参考链接&#xff1a;Installing on Linux。 这种方法安装后&#xff0c;基于gstreamer的程序&#xff0c;单步调试的时候并不会进入到gstreamer源码…

LSTM预测:糖尿病的发生情况

本文为为&#x1f517;365天深度学习训练营内部文章 原作者&#xff1a;K同学啊 本期&#xff0c;做个二维结构化数据的分类预测。提到结构化数据&#xff0c;一般的分类算法常用有&#xff1a;逻辑回归&#xff08;二分类&#xff09;、KNN、SVM、决策树、贝叶斯、随机森林、X…

Jenkins配置流水线任务-实践操作(Pipeline-script)

Jenkins配置流水线任务-实践操作(Pipeline-script) 1、新增jenkins 任务&#xff0c;选择流水线 2、参数化 3、流水线配置 pipeline {agent anystages {stage(aoePlugin_mysql) {steps {echo "xxx&#xff0c;数据库:Mysql"echo "${HOST},${USER_NAME}"b…

王爽汇编语言第三版实验1

前言 本系列的文章是对王爽老师的汇编语言中的实验的解答记录&#xff0c;原书一共有17个实验&#xff0c;由于学校的教学流程只做到了第14个实验&#xff0c;因此本文章只会有前十四个实验的解答记录,还有个比较重要的是&#xff0c;文章中会有原书实验中没有的题目&#xff…

C语言 | Leetcode C语言题解之第477题汉明距离总和

题目&#xff1a; 题解&#xff1a; int totalHammingDistance(int* nums, int numsSize) {int ans 0;for (int i 0; i < 30; i) {int c 0;for (int j 0; j < numsSize; j) {c (nums[j] >> i) & 1;}ans c * (numsSize - c);}return ans; }