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 @@
"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"
},
{
......
src/ResJson.ts
View file @ 0aac460e
......@@ -5,7 +5,7 @@ export const ResJson = {
"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"
},
{
......
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 {
this.right.startAniRange(1, 1, 1);
this.left.addEventListener(FYGE.MouseEvent.CLICK, () => {
this.left.startAniRange(1, undefined, 1, () => {})
this.left.startAniRange(1, undefined, 1, () => { })
this._role.leftMove()
})
this.right.addEventListener(FYGE.MouseEvent.CLICK, () => {
this.right.startAniRange(1, undefined, 1, () => {})
this.right.startAniRange(1, undefined, 1, () => { })
this._role.rightMove()
})
......@@ -77,7 +77,7 @@ export class GameScene extends Scene {
this.initMap();
// TODO_wyx
this.upDateInfo()
// this.upDateInfo()
}
score;
......@@ -147,18 +147,6 @@ export class GameScene extends Scene {
addPropsMap = new Map();
obstaclePropMap = new Map();
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;
this.engine = Engine.create(
{
......@@ -166,7 +154,7 @@ export class GameScene extends Scene {
}
);
this.world = this.engine.world;
this.engine.gravity.y = 1.5;
this.engine.gravity.y = 0;
/** 真正运行 */
this.runner = Runner.create();
......@@ -174,40 +162,39 @@ export class GameScene extends Scene {
// @ts-ignore
this.composites = Composite;
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, "collisionStart", this.onCollisionStart.bind(this));
// Matter.Events.on(this.engine, "tick", this.onCollisionTick.bind(this));
// 创建一个渲染器
const render = Render.create({
// element: document.body,
canvas: document.getElementById("renderCanvas"),
engine: this.engine,
options: {
width: document.body.clientWidth,
height: document.body.clientHeight,
pixelRatio:window.devicePixelRatio, // 设置像素比
background: "rgba(255,255,255,0.3)", // 全局渲染模式时背景色
wireframeBackground: "rgba(255,255,255,0.3)", // 线框模式时背景色
hasBounds: false,
wireframes: false, // 线框模式
showSleeping: true, // 刚体睡眠状态
showDebug: false, // Debug 信息
showBroadphase: false, // 粗测阶段
showBounds: true, // 刚体的界限
showVelocity: false, // 移动刚体时速度
showCollisions: false, // 刚体碰撞点
showSeparations: false, // 刚体分离
showAxes: false, // 刚体轴线
showPositions: true, // 刚体位置
showAngleIndicator: false, // 刚体转角指示
showIds: true, // 显示每个刚体的 ID
showVertexNumbers: false, // 刚体顶点数
showConvexHulls: false, // 刚体凸包点
showInternalEdges: false, // 刚体内部边界
showMousePosition: false, // 鼠标约束线
},
});
Render.run(render);
const render = Render.create({
// element: document.body,
canvas: document.getElementById("renderCanvas"),
engine: this.engine,
options: {
width: document.body.clientWidth,
height: document.body.clientHeight,
pixelRatio: window.devicePixelRatio, // 设置像素比
background: "rgba(255,255,255,0.3)", // 全局渲染模式时背景色
wireframeBackground: "rgba(255,255,255,0.3)", // 线框模式时背景色
hasBounds: false,
wireframes: false, // 线框模式
showSleeping: true, // 刚体睡眠状态
showDebug: false, // Debug 信息
showBroadphase: false, // 粗测阶段
showBounds: true, // 刚体的界限
showVelocity: false, // 移动刚体时速度
showCollisions: false, // 刚体碰撞点
showSeparations: false, // 刚体分离
showAxes: false, // 刚体轴线
showPositions: true, // 刚体位置
showAngleIndicator: false, // 刚体转角指示
showIds: true, // 显示每个刚体的 ID
showVertexNumbers: false, // 刚体顶点数
showConvexHulls: false, // 刚体凸包点
showInternalEdges: false, // 刚体内部边界
showMousePosition: false, // 鼠标约束线
},
});
Render.run(render);
}
onCollisionTick(e) {
}
......@@ -227,7 +214,7 @@ export class GameScene extends Scene {
num = 2
}
this._role.addScore('+' + num, '#ffffff')
this.score += num
this.composites.remove(this.world, prop.phyBody);
prop.destroy();
......@@ -262,83 +249,38 @@ export class GameScene extends Scene {
}
initMap() {
let stageHeight = this.stage.stageHeight;
this.createLineItem(stageHeight - 100, 380, false);
// for (let i = 0; i < 10; i++) {
// if (i < 4) {
// this.createLineItem(stageHeight - (240 * (i + 2)), 0, false);
// } else {
// this.createLineItem(stageHeight - (240 * (i + 2)));
// }
// }
console.log("stageHeight", stageHeight)
// 循环多建几行
for (let i = 0; i < 10; i++) {
this.createLineItem(stageHeight - (184 * (i + 1)), 0, false);
}
}
mapList = [];
createLineItem(h, x?: number, isprop = true) {
let nx = x ? x : Math.floor(Math.random() * 570 + 90);
if (isprop) {
let rate = Math.floor(Math.random() * 20);
switch (true) {
case rate < 18:
// 添加花🌹加分元素
let addProp = new AddProp();
addProp.fx = nx;
addProp.fy = h - 25;
this.bgCon.addChildAt(addProp, 0)
this.composites.add(this.world, [addProp.phyBody]);
this.addPropsMap.set(addProp.phyBody.id, addProp);
break;
case rate >= 19 && rate <= 20:
// 添加障碍元素
let obstacleProp = new ObstacleProp()
obstacleProp.fx = nx;
obstacleProp.fy = h - 40;
this.bgCon.addChildAt(obstacleProp, 0)
this.composites.add(this.world, [obstacleProp.phyBody]);
this.obstaclePropMap.set(obstacleProp.phyBody.id, obstacleProp)
break
default:
break
}
let sx = x ? x : Math.floor(Math.random() * 300 -100); // 初始第一朵云的坐标
let rLen = Math.floor(Math.random() * 4 + 2); // 每一行随机出现几朵云
let space = Math.floor(Math.random() * 80); // 增加一点随机间距
console.log("--->", sx, rLen, space)
for(let i=0; i<rLen; i++){
let mapItem = new MapItem({
fx: sx + i*222 + i*(space + 20),
fy: h,
index: this.mapList.length + 1
});
this.bgCon.addChildAt(mapItem, 0);
this.composites.add(this.world, [mapItem.phyBody]);
// 添加文字
let addProp = new AddProp({
fx: sx + i*222 + i*(space + 20) + 46,
fy: h - 70,
index: this.mapList.length + 1
});
this.bgCon.addChildAt(addProp, 1)
this.composites.add(this.world, [addProp.phyBody]);
this.mapList.push([mapItem, addProp])
// this.addPropsMap.set(addProp.phyBody.id, addProp);
}
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;
onFarm() {
......@@ -369,7 +311,7 @@ export class GameScene extends Scene {
}
// 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) {
this.composites.remove(this.world, this._role.phyBody);
console.log("siwang")
......@@ -385,10 +327,10 @@ export class GameScene extends Scene {
this.bgCon.y = this.bgCon.y + y;
}
removeWorld(){
removeWorld() {
this.composites.clear(this.world)
// console.log(this.composites)
this.mapList = [];
this.addPropsMap.clear()
this.obstaclePropMap.clear()
......
src/scenes/components/AddProp.ts
View file @ 0aac460e
import * as Matter from "matter-js";
import { RES } from "../../../module/RES";
import UI from "../../UI";
export default class AddProp extends FYGE.Container {
public phyBody: Matter.Body;
itemImg: FYGE.Sprite;
constructor() {
fx;
fy;
index;
constructor(data?) {
super();
let itemImg = this.itemImg = new FYGE.Sprite();
let gameType = ""
if(Math.random()*10<=5){
itemImg.texture = RES.getRes("tianpop.png");
gameType = 'addProp_tian';
}else{
itemImg.texture = RES.getRes("xiangpop.png");
gameType = 'addProp_xiang';
}
itemImg.position.set(-itemImg.width / 2, -itemImg.height / 2);
this.addChild(itemImg);
this.phyBody = Matter.Bodies.rectangle(this.x, this.y, itemImg.width / 2, itemImg.height / 2, {
this.fx = data.fx;
this.fy = data.fy;
this.index = data.index;
this.position.set(this.fx, this.fy);
let itemImg = this.itemImg = UI.Sp(this, "word_静.png", 0, 0);
console.log("this.fx-->", this.fx, this.fy, itemImg.x, itemImg.y)
// 0 - wordList长度之间的随机数
// let itemImg = this.itemImg = new FYGE.Sprite();
// let gameType = ""
// if (Math.random() * 10 <= 5) {
// gameType = 'addProp_tian';
// } else {
// 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,
friction: 1,
isSensor: true, // 传感器，可以检测到碰撞，但是不参与碰撞
render: {
fillStyle: "blue" // 填充的颜色
}
});
this.phyBody.gameType = gameType;
setTimeout(() => {
this.setPhyPos();
}, 200)
}
set fx(value: number) {
this.position.x = value;
this.setPhyPos();
// this.phyBody.gameType = gameType;
}
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";
export default class MapItem extends FYGE.Container {
public phyBody: Matter.Body;
itemImg: FYGE.Sprite;
constructor() {
fx;
fy;
index;
constructor(data?) {
super();
this.fx = data.fx;
this.fy = data.fy;
this.index = data.index;
// 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);
this.phyBody = Matter.Bodies.rectangle(this.x, this.y,itemImg.width, 5, {
UI.Txt(this.itemImg, this.index, 20, "#ff0000", FYGE.TEXT_ALIGN.CENTER, 100, 0, 0)
// 至于为什么比对的位置, 我也不知道🤷‍♀️
this.phyBody = Matter.Bodies.rectangle(this.fx/2 + 54, this.fy/2 - 50,itemImg.width/2, 10, {
isStatic: true,
friction: 1,
isSensor: true, // 传感器，可以检测到碰撞，但是不参与碰撞
......@@ -18,29 +26,5 @@ export default class MapItem extends FYGE.Container {
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