Skip to content

Z
zjzy_client_game
Commit 0aac460e authored by 王勇霞's avatar 王勇霞
Browse files
Options

创建刚体

parent f923ffff
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 200 deletions
resource/res.json
View file @ 0aac460e
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
"name": "FailPanel" "name": "FailPanel"
}, },
{ {
"keys": "cdbg.png,cloud.png,controlpeo.png,gamebg.jpg,monster.png,num_0.png,num_1.png,num_2.png,num_3.png,num_4.png,num_5.png,num_6.png,num_7.png,num_8.png,num_9.png,num_s.png,reset.png,tianpop.png,xiangpop.png", "keys": "cdbg.png,cloud.png,controlpeo.png,gamebg.jpg,monster.png,num_0.png,num_1.png,num_2.png,num_3.png,num_4.png,num_5.png,num_6.png,num_7.png,num_8.png,num_9.png,num_s.png,reset.png,tianpop.png,word_云.png,word_休.png,word_卷.png,word_在.png,word_心.png,word_意.png,word_无.png,word_晴.png,word_水.png,word_流.png,word_深.png,word_看.png,word_自.png,word_舒.png,word_闲.png,word_静.png,xiangpop.png",
"name": "GameScene" "name": "GameScene"
}, },
{ {
......
src/ResJson.ts
View file @ 0aac460e
...@@ -5,7 +5,7 @@ export const ResJson = { ...@@ -5,7 +5,7 @@ export const ResJson = {
"name": "FailPanel" "name": "FailPanel"
}, },
{ {
"keys": "cdbg.png,cloud.png,controlpeo.png,gamebg.jpg,monster.png,num_0.png,num_1.png,num_2.png,num_3.png,num_4.png,num_5.png,num_6.png,num_7.png,num_8.png,num_9.png,num_s.png,reset.png,tianpop.png,xiangpop.png", "keys": "cdbg.png,cloud.png,controlpeo.png,gamebg.jpg,monster.png,num_0.png,num_1.png,num_2.png,num_3.png,num_4.png,num_5.png,num_6.png,num_7.png,num_8.png,num_9.png,num_s.png,reset.png,tianpop.png,word_云.png,word_休.png,word_卷.png,word_在.png,word_心.png,word_意.png,word_无.png,word_晴.png,word_水.png,word_流.png,word_深.png,word_看.png,word_自.png,word_舒.png,word_闲.png,word_静.png,xiangpop.png",
"name": "GameScene" "name": "GameScene"
}, },
{ {
......
src/contant.ts 0 → 100644
View file @ 0aac460e
export const allWords:any = ['闲', '看', '晴', '云', '自', '卷', '舒', '静', '水', '流', '深', '心', '无', '意', '在', '休']
\ No newline at end of file
src/scenes/GameScene.ts
View file @ 0aac460e
...@@ -58,11 +58,11 @@ export class GameScene extends Scene { ...@@ -58,11 +58,11 @@ export class GameScene extends Scene {
this.right.startAniRange(1, 1, 1); this.right.startAniRange(1, 1, 1);
this.left.addEventListener(FYGE.MouseEvent.CLICK, () => { this.left.addEventListener(FYGE.MouseEvent.CLICK, () => {
this.left.startAniRange(1, undefined, 1, () => {}) this.left.startAniRange(1, undefined, 1, () => { })
this._role.leftMove() this._role.leftMove()
}) })
this.right.addEventListener(FYGE.MouseEvent.CLICK, () => { this.right.addEventListener(FYGE.MouseEvent.CLICK, () => {
this.right.startAniRange(1, undefined, 1, () => {}) this.right.startAniRange(1, undefined, 1, () => { })
this._role.rightMove() this._role.rightMove()
}) })
...@@ -77,7 +77,7 @@ export class GameScene extends Scene { ...@@ -77,7 +77,7 @@ export class GameScene extends Scene {
this.initMap(); this.initMap();
// TODO_wyx // TODO_wyx
this.upDateInfo() // this.upDateInfo()
} }
score; score;
...@@ -147,18 +147,6 @@ export class GameScene extends Scene { ...@@ -147,18 +147,6 @@ export class GameScene extends Scene {
addPropsMap = new Map(); addPropsMap = new Map();
obstaclePropMap = new Map(); obstaclePropMap = new Map();
private createPhyWorld() { private createPhyWorld() {
// const { Engine, Render, Runner, Composite, Bodies, World, Composites } = Matter;
// // 创建引擎
// const engine = Engine.create();
// // 创建渲染器
// const render = Render.create({
// engine: engine
// })
// Engine.run(engine);
// Render.run(render);
const { Engine, Render, Runner, Composite, Bodies, World, Composites } = Matter; const { Engine, Render, Runner, Composite, Bodies, World, Composites } = Matter;
this.engine = Engine.create( this.engine = Engine.create(
{ {
...@@ -166,7 +154,7 @@ export class GameScene extends Scene { ...@@ -166,7 +154,7 @@ export class GameScene extends Scene {
} }
); );
this.world = this.engine.world; this.world = this.engine.world;
this.engine.gravity.y = 1.5; this.engine.gravity.y = 0;
/** 真正运行 */ /** 真正运行 */
this.runner = Runner.create(); this.runner = Runner.create();
...@@ -174,40 +162,39 @@ export class GameScene extends Scene { ...@@ -174,40 +162,39 @@ export class GameScene extends Scene {
// @ts-ignore // @ts-ignore
this.composites = Composite; this.composites = Composite;
Matter.Events.on(this.engine, "collisionStart", this.onCollisionStart.bind(this)); // Matter.Events.on(this.engine, "collisionStart", this.onCollisionStart.bind(this));
Matter.Events.on(this.engine, "tick", this.onCollisionTick.bind(this)); // Matter.Events.on(this.engine, "tick", this.onCollisionTick.bind(this));
// 创建一个渲染器 // 创建一个渲染器
const render = Render.create({ const render = Render.create({
// element: document.body, // element: document.body,
canvas: document.getElementById("renderCanvas"),
canvas: document.getElementById("renderCanvas"), engine: this.engine,
engine: this.engine, options: {
options: { width: document.body.clientWidth,
width: document.body.clientWidth, height: document.body.clientHeight,
height: document.body.clientHeight, pixelRatio: window.devicePixelRatio, // 设置像素比
pixelRatio:window.devicePixelRatio, // 设置像素比 background: "rgba(255,255,255,0.3)", // 全局渲染模式时背景色
background: "rgba(255,255,255,0.3)", // 全局渲染模式时背景色 wireframeBackground: "rgba(255,255,255,0.3)", // 线框模式时背景色
wireframeBackground: "rgba(255,255,255,0.3)", // 线框模式时背景色 hasBounds: false,
hasBounds: false, wireframes: false, // 线框模式
wireframes: false, // 线框模式 showSleeping: true, // 刚体睡眠状态
showSleeping: true, // 刚体睡眠状态 showDebug: false, // Debug 信息
showDebug: false, // Debug 信息 showBroadphase: false, // 粗测阶段
showBroadphase: false, // 粗测阶段 showBounds: true, // 刚体的界限
showBounds: true, // 刚体的界限 showVelocity: false, // 移动刚体时速度
showVelocity: false, // 移动刚体时速度 showCollisions: false, // 刚体碰撞点
showCollisions: false, // 刚体碰撞点 showSeparations: false, // 刚体分离
showSeparations: false, // 刚体分离 showAxes: false, // 刚体轴线
showAxes: false, // 刚体轴线 showPositions: true, // 刚体位置
showPositions: true, // 刚体位置 showAngleIndicator: false, // 刚体转角指示
showAngleIndicator: false, // 刚体转角指示 showIds: true, // 显示每个刚体的 ID
showIds: true, // 显示每个刚体的 ID showVertexNumbers: false, // 刚体顶点数
showVertexNumbers: false, // 刚体顶点数 showConvexHulls: false, // 刚体凸包点
showConvexHulls: false, // 刚体凸包点 showInternalEdges: false, // 刚体内部边界
showInternalEdges: false, // 刚体内部边界 showMousePosition: false, // 鼠标约束线
showMousePosition: false, // 鼠标约束线 },
}, });
}); Render.run(render);
Render.run(render);
} }
onCollisionTick(e) { onCollisionTick(e) {
} }
...@@ -227,7 +214,7 @@ export class GameScene extends Scene { ...@@ -227,7 +214,7 @@ export class GameScene extends Scene {
num = 2 num = 2
} }
this._role.addScore('+' + num, '#ffffff') this._role.addScore('+' + num, '#ffffff')
this.score += num this.score += num
this.composites.remove(this.world, prop.phyBody); this.composites.remove(this.world, prop.phyBody);
prop.destroy(); prop.destroy();
...@@ -262,83 +249,38 @@ export class GameScene extends Scene { ...@@ -262,83 +249,38 @@ export class GameScene extends Scene {
} }
initMap() { initMap() {
let stageHeight = this.stage.stageHeight; let stageHeight = this.stage.stageHeight;
console.log("stageHeight", stageHeight)
this.createLineItem(stageHeight - 100, 380, false); // 循环多建几行
for (let i = 0; i < 10; i++) {
// for (let i = 0; i < 10; i++) { this.createLineItem(stageHeight - (184 * (i + 1)), 0, false);
}
// if (i < 4) {
// this.createLineItem(stageHeight - (240 * (i + 2)), 0, false);
// } else {
// this.createLineItem(stageHeight - (240 * (i + 2)));
// }
// }
} }
mapList = []; mapList = [];
createLineItem(h, x?: number, isprop = true) { createLineItem(h, x?: number, isprop = true) {
let nx = x ? x : Math.floor(Math.random() * 570 + 90); let sx = x ? x : Math.floor(Math.random() * 300 -100); // 初始第一朵云的坐标
let rLen = Math.floor(Math.random() * 4 + 2); // 每一行随机出现几朵云
if (isprop) { let space = Math.floor(Math.random() * 80); // 增加一点随机间距
let rate = Math.floor(Math.random() * 20); console.log("--->", sx, rLen, space)
for(let i=0; i<rLen; i++){
switch (true) { let mapItem = new MapItem({
case rate < 18: fx: sx + i*222 + i*(space + 20),
// 添加花🌹加分元素 fy: h,
let addProp = new AddProp(); index: this.mapList.length + 1
addProp.fx = nx; });
addProp.fy = h - 25; this.bgCon.addChildAt(mapItem, 0);
this.bgCon.addChildAt(addProp, 0) this.composites.add(this.world, [mapItem.phyBody]);
this.composites.add(this.world, [addProp.phyBody]);
this.addPropsMap.set(addProp.phyBody.id, addProp); // 添加文字
break; let addProp = new AddProp({
case rate >= 19 && rate <= 20: fx: sx + i*222 + i*(space + 20) + 46,
// 添加障碍元素 fy: h - 70,
let obstacleProp = new ObstacleProp() index: this.mapList.length + 1
obstacleProp.fx = nx; });
obstacleProp.fy = h - 40; this.bgCon.addChildAt(addProp, 1)
this.bgCon.addChildAt(obstacleProp, 0) this.composites.add(this.world, [addProp.phyBody]);
this.composites.add(this.world, [obstacleProp.phyBody]); this.mapList.push([mapItem, addProp])
// this.addPropsMap.set(addProp.phyBody.id, addProp);
this.obstaclePropMap.set(obstacleProp.phyBody.id, obstacleProp)
break
default:
break
}
} }
let mapItem = new MapItem();
mapItem.fx = nx;
mapItem.fy = h
this.bgCon.addChildAt(mapItem, 0)
this.composites.add(this.world, [mapItem.phyBody]);
let spriteItem = this.createOtherItem(nx, h);
this.mapList.push([mapItem, spriteItem])
}
createOtherItem(x, h) {
let dx = Math.floor(Math.random() * 280 + 90);
if (dx + 90 > x - 90) {
dx = dx + 310
}
let mapItem = new MapItem();
mapItem.fx = dx;
mapItem.fy = h
this.bgCon.addChildAt(mapItem, 0);
this.composites.add(this.world, [mapItem.phyBody]);
return mapItem
} }
timer = null; timer = null;
onFarm() { onFarm() {
...@@ -369,7 +311,7 @@ export class GameScene extends Scene { ...@@ -369,7 +311,7 @@ export class GameScene extends Scene {
} }
// console.log(this._role.y,this.bgCon.y,layers.stageHeight) // console.log(this._role.y,this.bgCon.y,layers.stageHeight)
if (this._role.y >= -(this.bgCon.y-1624)) { if (this._role.y >= -(this.bgCon.y - 1624)) {
if (!this.isonce) { if (!this.isonce) {
this.composites.remove(this.world, this._role.phyBody); this.composites.remove(this.world, this._role.phyBody);
console.log("siwang") console.log("siwang")
...@@ -385,10 +327,10 @@ export class GameScene extends Scene { ...@@ -385,10 +327,10 @@ export class GameScene extends Scene {
this.bgCon.y = this.bgCon.y + y; this.bgCon.y = this.bgCon.y + y;
} }
removeWorld(){ removeWorld() {
this.composites.clear(this.world) this.composites.clear(this.world)
// console.log(this.composites) // console.log(this.composites)
this.mapList = []; this.mapList = [];
this.addPropsMap.clear() this.addPropsMap.clear()
this.obstaclePropMap.clear() this.obstaclePropMap.clear()
......
src/scenes/components/AddProp.ts
View file @ 0aac460e
import * as Matter from "matter-js"; import * as Matter from "matter-js";
import { RES } from "../../../module/RES"; import { RES } from "../../../module/RES";
import UI from "../../UI";
export default class AddProp extends FYGE.Container { export default class AddProp extends FYGE.Container {
public phyBody: Matter.Body; public phyBody: Matter.Body;
itemImg: FYGE.Sprite; itemImg: FYGE.Sprite;
constructor() { fx;
fy;
index;
constructor(data?) {
super(); super();
let itemImg = this.itemImg = new FYGE.Sprite(); this.fx = data.fx;
let gameType = "" this.fy = data.fy;
if(Math.random()*10<=5){ this.index = data.index;
itemImg.texture = RES.getRes("tianpop.png"); this.position.set(this.fx, this.fy);
gameType = 'addProp_tian'; let itemImg = this.itemImg = UI.Sp(this, "word_静.png", 0, 0);
}else{ console.log("this.fx-->", this.fx, this.fy, itemImg.x, itemImg.y)
itemImg.texture = RES.getRes("xiangpop.png"); // 0 - wordList长度之间的随机数
gameType = 'addProp_xiang';
} // let itemImg = this.itemImg = new FYGE.Sprite();
// let gameType = ""
// if (Math.random() * 10 <= 5) {
itemImg.position.set(-itemImg.width / 2, -itemImg.height / 2);
this.addChild(itemImg); // gameType = 'addProp_tian';
// } else {
this.phyBody = Matter.Bodies.rectangle(this.x, this.y, itemImg.width / 2, itemImg.height / 2, { // itemImg.texture = RES.getRes("xiangpop.png");
// gameType = 'addProp_xiang';
// }
this.phyBody = Matter.Bodies.rectangle(this.fx/2, this.fy/2, itemImg.width/ 2, itemImg.height/ 2, {
isStatic: true, isStatic: true,
friction: 1, friction: 1,
isSensor: true, // 传感器，可以检测到碰撞，但是不参与碰撞 isSensor: true, // 传感器，可以检测到碰撞，但是不参与碰撞
render: {
fillStyle: "blue" // 填充的颜色
}
}); });
this.phyBody.gameType = gameType; // this.phyBody.gameType = gameType;
setTimeout(() => {
this.setPhyPos();
}, 200)
}
set fx(value: number) {
this.position.x = value;
this.setPhyPos();
} }
set fy(value: number) {
this.position.y = value;
this.setPhyPos();
}
setPhyPos() {
try {
Matter.Body.setPosition(this.phyBody, {
x: (this.x),
y: (this.y),
});
} catch (e) { }
}
} }
\ No newline at end of file
src/scenes/components/MapItem.ts
View file @ 0aac460e
...@@ -5,12 +5,20 @@ import UI from "../../UI"; ...@@ -5,12 +5,20 @@ import UI from "../../UI";
export default class MapItem extends FYGE.Container { export default class MapItem extends FYGE.Container {
public phyBody: Matter.Body; public phyBody: Matter.Body;
itemImg: FYGE.Sprite; itemImg: FYGE.Sprite;
constructor() { fx;
fy;
index;
constructor(data?) {
super(); super();
this.fx = data.fx;
this.fy = data.fy;
this.index = data.index;
// itemImg.position.set(-itemImg.width / 2, -10); // itemImg.position.set(-itemImg.width / 2, -10);
this.position.set(this.fx, this.fy);
let itemImg = this.itemImg = UI.Sp(this, "cloud.png", 0, 0); let itemImg = this.itemImg = UI.Sp(this, "cloud.png", 0, 0);
UI.Txt(this.itemImg, this.index, 20, "#ff0000", FYGE.TEXT_ALIGN.CENTER, 100, 0, 0)
this.phyBody = Matter.Bodies.rectangle(this.x, this.y,itemImg.width, 5, { // 至于为什么比对的位置, 我也不知道🤷‍♀️
this.phyBody = Matter.Bodies.rectangle(this.fx/2 + 54, this.fy/2 - 50,itemImg.width/2, 10, {
isStatic: true, isStatic: true,
friction: 1, friction: 1,
isSensor: true, // 传感器，可以检测到碰撞，但是不参与碰撞 isSensor: true, // 传感器，可以检测到碰撞，但是不参与碰撞
...@@ -18,29 +26,5 @@ export default class MapItem extends FYGE.Container { ...@@ -18,29 +26,5 @@ export default class MapItem extends FYGE.Container {
fillStyle: "blue" // 填充的颜色 fillStyle: "blue" // 填充的颜色
} }
}); });
this.phyBody.gameType = 'item'
setTimeout(() => {
this.setPhyPos();
}, 200)
}
set fx(value: number) {
this.position.x = value;
this.setPhyPos();
}
set fy(value: number) {
this.position.y = value;
this.setPhyPos();
} }
setPhyPos() {
Matter.Body.setPosition(this.phyBody, {
x: (this.x),
y: (this.y),
});
}
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment