vue3——pixi初学，编写一个简单的小游戏,复制粘贴可用学习

pixi官网

小游戏效果

两个文件夹 一个index.html 一个data.js

//data.js
import { reactive } from "vue";
import { Sprite, utils, Rectangle, Application, Text, Graphics } from "pixi.js";

//首先 先创建一个舞台
export const app = new Application({
  resizeTo: window, //自适应页面大小 铺满页面 其他参数可以查看文档
  backgroundColor: 0x061639, // 背景颜色
  transparent: true,//背景是否透明，默认false
});

// 计算分数 舞台上面分数文本
let scroe = 0;
const scroeText = new Text(`分数: ${scroe}`, {
  fontFamily: "Arial",
  fontSize: 24,
  fill: 0xffffff,
});

// 创建一个文本对象来显示当前帧数
 const fpsText = new Text("FPS: 0", {
    fontFamily: "Arial",
    fontSize: 24,
    fill: 0xffffff,
 }); 
// 文本创建
export function createText() {
  scroeText.position.set(100, 10); // 位置  x 100  y 10
  // scroeText.anchor.set(0.5); //以自己中心设置了锚点来计算 x y
  scroeText.zIndex = 999; // 层级
  fpsText.position.set(250, 10);
  fpsText.zIndex = 999;
  app.stage.addChild(fpsText);
  app.stage.addChild(scroeText);
   
   // 创建一个Ticker对象来处理动画循环
  app.ticker.add(update);
  // 定义一个update函数来更新帧数
  function update() {
    // 计算当前帧数
     const fps = Math.round(app.ticker.FPS);
    // 更新文本内容
     fpsText.text = `FPS: ${fps}`;
    // console.log(`FPS: ${fps}`);
   }
}

// 创建精灵  
let sprites = []; // 存储精灵图对象的数组
const maxSprites = 8; // 最大精灵图数量
let s_data = reactive({
  vx: 0,
  vy: 1, //初始速度
  maxX: 0,//边界
  maxY: 0,
  minX: 0,
  minY: 0,
  // 设置精灵图的初始移动方向
  directionX: 1,
  directionY: 1,
});
// 创建精灵图  从雪碧图里面抠出方块
export function createRocket() {
   // 超过8个就不再创建
  if (sprites.length >= maxSprites) return;
  
 // 扣雪碧图 将雪碧图存储在TextureCache缓存中的texture变量中。
  let texture = utils.TextureCache[require("../../assets/tileset.png")];
  
  // 创建了一个新的Rectangle对象，该对象表示了从纹理中提取的一个矩形区域
  let rectangle = new Rectangle(96, 128, 32, 32);
  
  // 将之前创建的矩形区域赋值给纹理的frame属性。
  texture.frame = rectangle;
  
  // 创建了一个新的精灵图对象，名称为rocket，并将之前创建的纹理对象赋值给它的texture属性。
  // 这样，精灵图将根据纹理显示相应的图像。
  let sprite = new Sprite(texture);
  
  // 设置精灵图的初始位置
  sprite.x = Math.random() * app.renderer.width; // 随机 X轴坐标
  sprite.y = 0; // Y轴坐标
  
  // 运动边界
  s_data.maxX = app.screen.width - sprite.width;
  s_data.maxY = app.screen.height - sprite.height;
  
  // 初始位置边界
  if (sprite.x < 0) sprite.x = 0;
  if (sprite.x > s_data.maxX) sprite.x = app.screen.width - sprite.width;
  
  app.stage.addChild(sprite); // 添加到舞台
  sprites.push(sprite);
  

}
// 精灵图——方块 运动判断
function gameLoop() {
  for (let i = sprites.length - 1; i >= 0; i--) {
    const sprite = sprites[i];
    const nextX = sprite.x + s_data.vx;
    const nextY = sprite.y + s_data.vy;
    // 检查碰撞并采取相应行动
    // if (nextX < s_data.minX || nextX > s_data.maxX) {
    // 在X轴方向上与边界碰撞
    // s_data.directionX *= -1; // 反转运动方向
   //  }
    if (nextY < s_data.minY || nextY > s_data.maxY) {
      // 在Y轴方向上与边界碰撞
      // s_data.directionY *= -1; // 反转运动方向
      // app.stage.removeChild(rocket); // 移除
      // return;
      // scroe += 10;
      scroeText.text = `FPS: ${scroe}`;
      app.stage.removeChild(sprite);
      sprites.splice(i, 1);
    }
    // 检测碰撞
    if (detectCollision(box, sprite)) {
      // 发生碰撞
      console.log("碰撞发生！");
      scroe += 10;
      scroeText.text = `FPS: ${scroe}`;
      app.stage.removeChild(sprite); // 从舞台移除精灵图
      sprites.splice(i, 1);
    }
    // 更新精灵图的位置
    sprite.x += s_data.vx * s_data.directionX;
    sprite.y += s_data.vy * s_data.directionY;
  }
}
// 创建动画循环 会一直频繁触发gameLoop
app.ticker.add(() => gameLoop());

