Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 35a2609

Browse files
shengxinjingshengxinjing
committed
Merge branch 'master' of github.com:shengxinjing/vue3-vs-vue2
2 parents 3f62511 + 9a814c1 commit 35a2609

File tree

31 files changed

+3046
-113
lines changed

31 files changed

+3046
-113
lines changed

‎custom-renderer-pixijs/example/play-plane/README.md‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,25 @@ yarn start
1616
yarn build --watch
1717
```
1818

19-
## TODO
19+
## tasking
2020

21-
- [ ] 地图可滚动
21+
- [x] 地图可滚动
2222
- [x] 逻辑实现
23-
- [ ] 素材
23+
- [x] 素材
2424
- [ ] 开始页面
2525
- [ ] 结束页面
2626
- [ ] 战斗
2727
- [ ] 敌机
28-
- [ ] 从上往下移动
29-
- [ ] 移动的方向随机变换
30-
- [ ] 可以发射炮弹
28+
- [x] 1秒创建一个敌机
29+
- [x] 从上往下移动
30+
- [x] 移动的方向随机变换
31+
- [x] 不允许移动超过地图边界
32+
- [x] 可以发射炮弹
33+
- [x] 超出屏幕过，销毁炮弹
34+
- [x] 被击中 3 次就要爆炸掉
35+
- [ ] 销毁之前播放爆炸动画
3136
- [ ] 碰到敌机子弹的话会减少血量
37+
- [x] 我方子弹碰到地方子弹的话，双方子弹都消失
3238
- [ ] 血量为零时 game over
3339
- [ ] 显示我方飞机的血量
3440
- [ ] 优化

‎custom-renderer-pixijs/example/play-plane/src/component/EnemyPlane.js‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,41 @@
11
import { game } from "../../game";
22
import { useKeyboardMove, useKeyboard } from "../use";
3-
import { h, defineComponent, ref } from "../../../../src/index";
3+
import {
4+
h,
5+
defineComponent,
6+
ref,
7+
watch,
8+
onMounted,
9+
onUnmounted,
10+
} from "../../../../src/index";
411
// 敌方飞机
512
export default defineComponent({
13+
props: ["x", "y"],
614
setup(props, ctx) {
7-
const x = ref(150);
8-
const y = ref(0);
15+
const x = ref(props.x);
16+
const y = ref(props.y);
17+
18+
watch(props, (newValue) => {
19+
x.value = newValue.x;
20+
y.value = newValue.y;
21+
});
22+
23+
// 发射子弹
24+
const attackInterval = 2000;
25+
let intervalId;
26+
onMounted(() => {
27+
intervalId = setInterval(() => {
28+
ctx.emit("attack", {
29+
x: x.value + 105,
30+
y: y.value + 200,
31+
});
32+
}, attackInterval);
33+
});
34+
35+
onUnmounted(() => {
36+
clearInterval(intervalId);
37+
});
38+
939
return {
1040
x,
1141
y,

‎custom-renderer-pixijs/example/play-plane/src/component/GameContainer.js‎

Lines changed: 74 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -3,71 +3,91 @@ import Plane from "./Plane.js";
33
import Map from "./Map.js";
44
import EnemyPlane from "./EnemyPlane";
55
import { game } from "../../game";
6+
import { hitTestRectangle } from "../utils";
67
import { h, reactive, ref } from "../../../../src/index.js";
8+
import { moveBullets } from "../moveBullets";
9+
import { moveEnemyPlane } from "../moveEnemyPlane";
10+
import { stage } from "../config/index.js";
711

812
let hashCode = 0;
13+
const createHashCode = () => {
14+
return hashCode++;
15+
};
16+
917
export default {
1018
setup() {
11-
const selfBullets = reactive([]);
12-
const enemyPlanes = reactive([
13-
{
14-
x: 150,
15-
y: 0,
19+
//生产敌机
20+
const createEnemyPlaneData = (x) => {
21+
return {
22+
x,
23+
y: -200,
1624
width: 217,
1725
height: 263,
18-
},
19-
]);
20-
21-
const createHashCode = () => {
22-
return hashCode++;
26+
life: 3,
27+
};
2328
};
29+
const selfBullets = reactive([]);
30+
const enemyPlanes = reactive([]);
31+
const enemyPlaneBullets = reactive([]);
32+
33+
setInterval(() => {
34+
const x = Math.floor((1 + stage.width) * Math.random());
35+
enemyPlanes.push(createEnemyPlaneData(x));
36+
}, 1000);
2437

2538
const handleBulletDestroy = ({ id }) => {
2639
const index = selfBullets.findIndex((info) => info.id == id);
27-
selfBullets.splice(index, 1);
40+
if (index !== -1) {
41+
selfBullets.splice(index, 1);
42+
}
2843
};
2944

3045
const handlePlaneAttack = ({ x, y }) => {
3146
const id = createHashCode();
3247
const width = 26;
3348
const height = 37;
34-
selfBullets.push({ x, y, id, width, height });
49+
const dir = -1;
50+
selfBullets.push({ x, y, id, width, height, dir });
3551
};
3652

37-
// todo
38-
// 检测子弹的位置是否和敌军的位置相交
39-
// 如果相交的话，就认定为碰撞了
40-
// 销毁子弹 销毁碰撞到的敌军
41-
// 在销毁之前 可以添加爆炸效果到敌军的位置
42-
// 公式
43-
function boxesIntersect(ab, bb) {
44-
return (
45-
ab.x + ab.width > bb.x &&
46-
ab.x < bb.x + bb.width &&
47-
ab.y + ab.height > bb.y &&
48-
ab.y < bb.y + bb.height
49-
);
50-
}
51-
52-
const bulletSpeed = 3;
53-
const vanishLine = -100;
54-
const isDisappear = (val) => val < vanishLine;
53+
const handleEnemyPlaneAttack = ({ x, y }) => {
54+
const id = createHashCode();
55+
const width = 26;
56+
const height = 37;
57+
const dir = 1;
58+
enemyPlaneBullets.push({ x, y, id, width, height, dir });
59+
};
5560

5661
game.ticker.add(() => {
57-
selfBullets.forEach((bullet, index) => {
58-
bullet.y -= bulletSpeed;
59-
if (isDisappear(bullet.y)) {
60-
selfBullets.splice(index, 1);
61-
}
62-
});
62+
moveBullets(selfBullets);
63+
moveBullets(enemyPlaneBullets);
64+
moveEnemyPlane(enemyPlanes);
6365

6466
// 先遍历所有的子弹
65-
selfBullets.forEach((bullet, index) => {
66-
enemyPlanes.forEach((enemyPlane) => {
67-
const isIntersect = boxesIntersect(bullet, enemyPlane);
67+
selfBullets.forEach((bullet, selfIndex) => {
68+
// 检测我方子弹是否碰到了敌机
69+
enemyPlanes.forEach((enemyPlane, enemyPlaneIndex) => {
70+
const isIntersect = hitTestRectangle(bullet, enemyPlane);
6871
if (isIntersect) {
69-
console.log("碰上啦");
70-
selfBullets.splice(index, 1);
72+
selfBullets.splice(selfIndex, 1);
73+
74+
// 敌机需要减血
75+
enemyPlane.life--;
76+
if (enemyPlane.life <= 0) {
77+
// todo
78+
// 可以让实例发消息过来在销毁
79+
// 因为需要在销毁之前播放销毁动画
80+
enemyPlanes.splice(enemyPlaneIndex, 1);
81+
}
82+
}
83+
});
84+
85+
// 检测是否碰到了敌方子弹
86+
enemyPlaneBullets.forEach((enemyBullet, enemyBulletIndex) => {
87+
const isIntersect = hitTestRectangle(bullet, enemyBullet);
88+
if (isIntersect) {
89+
selfBullets.splice(selfIndex, 1);
90+
enemyPlaneBullets.splice(enemyBulletIndex, 1);
7191
}
7292
});
7393
});
@@ -76,13 +96,15 @@ export default {
7696
return {
7797
enemyPlanes,
7898
selfBullets,
99+
enemyPlaneBullets,
79100
handleBulletDestroy,
80101
handlePlaneAttack,
102+
handleEnemyPlaneAttack,
81103
};
82104
},
83105

84106
render(ctx) {
85-
const createBullet = (info) => {
107+
const createBullet = (info, index) => {
86108
return h(Bullet, {
87109
key: "Bullet" + info.id,
88110
x: info.x,
@@ -101,23 +123,18 @@ export default {
101123
y: info.y,
102124
height: info.height,
103125
width: info.width,
126+
onAttack: ctx.handleEnemyPlaneAttack,
104127
});
105128
};
106129

107-
return h(
108-
"Container",
109-
{
110-
width: 500,
111-
height: 500,
112-
},
113-
[
114-
h(Map),
115-
h(Plane, {
116-
onAttack: ctx.handlePlaneAttack,
117-
}),
118-
...ctx.selfBullets.map(createBullet),
119-
...ctx.enemyPlanes.map(createEnemyPlane),
120-
]
121-
);
130+
return h("Container", [
131+
h(Map),
132+
h(Plane, {
133+
onAttack: ctx.handlePlaneAttack,
134+
}),
135+
...ctx.selfBullets.map(createBullet),
136+
...ctx.enemyPlaneBullets.map(createBullet),
137+
...ctx.enemyPlanes.map(createEnemyPlane),
138+
]);
122139
},
123140
};

‎custom-renderer-pixijs/example/play-plane/src/config/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const stage = {
2+
width: 750,
3+
height: 800,
4+
};

‎custom-renderer-pixijs/example/play-plane/src/moveBullets.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { stage } from "./config";
2+
const bulletSpeed = 3;
3+
const topLine = -100;
4+
const bottomLine = stage.height + 50;
5+
6+
const isOverBorder = (val) => {
7+
if (val > bottomLine) {
8+
return true;
9+
}
10+
11+
if (val < topLine) {
12+
return true;
13+
}
14+
15+
return false;
16+
};
17+
18+
export const moveBullets = (bullets) => {
19+
bullets.forEach((bullet, index) => {
20+
const dir = bullet.dir;
21+
bullet.y += bulletSpeed * dir;
22+
if (isOverBorder(bullet.y)) {
23+
bullets.splice(index, 1);
24+
}
25+
});
26+
};

‎custom-renderer-pixijs/example/play-plane/src/moveEnemyPlane.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { stage } from "./config";
2+
3+
export const moveEnemyPlane = (enemyPlanes) => {
4+
enemyPlanes.forEach((enemyPlane, index) => {
5+
if (!enemyPlane.moveInfo) {
6+
enemyPlane.moveInfo = {};
7+
enemyPlane.moveInfo.dir = 1;
8+
enemyPlane.moveInfo.count = 0;
9+
}
10+
11+
enemyPlane.y++;
12+
enemyPlane.x += 1 * enemyPlane.moveInfo.dir;
13+
enemyPlane.moveInfo.count++;
14+
if (enemyPlane.moveInfo.count > 120) {
15+
const factor = Math.random() > 0.5 ? 1 : -1;
16+
// 随机转换方向
17+
enemyPlane.moveInfo.dir = enemyPlane.moveInfo.dir * factor;
18+
enemyPlane.moveInfo.count = 0;
19+
}
20+
21+
// 检测是否到边界了
22+
if (isArrivedRightBorder(enemyPlane)) {
23+
enemyPlane.x = stage.width - enemyPlane.width;
24+
}
25+
if (isArrivedLeftBorder(enemyPlane)) {
26+
enemyPlane.x = 0;
27+
}
28+
});
29+
};
30+
31+
function isArrivedLeftBorder(enemyPlane) {
32+
return enemyPlane.x <= 0;
33+
}
34+
35+
function isArrivedRightBorder(enemyPlane) {
36+
return enemyPlane.x + enemyPlane.width >= stage.width;
37+
}

‎custom-renderer-pixijs/example/play-plane/src/utils/hit.js‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎custom-renderer-pixijs/example/play-plane/src/utils/hitTestRectangle.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export const hitTestRectangle = (objectA, objectB) => {
2+
return (
3+
objectA.x + objectA.width > objectB.x &&
4+
objectA.x < objectB.x + objectB.width &&
5+
objectA.y + objectA.height > objectB.y &&
6+
objectA.y < objectB.y + objectB.height
7+
);
8+
};

‎custom-renderer-pixijs/example/play-plane/src/utils/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { hitTestRectangle } from "./hitTestRectangle";

‎custom-renderer-pixijs/example/play-plane/test/utils/hit.test.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)