回复
鸿蒙跨端智能拼图游戏开发指南 原创
进修的泡芙
发布于 2025-6-22 17:01
浏览
0收藏
鸿蒙跨端智能拼图游戏开发指南
一、系统架构设计
基于HarmonyOS的图像处理和分布式技术，构建智能拼图游戏系统：
图像处理层：识别并分割图片为拼图块
游戏逻辑层：管理拼图游戏状态和规则
多人协作层：支持多设备玩家协同完成拼图
跨端同步层：实时同步拼图状态和玩家操作
!https://example.com/harmony-puzzle-game-arch.png
二、核心代码实现
拼图服务封装
// PuzzleGameService.ets
import image from ‘@ohos.multimedia.image’;
import distributedData from ‘@ohos.distributedData’;
import { PlayerInfo, PuzzleGameState, PuzzlePiece } from ‘./PuzzleTypes’;
class PuzzleGameService {
private static instance: PuzzleGameService = null;
private dataManager: distributedData.DataManager;
private gameListeners: GameListener[] = [];
private currentGame: PuzzleGameState | null = null;
private constructor() {
this.initDataManager();
public static getInstance(): PuzzleGameService {
if (!PuzzleGameService.instance) {
PuzzleGameService.instance = new PuzzleGameService();
return PuzzleGameService.instance;
private initDataManager(): void {
this.dataManager = distributedData.createDataManager({
bundleName: 'com.example.puzzlegame',
area: distributedData.Area.GLOBAL,
isEncrypted: true
});
this.dataManager.registerDataListener('puzzle_state_sync', (data) => {
this.handleSyncData(data);
});
public async createGame(imageData: ArrayBuffer, players: PlayerInfo[], difficulty: number = 3): Promise<PuzzleGameState> {
try {
// 分割图片为拼图块
const pieces = await this.splitImage(imageData, difficulty);
// 打乱拼图块位置
const shuffledPieces = this.shufflePieces([...pieces]);
const gameState: PuzzleGameState = {
gameId: Date.now().toString(),
originalImage: imageData,
players: players,
currentPlayer: players[0].deviceId,
pieces: shuffledPieces,
completedPieces: [],
difficulty: difficulty,
startTime: Date.now(),
status: "playing"
};
this.currentGame = gameState;
this.syncGameState(gameState);
return gameState;
catch (err) {
console.error('创建拼图游戏失败:', JSON.stringify(err));
throw err;
}
private async splitImage(imageData: ArrayBuffer, difficulty: number): Promise<PuzzlePiece[]> {
try {
const imageSource = image.createImageSource(imageData);
const imageInfo = await imageSource.getImageInfo();
const pieceWidth = Math.floor(imageInfo.size.width / difficulty);
const pieceHeight = Math.floor(imageInfo.size.height / difficulty);
const pieces: PuzzlePiece[] = [];
for (let row = 0; row < difficulty; row++) {
for (let col = 0; col < difficulty; col++) {
const x = col * pieceWidth;
const y = row * pieceHeight;
// 实际应用中应使用更精确的图像裁剪方法
const pieceData = await this.cropImage(
imageData,
x, y, pieceWidth, pieceHeight
);
pieces.push({
id: {row}_{col},
originalPosition: { row, col },
currentPosition: { x: -1, y: -1 }, // 初始位置在拼图区外
imageData: pieceData,
width: pieceWidth,
height: pieceHeight,
isPlaced: false
});
}
return pieces;
catch (err) {
console.error('分割图片失败:', JSON.stringify(err));
throw err;
}
private async cropImage(imageData: ArrayBuffer, x: number, y: number, width: number, height: number): Promise<ArrayBuffer> {
// 简化的图像裁剪方法（实际应用中应使用更精确的实现）
return new Promise((resolve) => {
setTimeout(() => {
// 模拟裁剪操作
const croppedData = new ArrayBuffer(width height 4); // 假设RGBA格式
resolve(croppedData);
}, 100);
});
private shufflePieces(pieces: PuzzlePiece[]): PuzzlePiece[] {
// 为每个拼图块分配随机位置
const shuffled = pieces.map(piece => {
return {
...piece,
currentPosition: {
x: Math.random() * 300, // 随机x坐标
y: Math.random() * 300 // 随机y坐标
};
});
return shuffled;
public async movePiece(pieceId: string, position: { x: number, y: number }, player: PlayerInfo): Promise<PuzzleGameState> {
if (!this.currentGame) {
throw new Error('当前没有进行中的游戏');
const updatedPieces = this.currentGame.pieces.map(piece => {
if (piece.id === pieceId) {
return {
...piece,
currentPosition: position
};
return piece;
});
const updatedGame: PuzzleGameState = {
...this.currentGame,
pieces: updatedPieces,
currentPlayer: this.getNextPlayerId(player.deviceId)
};
this.currentGame = updatedGame;
this.syncGameState(updatedGame);
// 检查拼图是否完成
this.checkCompletion();
return updatedGame;
public async placePiece(pieceId: string, targetPosition: { row: number, col: number }, player: PlayerInfo): Promise<PuzzleGameState> {
if (!this.currentGame) {
throw new Error('当前没有进行中的游戏');
const piece = this.currentGame.pieces.find(p => p.id === pieceId);
if (!piece) {
throw new Error('拼图块不存在');
// 检查是否正确放置
const isCorrect = piece.originalPosition.row === targetPosition.row &&
piece.originalPosition.col === targetPosition.col;
const updatedPieces = this.currentGame.pieces.map(p => {
if (p.id === pieceId) {
return {
...p,
isPlaced: isCorrect,
currentPosition: this.getPiecePosition(targetPosition)
};
return p;
});
const updatedCompleted = isCorrect
[…this.currentGame.completedPieces, pieceId]
this.currentGame.completedPieces;
const updatedGame: PuzzleGameState = {
...this.currentGame,
pieces: updatedPieces,
completedPieces: updatedCompleted,
currentPlayer: this.getNextPlayerId(player.deviceId)
};
this.currentGame = updatedGame;
this.syncGameState(updatedGame);
// 检查拼图是否完成
this.checkCompletion();
return updatedGame;
private getPiecePosition(pos: { row: number, col: number }): { x: number, y: number } {
if (!this.currentGame) return { x: 0, y: 0 };
const pieceWidth = this.currentGame.pieces[0].width;
const pieceHeight = this.currentGame.pieces[0].height;
return {
x: pos.col * pieceWidth,
y: pos.row * pieceHeight
};
private checkCompletion(): void {
if (!this.currentGame) return;
const allCompleted = this.currentGame.pieces.every(p => p.isPlaced);
if (allCompleted) {
const completedGame: PuzzleGameState = {
...this.currentGame,
status: "completed",
endTime: Date.now()
};
this.currentGame = completedGame;
this.syncGameState(completedGame);
}
private getNextPlayerId(currentPlayerId: string): string {
if (!this.currentGame) return currentPlayerId;
const currentIndex = this.currentGame.players.findIndex(
=> p.deviceId === currentPlayerId
);
const nextIndex = (currentIndex + 1) % this.currentGame.players.length;
return this.currentGame.players[nextIndex].deviceId;
private syncGameState(state: PuzzleGameState): void {
this.dataManager.syncData('puzzle_state_sync', {
type: 'puzzle_state',
data: state,
timestamp: Date.now()
});
private handleSyncData(data: any): void {
if (!data || data.type !== 'puzzle_state') return;
this.currentGame = data.data;
this.notifyGameStateChanged(data.data);
private notifyGameStateChanged(state: PuzzleGameState): void {
this.gameListeners.forEach(listener => {
listener.onGameStateChanged?.(state);
});
public addListener(listener: GameListener): void {
if (!this.gameListeners.includes(listener)) {
this.gameListeners.push(listener);
}
public removeListener(listener: GameListener): void {
this.gameListeners = this.gameListeners.filter(l => l !== listener);
}
interface GameListener {
onGameStateChanged?(state: PuzzleGameState): void;
export const puzzleGameService = PuzzleGameService.getInstance();
主游戏界面
// GameScreen.ets
import { puzzleGameService } from ‘./PuzzleGameService’;
import { PlayerInfo, PuzzleGameState, PuzzlePiece } from ‘./PuzzleTypes’;
@Component
export struct GameScreen {
@State currentGame: PuzzleGameState | null = null;
@State selectedPiece: PuzzlePiece | null = null;
@State showImagePicker: boolean = false;
@State showDifficultyDialog: boolean = false;
@State selectedDifficulty: number = 3;
// 模拟玩家信息
private localPlayer: PlayerInfo = {
deviceId: ‘device_001’,
nickname: ‘玩家1’,
avatar: ‘resources/rawfile/avatar1.png’
};
// 模拟其他玩家
private otherPlayers: PlayerInfo[] = [
deviceId: ‘device_002’,
nickname: '玩家2',
avatar: 'resources/rawfile/avatar2.png'
},
deviceId: ‘device_003’,
nickname: '玩家3',
avatar: 'resources/rawfile/avatar3.png'
];
aboutToAppear() {
puzzleGameService.addListener({
onGameStateChanged: (state) => {
this.handleGameStateChanged(state);
});
aboutToDisappear() {
puzzleGameService.removeListener({
onGameStateChanged: (state) => {
this.handleGameStateChanged(state);
});
build() {
Stack() {
// 游戏区域
Column() {
// 标题栏
Row() {
Text('智能拼图')
.fontSize(24)
.fontWeight(FontWeight.Bold)
.layoutWeight(1)
if (!this.currentGame) {
Button('开始游戏')
.width(120)
.onClick(() => {
this.showDifficultyDialog = true;
})
else {
Button('新游戏')
.width(100)
.onClick(() => {
this.showDifficultyDialog = true;
})
}
.padding(10)
.width('100%')
// 玩家信息
if (this.currentGame) {
Row() {
ForEach(this.currentGame.players, (player) => {
Column() {
Image(player.avatar)
.width(40)
.height(40)
.borderRadius(20)
.border({
width: player.deviceId === this.currentGame?.currentPlayer ? 2 : 0,
color: '#409EFF'
})
Text(player.nickname)
.fontSize(12)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({ right: 15 })
.opacity(player.deviceId === this.currentGame?.currentPlayer ? 1 : 0.6)
})
.width(‘100%’)
.margin({ bottom: 20 })
// 拼图区域
if (this.currentGame) {
Stack() {
// 拼图底板（显示原图半透明）
Image(this.currentGame.originalImage)
.width('100%')
.height(400)
.opacity(0.3)
.objectFit(ImageFit.Contain)
// 拼图网格
Grid() {
ForEach(Array.from({ length: this.currentGame.difficulty }, (_, row) => row), (row) => {
ForEach(Array.from({ length: this.currentGame.difficulty }, (_, col) => col), (col) => {
GridItem() {
Column() {
// 显示已正确放置的拼图块
if (this.currentGame!.pieces.some(p =>
p.originalPosition.row === row &&
p.originalPosition.col === col &&
p.isPlaced
)) {
const piece = this.currentGame!.pieces.find(p =>
p.originalPosition.row === row &&
p.originalPosition.col === col
)!;
Image(piece.imageData)
.width(piece.width)
.height(piece.height)
.border({ width: 1, color: '#FFFFFF' })
else {
// 显示空白的拼图格子
Blank()
.width(this.currentGame!.pieces[0].width)
.height(this.currentGame!.pieces[0].height)
.backgroundColor('#FFFFFF')
.opacity(0.5)
.border({ width: 1, color: '#CCCCCC' })
}
})
})
.columnsTemplate(Array(this.currentGame.difficulty).fill(‘1fr’).join(’ '))
.rowsTemplate(Array(this.currentGame.difficulty).fill('1fr').join(' '))
.width('100%')
.height(400)
// 未放置的拼图块
ForEach(this.currentGame.pieces.filter(p => !p.isPlaced), (piece) => {
Image(piece.imageData)
.width(piece.width)
.height(piece.height)
.position({
x: piece.currentPosition.x,
y: piece.currentPosition.y
})
.border({ width: 1, color: '#FFFFFF' })
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) {
this.selectedPiece = piece;
})
})
.width(‘100%’)
.height(400)
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Move && this.selectedPiece &&
this.currentGame?.currentPlayer === this.localPlayer.deviceId) {
// 移动选中的拼图块
const updatedPiece = {
...this.selectedPiece,
currentPosition: {
x: event.touches[0].x - this.selectedPiece.width / 2,
y: event.touches[0].y - this.selectedPiece.height / 2
};
puzzleGameService.movePiece(
updatedPiece.id,
updatedPiece.currentPosition,
this.localPlayer
);
else if (event.type === TouchType.Up && this.selectedPiece) {
// 尝试放置拼图块
const pieceWidth = this.currentGame!.pieces[0].width;
const pieceHeight = this.currentGame!.pieces[0].height;
const col = Math.round(event.touches[0].x / pieceWidth);
const row = Math.round(event.touches[0].y / pieceHeight);
if (col >= 0 && col < this.currentGame!.difficulty &&
row >= 0 && row < this.currentGame!.difficulty) {
puzzleGameService.placePiece(
this.selectedPiece.id,
row, col },
this.localPlayer
);
this.selectedPiece = null;
})
.margin({ bottom: 20 })
else {
Column() {
Text('选择图片开始拼图游戏')
.fontSize(18)
.margin({ bottom: 20 })
Button('选择图片')
.width(200)
.height(50)
.fontSize(18)
.onClick(() => {
this.showImagePicker = true;
})
.width(‘100%’)
.height(400)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
.width('100%')
.height('100%')
.padding(20)
// 难度选择对话框
if (this.showDifficultyDialog) {
DialogComponent({
title: '选择难度',
content: this.buildDifficultyDialog(),
confirm: {
value: '确定',
action: () => {
this.showDifficultyDialog = false;
this.showImagePicker = true;
},
cancel: {
value: '取消',
action: () => this.showDifficultyDialog = false
})
// 图片选择器
if (this.showImagePicker) {
ImagePickerComponent({
onImageSelected: (imageData) => {
this.showImagePicker = false;
this.startNewGame(imageData);
},
onCancel: () => {
this.showImagePicker = false;
})
}
private buildDifficultyDialog(): void {
Column() {
Text('拼图块数:')
.fontSize(16)
.margin({ bottom: 10 })
Slider({
value: this.selectedDifficulty,
min: 2,
max: 6,
step: 1,
style: SliderStyle.OutSet
})
.onChange((value: number) => {
this.selectedDifficulty = value;
})
Text({this.selectedDifficulty} × {this.selectedDifficulty})
.fontSize(16)
.fontColor('#409EFF')
.margin({ top: 10 })
.padding(20)
private async startNewGame(imageData: ArrayBuffer): Promise<void> {
try {
const players = [this.localPlayer, ...this.otherPlayers];
this.currentGame = await puzzleGameService.createGame(
imageData,
players,
this.selectedDifficulty
);
catch (err) {
console.error('开始新游戏失败:', JSON.stringify(err));
prompt.showToast({ message: '开始游戏失败，请重试' });
}
private handleGameStateChanged(state: PuzzleGameState): void {
this.currentGame = state;
// 游戏完成时显示庆祝效果
if (state.status === "completed") {
prompt.showToast({ message: '拼图完成！', duration: 3000 });
}
// 图片选择器组件
@Component
struct ImagePickerComponent {
private onImageSelected: (imageData: ArrayBuffer) => void;
private onCancel: () => void;
build() {
Column() {
Text(‘选择图片’)
.fontSize(20)
.margin({ bottom: 20 })
Row() {
Button('拍照')
.width(120)
.height(120)
.onClick(() => {
this.takePhoto();
})
Button('相册')
.width(120)
.height(120)
.margin({ left: 20 })
.onClick(() => {
this.pickImage();
})
.margin({ bottom: 20 })
Button('取消')
.width(200)
.onClick(() => {
this.onCancel();
})
.width(‘80%’)
.padding(20)
.backgroundColor('#FFFFFF')
.borderRadius(8)
private async takePhoto(): Promise<void> {
try {
const camera = await cameraService.takePhoto();
this.onImageSelected(camera.imageData);
catch (err) {
console.error('拍照失败:', JSON.stringify(err));
prompt.showToast({ message: '拍照失败，请重试' });
}
private async pickImage(): Promise<void> {
try {
const image = await imageService.pickImage();
this.onImageSelected(image.imageData);
catch (err) {
console.error('选择图片失败:', JSON.stringify(err));
prompt.showToast({ message: '选择图片失败，请重试' });
}
类型定义
// PuzzleTypes.ets
export interface PlayerInfo {
deviceId: string;
nickname: string;
avatar: string;
export interface PuzzlePiece {
id: string;
originalPosition: { row: number; col: number };
currentPosition: { x: number; y: number };
imageData: ArrayBuffer;
width: number;
height: number;
isPlaced: boolean;
export interface PuzzleGameState {
gameId: string;
originalImage: ArrayBuffer;
players: PlayerInfo[];
currentPlayer: string;
pieces: PuzzlePiece[];
completedPieces: string[];
difficulty: number;
startTime: number;
endTime?: number;
status: “waiting” “playing”
“completed”;
三、项目配置与权限
权限配置
// module.json5
“module”: {
"requestPermissions": [
“name”: “ohos.permission.CAMERA”,
"reason": "拍摄照片用于拼图"
},
“name”: “ohos.permission.READ_MEDIA”,
"reason": "从相册选择图片"
},
“name”: “ohos.permission.DISTRIBUTED_DATASYNC”,
"reason": "同步游戏状态"
],
"abilities": [
“name”: “MainAbility”,
"type": "page",
"visible": true
},
“name”: “CameraAbility”,
"type": "service",
"backgroundModes": ["camera"]
]
}
四、总结与扩展
本智能拼图游戏系统实现了以下核心功能：
智能图片分割：自动将图片分割为拼图块
多人协作拼图：支持多设备玩家协同完成拼图
实时状态同步：所有玩家的操作实时同步
难度可调：支持不同复杂度的拼图挑战
扩展方向：
AI辅助提示：为玩家提供拼图放置建议
计时竞赛模式：比拼完成速度
成就系统：记录玩家完成的拼图
自定义拼图形状：支持非矩形拼图块
社交分享：分享拼图过程和成果
AR拼图：将拼图与现实场景结合
通过HarmonyOS的分布式技术，我们构建了一个富有创意的多人协作拼图游戏，让玩家可以跨越设备界限，共同完成艺术创作。
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
赞
收藏
回复
相关推荐
