HTML5 PixiJS引擎 2D游戏开发通关手册

const app = new PIXI.Application({ width: 800, height: 600 }); document.body.appendChild(app.view);

// 加载图像资源 const loader = PIXI.Loader.shared; // 单例加载器 loader .add('player', 'assets/player.png') // 资源key为"player"，路径为assets/player.png .load(setup); // 加载完成后调用setup

// 加载完成回调 function setup(loader, resources) { // 从资源中获取纹理，创建精灵 const player = new PIXI.Sprite(resources.player.texture);

// 设置精灵属性 player.x = 400; // 初始x坐标 player.y = 300; // 初始y坐标 player.anchor.set(0.5); // 锚点居中 player.scale.set(0.5); // 缩小50% player.rotation = Math.PI / 4; // 旋转45度（π/4弧度）

// 添加到舞台 app.stage.addChild(player);

// 主循环：让精灵上下移动 let speed = 2; app.ticker.add(() => { player.y += speed; // 碰到边界反向 if (player.y > app.screen.height || player.y < 0) { speed *= -1; } }); }

function setup(loader, resources) { const player = new PIXI.Sprite(resources.player.texture); player.x = 400; player.y = 300; player.anchor.set(0.5); player.interactive = true; // 启用交互 player.buttonMode = true; // 鼠标悬停时显示手型光标 app.stage.addChild(player);

// 拖拽逻辑 let isDragging = false; let offsetX, offsetY;

// 按下时记录偏移 player.on('pointerdown', (event) => { isDragging = true; // 计算鼠标与精灵中心的偏移（避免拖拽时跳动） offsetX = player.x - event.global.x; offsetY = player.y - event.global.y; });

// 移动时更新位置 app.stage.on('pointermove', (event) => { if (isDragging) { player.x = event.global.x + offsetX; player.y = event.global.y + offsetY; } });

// 松开时结束拖拽 app.stage.on('pointerup', () => { isDragging = false; }); app.stage.on('pointerupoutside', () => { // 鼠标拖出画布时 isDragging = false; }); }

const loader = PIXI.Loader.shared; loader .add('playerSheet', 'assets/player_walk.json') // JSON定义帧信息 .load(setupAnimation);

// 2. 初始化动画 function setupAnimation(loader, resources) { // 从精灵表中获取所有帧纹理（假设帧名为"walk_0"到"walk_3"） const frames = []; for (let i = 0; i < 4; i++) { frames.push(PIXI.Texture.from(`walk_${i}`)); // 从精灵表加载帧 }

// 创建动画精灵 const playerAnim = new PIXI.AnimatedSprite(frames); playerAnim.x = 400; playerAnim.y = 300; playerAnim.anchor.set(0.5); playerAnim.animationSpeed = 0.1; // 每帧间隔（值越小越慢） playerAnim.loop = true; // 循环播放 app.stage.addChild(playerAnim);

// 播放动画 playerAnim.play();

// 点击切换动画状态 playerAnim.interactive = true; playerAnim.on('pointerdown', () => { if (playerAnim.playing) { playerAnim.stop(); } else { playerAnim.play(); } }); }

let score = 0; const scoreText = new PIXI.Text(`分数: ${score}`, { fontSize: 24, fill: 0xffffff }); scoreText.x = 10; scoreText.y = 10; app.stage.addChild(scoreText);

// 监听碰撞事件 Matter.Events.on(engine, 'collisionStart', (event) => { const pairs = event.pairs; pairs.forEach(pair => { // 判断是否是玩家与金币碰撞 const isPlayerCoin = (pair.bodyA === playerBody && coinBodies.includes(pair.bodyB)) || (pair.bodyB === playerBody && coinBodies.includes(pair.bodyA));

if (isPlayerCoin) { // 获取金币物理体 const coinBody = pair.bodyA === playerBody ? pair.bodyB : pair.bodyA; // 移除金币（物理体+精灵） Matter.World.remove(world, coinBody); app.stage.removeChild(coinBody.sprite); // 假设物理体关联了sprite属性 // 更新分数 score += 10; scoreText.text = `分数: ${score}`; } }); });

├── assets/ # 资源文件夹 │ ├── images/ # 精灵图、背景图 │ ├── spritesheets/ # 精灵表（图像+JSON） │ ├── audio/ # 音频文件 │ └── levels/ # 关卡JSON数据 ├── src/ │ ├── scenes/ # 场景模块 │ │ ├── LoadScene.js # 加载场景 │ │ ├── GameScene.js # 游戏场景 │ │ └── OverScene.js # 结束场景 │ ├── utils/ # 工具函数（如碰撞检测、资源加载） │ └── main.js # 入口文件（初始化应用） ├── index.html # 页面入口 └── package.json # 依赖配置（工程化项目）

function createBullet() { const bullet = new PIXI.Sprite(PIXI.Texture.from('bullet')); bullet.anchor.set(0.5); bullet.visible = false; // 初始隐藏 app.stage.addChild(bullet); return bullet; }

function resetBullet(bullet, x, y) { bullet.x = x; bullet.y = y; bullet.visible = true; // 5秒后回收 setTimeout(() => { bullet.visible = false; }, 5000); }

const bulletPool = new PIXI.ObjectPool(createBullet, resetBullet);

// 发射子弹 function fireBullet(x, y) { const bullet = bulletPool.get(); bulletPool.reset(bullet, x, y); // 子弹移动逻辑（在ticker中更新） app.ticker.addOnce(() => { const speed = 5; const moveTicker = app.ticker.add(() => { if (!bullet.visible) { app.ticker.remove(moveTicker); // 子弹隐藏后停止移动 return; } bullet.y -= speed; }); }); }