// 暂停创建
export function stopTimer(timer) {
  if (scroe > 200) {
    clearInterval(timer);
  }
}

// 创建 底部方块 限制：左右运动
let boxData = reactive({
  minX: 0,// 运动边界
  maxX: 0,
});
const boxWidth = 100;
const boxHeight = 50;
const box = new Graphics();
export function createBox() {
  box.beginFill(0x0000ff); // 方块的填充颜色为蓝色，可以根据需要修改颜色值
  box.drawRect(0, 0, boxWidth, boxHeight); // 绘制方块
  box.endFill();
  box.x = (app.screen.width - boxWidth) / 2; // 将方块定位在水平居中位置
  box.y = app.screen.height - boxHeight; // 将方块定位在底部
  boxData.maxX = app.screen.width - boxWidth;
  // 启用交互
  box.interactive = true;

  // 监听触摸或鼠标按下事件，开始拖动
  box.on("pointerdown", onDragStart);

  // 监听触摸或鼠标释放事件，停止拖动
  box.on("pointerup", onDragEnd);
  box.on("pointerupoutside", onDragEnd);

  // 监听触摸或鼠标移动事件，移动方块
  box.on("pointermove", onDragMove);

  let isDragging = false; // 记录是否正在拖动
  let startPosition; // 拖动开始时的位置

  // 拖动开始
  function onDragStart(event) {
    isDragging = true;
    startPosition = event.data.global.x;
  }

  // 拖动停止
  function onDragEnd() {
    isDragging = false;
  }

  // 拖动移动
  function onDragMove(event) {
    if (isDragging) {
      const currentPosition = event.data.global.x;
      const deltaX = currentPosition - startPosition;
      console.log(deltaX, box.x, s_data.maxX);
      // 移动方块
      box.x += deltaX;
      // 检查碰撞并采取相应行动 // 在X轴方向上与边界碰撞
      if (box.x > boxData.maxX) box.x = boxData.maxX;
      if (box.x < boxData.minX) box.x = boxData.minX;
      startPosition = currentPosition;
    }
  }
  app.stage.addChild(box); // 将方块添加到舞台上
}

// 检测碰撞
function detectCollision(box, sprite) {
  // getBounds 方法获取方块和精灵图的边界矩形，然后判断两个矩形是否相交，如果相交，则说明发生了碰撞。
  const boxBounds = box.getBounds();
  const spriteBounds = sprite.getBounds();

  return (
    boxBounds.x + boxBounds.width > spriteBounds.x &&
    boxBounds.x < spriteBounds.x + spriteBounds.width &&
    boxBounds.y + boxBounds.height > spriteBounds.y &&
    boxBounds.y < spriteBounds.y + spriteBounds.height
  );
}
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213

// index.html

<template>
  <div id="pixi"></div>
</template>
<script>
import { Loader } from "pixi.js";
import { onMounted } from "vue";
import { createRocket, app, createText, stopTimer, createBox } from "./index";

export default {
  name: "Game",
  setup() {
  	//初始化
    function init() {
      createText();
      // 定时创建精灵图
      let timer = setInterval(() => {
        createRocket();
      }, 1000); // 每秒创建一个精灵图
      stopTimer(timer);
      createBox();
    }

    onMounted(() => {
      let box = document.getElementById("pixi");
      box.appendChild(app.view);
      Loader.shared.add([require("../../assets/tileset.png")]).load(init);
    });
    return {};
  },
  components: {},
};
</script>
<style scoped lang="scss">
#pixi {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/bg.png"); /* 替换为你的背景图路径 */
  background-size: cover;
}
</style>

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

package.josn

 "dependencies": {
    "core-js": "^3.6.5",
    "pixi.js": "^6.2.1",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
1
2
3
4
5
6
7

该页面素材