Skip to content

Z
zjzy_client_game
Commit 44cade3f authored by Edwise's avatar Edwise 🍷
Browse files
Options

feat:添加render模式

parent b2a3b31d
Show whitespace changes
Inline Side-by-side
Showing with 410 additions and 359 deletions
index.html
View file @ 44cade3f
......@@ -55,6 +55,7 @@
<div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
<canvas id="canvas" style="width: 100%;height: 100%"></canvas>
</div>
<canvas id="renderCanvas" style="pointer-events: none; position: absolute; width: 100%;height: 100%"></canvas>
<!-- 帧率检测 -->
<!-- <script src="//yun.duiba.com.cn/db_games/libs0924/stats.js"></script> -->
<!-- <script src="https://yun.duiba.com.cn/db_games/libs0126/stats.js"></script> -->
......
src/scenes/GameScene.ts
View file @ 44cade3f
......@@ -4,7 +4,13 @@ import Role from "./components/Role";
import AddProp from "./components/AddProp";
import ObstacleProp from "./components/ObstacleProp";
import MapItem from "./components/MapItem";
import { getWebData, WebNetName, sendWebNet, sendLog, LOG_TYPE } from "../webNet";
import {
getWebData,
WebNetName,
sendWebNet,
sendLog,
LOG_TYPE,
} from "../webNet";
import { showPanel, showToast, changeScene } from "../../module/ctrls";
import { GuidePanel } from "../panels/GuidePanel";
import { StartScene } from "./StartScene";
......@@ -15,8 +21,12 @@ import { Tools } from "../Tools";
import { playAllSound, stopAllSound, cusPlaySound } from "../common/SoundWeb";
import { layers } from "../../module/views/layers";
export class GameScene extends Scene {
get groupNames() { return ["GameScene"] };
get skinName() { return "GameScene" };
get groupNames() {
return ["GameScene"];
}
get skinName() {
return "GameScene";
}
bg: FYGE.Sprite;
cloud: FYGE.Sprite;
......@@ -33,78 +43,71 @@ export class GameScene extends Scene {
close: FYGE.Sprite;
open: FYGE.Sprite;
jumpLock = false;
isonce = false;
public static instance: GameScene;
initUi() {
}
initUi() {}
start(data) {
super.start();
sendLog(LOG_TYPE.EXPOSURE,37)
GameScene.instance = this
sendLog(LOG_TYPE.EXPOSURE, 37);
GameScene.instance = this;
showPanel(GuidePanel);
if (Tools.isMusic) {
this.open.visible = true;
this.close.visible = false
cusPlaySound("bg", true)
this.close.visible = false;
cusPlaySound("bg", true);
} else {
this.open.visible = false;
this.close.visible = true
this.close.visible = true;
}
this.createPhyWorld()
this.createPhyWorld();
this.bgCon = this.addChild(new FYGE.Container());
this.setChildIndex(this.bgCon, 2)
this.setChildIndex(this.bgCon, 2);
this.initMap();
this.scorenum.text = "0"
this.cdnum.text = StartScene.instance.gameInfo.duration
this.scorenum.text = "0";
this.cdnum.text = StartScene.instance.gameInfo.duration;
}
score;
time;
changeMusic() {
this.open.visible = !this.open.visible
this.close.visible = !this.close.visible
Tools.isMusic = !Tools.isMusic
this.open.visible = !this.open.visible;
this.close.visible = !this.close.visible;
Tools.isMusic = !Tools.isMusic;
if (Tools.isMusic) {
// playAllSound()
cusPlaySound("bg", true)
cusPlaySound("bg", true);
} else {
stopAllSound()
stopAllSound();
}
}
upDateInfo() {
this.score = 0
this.time = StartScene.instance.gameInfo.duration
this.scorenum.text = this.score + ""
this.cdnum.text = this.time + ""
this.startGame()
this.countDown(this.time)
this.score = 0;
this.time = StartScene.instance.gameInfo.duration;
this.scorenum.text = this.score + "";
this.cdnum.text = this.time + "";
this.startGame();
this.countDown(this.time);
}
countDown(time) {
this.timer = setTimeout(() => {
if (Number(this.cdnum.text) <= 0) {
clearTimeout(this.timer);
this.composites.remove(this.world, this._role.phyBody);
console.log("zale")
this.gameOver()
return
console.log("zale");
this.gameOver();
return;
}
this.cdnum.text = Number(this.cdnum.text) - 1 + ''
this.countDown(Number(this.cdnum.text))
}, 1000)
this.cdnum.text = Number(this.cdnum.text) - 1 + "";
this.countDown(Number(this.cdnum.text));
}, 1000);
}
startGame() {
this.isonce = false
this.isonce = false;
this.addRole();
this.addEventListener(FYGE.Event.ENTER_FRAME, this.onFarm, this);
......@@ -115,7 +118,7 @@ export class GameScene extends Scene {
addRole() {
let offset = (1624 - this.stage.viewRect.height) / 2;
let role = this._role = new Role();
let role = (this._role = new Role());
role.fx = 380;
role.fy = 980 - offset;
......@@ -130,84 +133,123 @@ export class GameScene extends Scene {
addPropsMap = new Map();
obstaclePropMap = new Map();
private createPhyWorld() {
const { Engine, Render, Runner, Composite, Bodies, World, Composites } = Matter;
this.engine = Engine.create(
{
enableSleeping: true
}
);
const { Engine, Render, Runner, Composite, Bodies, World, Composites } =
Matter;
this.engine = Engine.create({
enableSleeping: true,
});
this.world = this.engine.world;
this.engine.gravity.y = 1.5;
// 创建一个渲染器
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);
/** 真正运行 */
this.runner = Runner.create();
Runner.run(this.runner, this.engine);
// @ts-ignore
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));
}
onCollisionTick(e) {
}
onCollisionTick(e) {}
onCollisionStart(e) {
let pairs = e.pairs;
pairs.map((p) => {
// 🌹与人的碰撞
if (p.bodyB == this._role.phyBody || p.bodyA == this._role.phyBody) {
if (p.bodyB.gameType?.split("_")[0] == 'addProp' || p.bodyA.gameType?.split("_")[0] == 'addProp') {
console.log("加分")
let body = p.bodyB.gameType?.split("_")[0] == 'addProp' ? p.bodyB : p.bodyA;
if (
p.bodyB.gameType?.split("_")[0] == "addProp" ||
p.bodyA.gameType?.split("_")[0] == "addProp"
) {
console.log("加分");
let body =
p.bodyB.gameType?.split("_")[0] == "addProp" ? p.bodyB : p.bodyA;
let prop = this.addPropsMap.get(body.id);
let num = 1
let num = 1;
if (body.gameType.split("_")[1] == "tian") {
num = 1
num = 1;
} else {
num = 2
num = 2;
}
this._role.addScore('+' + num, '#ffffff')
this._role.addScore("+" + num, "#ffffff");
if (Tools.isMusic) {
cusPlaySound("get", false)
cusPlaySound("get", false);
}
this.scorenum.text = Number(this.scorenum.text) + num + '';
this.score += num
this.scorenum.text = Number(this.scorenum.text) + num + "";
this.score += num;
this.composites.remove(this.world, prop.phyBody);
prop.destroy();
this.bgCon.removeChild(prop)
this.bgCon.removeChild(prop);
this.addPropsMap.delete(body.id);
} else if (p.bodyB.gameType == 'dieProp' || p.bodyA.gameType == 'dieProp') {
} else if (
p.bodyB.gameType == "dieProp" ||
p.bodyA.gameType == "dieProp"
) {
// 死亡💀
console.log("死亡")
console.log("死亡");
if (Tools.isMusic) {
cusPlaySound("fail", false)
cusPlaySound("fail", false);
}
let body = p.bodyB.gameType == 'dieProp' ? p.bodyB : p.bodyA;
let body = p.bodyB.gameType == "dieProp" ? p.bodyB : p.bodyA;
let prop = this.obstaclePropMap.get(body.id);
this.composites.remove(this.world, prop.phyBody);
prop.destroy();
this.bgCon.removeChild(prop)
this.bgCon.removeChild(prop);
this.obstaclePropMap.delete(body.id);
// this.removeWorld()
this.composites.remove(this.world, this._role.phyBody);
clearTimeout(this.timer);
this.gameOver()
this.gameOver();
} else {
if (!this.jumpLock) {
if (Tools.isMusic) {
cusPlaySound("jump", false)
cusPlaySound("jump", false);
}
this._role.jump()
this._role.jump();
this.jumpLock = true;
setTimeout(() => {
this.jumpLock = false
}, 300)
this.jumpLock = false;
}, 300);
}
}
}
});
}
......@@ -217,18 +259,12 @@ export class GameScene extends Scene {
this.createLineItem(stageHeight - 240, 380, false);
for (let i = 0; i < 10; i++) {
if (i < 4) {
this.createLineItem(stageHeight - (240 * (i + 2)), 0, false);
this.createLineItem(stageHeight - 240 * (i + 2), 0, false);
} else {
this.createLineItem(stageHeight - (240 * (i + 2)));
this.createLineItem(stageHeight - 240 * (i + 2));
}
}
}
mapList = [];
createLineItem(h, x?: number, isprop = true) {
......@@ -243,158 +279,167 @@ export class GameScene extends Scene {
let addProp = new AddProp();
addProp.fx = nx;
addProp.fy = h - 25;
this.bgCon.addChildAt(addProp, 0)
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()
let obstacleProp = new ObstacleProp();
obstacleProp.fx = nx;
obstacleProp.fy = h - 40;
this.bgCon.addChildAt(obstacleProp, 0)
this.bgCon.addChildAt(obstacleProp, 0);
this.composites.add(this.world, [obstacleProp.phyBody]);
this.obstaclePropMap.set(obstacleProp.phyBody.id, obstacleProp)
break
this.obstaclePropMap.set(obstacleProp.phyBody.id, obstacleProp);
break;
default:
break
break;
}
}
let mapItem = new MapItem();
mapItem.fx = nx;
mapItem.fy = h
this.bgCon.addChildAt(mapItem, 0)
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])
this.mapList.push([mapItem, spriteItem]);
}
createOtherItem(x, h) {
let dx = Math.floor(Math.random() * 280 + 90);
if (dx + 90 > x - 90) {
dx = dx + 310
dx = dx + 310;
}
let mapItem = new MapItem();
mapItem.fx = dx;
mapItem.fy = h
mapItem.fy = h;
this.bgCon.addChildAt(mapItem, 0);
this.composites.add(this.world, [mapItem.phyBody]);
return mapItem
return mapItem;
}
timer = null;
onFarm() {
let roleY = this._role.y + this.bgCon.y;
if (roleY < 600) {
this.moveMap(600 - roleY)
this.moveMap(600 - roleY);
}
let lastLine = this.mapList[0],
lastItem = lastLine[0];
if (lastItem.y + this.bgCon.y > this.stage.stageHeight + 10) {
lastLine.forEach(item => {
lastLine.forEach((item) => {
this.composites.remove(this.world, item.phyBody);
item.destroy();
this.bgCon.removeChild(item)
})
this.bgCon.removeChild(item);
});
this.mapList.shift()
this.mapList.shift();
}
let firstLine = this.mapList[this.mapList.length - 1],
firstItem = firstLine[0];
if (firstItem.y + this.bgCon.y > -100) {
this.createLineItem(firstItem.y - 240)
this.createLineItem(firstItem.y - 240);
}
// 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")
console.log("siwang");
clearTimeout(this.timer);
this.gameOver()
this.gameOver();
// 复活需要初始化
this.isonce = true
this.isonce = true;
}
}
}
moveMap(y) {
this.bgCon.y = this.bgCon.y + y;
}
removeWorld(){
this.composites.clear(this.world)
removeWorld() {
this.composites.clear(this.world);
// console.log(this.composites)
this.mapList = [];
this.addPropsMap.clear()
this.obstaclePropMap.clear()
console.log(this.obstaclePropMap)
console.log(this.addPropsMap)
console.log(this.mapList)
this.addPropsMap.clear();
this.obstaclePropMap.clear();
console.log(this.obstaclePropMap);
console.log(this.addPropsMap);
console.log(this.mapList);
}
//游戏结束
async gameOver() {
this.removeEventListener(FYGE.Event.ENTER_FRAME, this.onFarm, this);
this.removeWorld()
let startInfo = getWebData(WebNetName.startGame).data.currInfo
let timestamp = new Date().getTime()
this.removeWorld();
let startInfo = getWebData(WebNetName.startGame).data.currInfo;
let timestamp = new Date().getTime();
//签名方式: md5(score=分值&startId=游戏开始id&timestamp=timestamp&key=key)
//其中key的值为开始游戏接口里返回的key+固定值9ef16b33920749fb26e8fc2f2913150a, 例如1234569ef16b33920749fb26e8fc2f2913150a
let sign = duiba_md5(`score=${this.score}&startId=${startInfo.startId}&timestamp=${timestamp}&key=${startInfo.key + "9ef16b33920749fb26e8fc2f2913150a"}`)
const { success, data, message } = await sendWebNet(WebNetName.submitGame, { score: this.score, sign: sign, code: startInfo.code, timestamp: timestamp ,startId:startInfo.startId})
let sign = duiba_md5(
`score=${this.score}&startId=${
startInfo.startId
}&timestamp=${timestamp}&key=${
startInfo.key + "9ef16b33920749fb26e8fc2f2913150a"
}`
);
const { success, data, message } = await sendWebNet(WebNetName.submitGame, {
score: this.score,
sign: sign,
code: startInfo.code,
timestamp: timestamp,
startId: startInfo.startId,
});
this._role.die(() => {
this.bgCon.removeChildren()
this.bgCon.y = 0
this.bgCon.removeChildren();
this.bgCon.y = 0;
if (!success) {
showToast(message || "网络异常，请重试~")
changeScene(StartScene)
return
showToast(message || "网络异常，请重试~");
changeScene(StartScene);
return;
}
if (data.pass) {
showPanel(SuccessPanel)
showPanel(SuccessPanel);
} else {
showPanel(FailPanel)
showPanel(FailPanel);
}
})
});
}
initEvents() {
super.initEvents();
this.left.addEventListener(FYGE.MouseEvent.CLICK, () => {
sendLog(LOG_TYPE.CLICK,37)
this._role.leftMove()
})
sendLog(LOG_TYPE.CLICK, 37);
this._role.leftMove();
});
this.right.addEventListener(FYGE.MouseEvent.CLICK, () => {
sendLog(LOG_TYPE.CLICK,37)
this._role.rightMove()
})
this.open.addEventListener(FYGE.MouseEvent.CLICK, this.changeMusic, this)
this.close.addEventListener(FYGE.MouseEvent.CLICK, this.changeMusic, this)
sendLog(LOG_TYPE.CLICK, 37);
this._role.rightMove();
});
this.open.addEventListener(FYGE.MouseEvent.CLICK, this.changeMusic, this);
this.close.addEventListener(FYGE.MouseEvent.CLICK, this.changeMusic, this);
}
removeEvents() {
super.removeEvents();
this.open.removeEventListener(FYGE.MouseEvent.CLICK, this.changeMusic, this)
this.close.removeEventListener(FYGE.MouseEvent.CLICK, this.changeMusic, this)
stopAllSound()
this.open.removeEventListener(
FYGE.MouseEvent.CLICK,
this.changeMusic,
this
);
this.close.removeEventListener(
FYGE.MouseEvent.CLICK,
this.changeMusic,
this
);
stopAllSound();
}
}
yarn.lock
View file @ 44cade3f
......@@ -1058,6 +1058,11 @@
resolved "http://npm.dui88.com:80/@types%2fnode/-/node-18.15.5.tgz#3af577099a99c61479149b716183e70b5239324a"
integrity sha512-Ark2WDjjZO7GmvsyFFf81MXuGTA/d6oP38anyxWOL6EREyBKAxKoFHwBhaZxCfLRLpO8JgVXwqOwSwa7jRcjew==
"@types/node@^16.18.18":
version "16.18.18"
resolved "http://npm.dui88.com:80/@types%2fnode/-/node-16.18.18.tgz#06cb0eeb5a0175d26d99b7acf4db613ca30cb07f"
integrity sha512-fwGw1uvQAzabxL1pyoknPlJIF2t7+K90uTqynleKRx24n3lYcxWa3+KByLhgkF8GEAK2c7hC8Ki0RkNM5H15jQ==
"@webassemblyjs/ast@1.9.0":
version "1.9.0"
resolved "http://npm.dui88.com:80/@webassemblyjs%2fast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
......
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