Skip to content

Z
zjzy_client_game
Commit 347546a9 authored by 王勇霞's avatar 王勇霞
Browse files
Options

feat: 定位刚体位置

parent 15d9b7f8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 269 additions and 294 deletions
resource/GameScene/controlpeo.png
View replaced file @ 15d9b7f8 View file @ 347546a9
resource/GameScene/controlpeo.png

23.3 KB | W: | H:

resource/GameScene/controlpeo.png

1.77 KB | W: | H:

resource/GameScene/controlpeo.png
resource/GameScene/controlpeo.png
resource/GameScene/controlpeo.png
resource/GameScene/controlpeo.png
  • 2-up
  • Swipe
  • Onion skin
resource/res.json
View file @ 347546a9
......@@ -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,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",
"keys": "cdbg.png,cloud.png,controlpeo.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"
},
{
......@@ -29,7 +29,7 @@
"name": "common"
},
{
"keys": "atmosphere.svga,crypeo.svga,guidecount.svga,jumppeo.svga,left.svga,popstar.svga,right.svga,startbtn.svga,startpeo.svga,startpeople.svga,startpop.svga",
"keys": "atmosphere.svga,crypeo.svga,guidecount.svga,jumppeo.svga,left.svga,light.svga,popstar.svga,right.svga,startbtn.svga,startpeo.svga,startpeople.svga,startpop.svga,有字完美光效.svga",
"name": "svga"
}
],
......
src/Main.ts
View file @ 347546a9
......@@ -25,7 +25,7 @@ export class Main {
private _pause: boolean;
private canvas: HTMLCanvasElement
constructor(canvas: HTMLCanvasElement, data = {
time: 60,
time: 200,
longitude: "",
latitude: ""
}) {
......@@ -45,7 +45,7 @@ export class Main {
sysInfo && sysInfo.windowWidth || document.body.clientWidth, //显示宽度，全屏就是屏幕宽度
sysInfo && sysInfo.windowHeight || document.body.clientHeight,//显示高度，全屏就是屏幕高度
FYGE.RENDERER_TYPE.CANVAS,//渲染模式canvas
true, //视窗居中裁切
true, //视窗居中裁切
false,//不定高，定宽适配
sysInfo && sysInfo.pixelRatio || window.devicePixelRatio || 1//分辨率
);
......
src/ResJson.ts
View file @ 347546a9
......@@ -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,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",
"keys": "cdbg.png,cloud.png,controlpeo.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"
},
{
......@@ -29,7 +29,7 @@ export const ResJson = {
"name": "common"
},
{
"keys": "atmosphere.svga,crypeo.svga,guidecount.svga,jumppeo.svga,left.svga,popstar.svga,right.svga,startbtn.svga,startpeo.svga,startpeople.svga,startpop.svga",
"keys": "atmosphere.svga,crypeo.svga,guidecount.svga,jumppeo.svga,left.svga,light.svga,popstar.svga,right.svga,startbtn.svga,startpeo.svga,startpeople.svga,startpop.svga,有字完美光效.svga",
"name": "svga"
}
],
......
src/scenes/GameScene.ts
View file @ 347546a9
This diff is collapsed.
src/scenes/components/AddProp.ts
View file @ 347546a9
......@@ -8,26 +8,18 @@ export default class AddProp extends FYGE.Container {
fx;
fy;
index;
wordTx;
constructor(data?) {
super();
this.fx = data.fx;
this.fy = data.fy;
this.index = data.index;
this.wordTx = data.wordTx;
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, {
let itemImg = this.itemImg = UI.Sp(this, `word_${this.wordTx}.png`, 0, 0);
var scale = document.body.clientWidth / 750;
this.phyBody = Matter.Bodies.rectangle(this.fx*scale+itemImg.width*scale/2, this.fy*scale+itemImg.height*scale/2-data.stageY*scale, itemImg.width*scale, itemImg.height*scale, {
isStatic: true,
friction: 1,
isSensor: true, // 传感器，可以检测到碰撞，但是不参与碰撞
......
src/scenes/components/MapItem.ts
View file @ 347546a9
......@@ -13,32 +13,22 @@ export default class MapItem extends FYGE.Container {
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);
UI.Txt(this, this.index, 20, "#ff0000", FYGE.TEXT_ALIGN.LEFT, 100, 0, 0)
var scale = document.body.clientWidth / 750;
console.info(scale)
var desW = 750;
var divW = document.body.clientWidth;
var divH = document.body.clientHeight;
// 至于为什么比对的位置, 我也不知道🤷‍♀️
// 至于为什么比对的位置, FYGE的适配缩放, 以及Main的剪裁
this.phyBody = Matter.Bodies.rectangle(this.fx*scale+itemImg.width*scale/2, this.fy*scale+itemImg.height*scale/2-data.stageY*scale,itemImg.width*scale, 10, {
isStatic: true,
friction: 1,
friction: 0,
isSensor: true, // 传感器，可以检测到碰撞，但是不参与碰撞
render: {
fillStyle: "blue" // 填充的颜色
}
});
// 1334:1334/2 + 70
// this.phyBody = Matter.Bodies.rectangle(0, 1332/2,itemImg.width/2, 10, {
// isStatic: true,
// friction: 1,
// isSensor: true, // 传感器，可以检测到碰撞，但是不参与碰撞
// render: {
// fillStyle: "blue" // 填充的颜色
// }
// });
this.phyBody.objType = "cloud"
}
}
\ No newline at end of file
src/scenes/components/Role.ts
View file @ 347546a9
import * as Matter from "matter-js";
import { RES } from "../../../module/RES";
import UI from "../../UI";
export default class Role extends FYGE.Container {
public phyBody: Matter.Body;
roleImg: FYGE.Sprite;
itemImg: FYGE.Sprite;
beforeY = 0;
direction = 'down';
waittingSvga;
jumpSvga;
downSvga;
lightSvga;
fx;
fy;
bili;
staY;
constructor() {
constructor(data?) {
super();
// console.log(getAssetByUUID("waittingSvga"),'getAssetByUUID("waittingSvga")')
// this.waittingSvga = new MovieClip(getAssetByUUID("waittingSvga"));
// this.waittingSvga.position.set(-this.waittingSvga.videoWidth / 2, -this.waittingSvga.videoHeight / 2)
// this.addChild(this.waittingSvga);
// this.waittingSvga.play()
// console.log(this.waittingSvga.videoWidth)
// debugger
let roleImg = this.roleImg = new FYGE.Sprite();
roleImg.texture = RES.getRes("controlpeo.png");
this.getSvga()
// roleImg.position.set(-roleImg.width / 2, -roleImg.height / 2);
// // roleImg.scaleX = 0.5
// // roleImg.scaleY = 0.5
// this.addChild(roleImg);
// this.initVisible();
// this.waittingSvga.visible = true;
this.phyBody = Matter.Bodies.circle(this.x, this.y,roleImg.width/2, {
friction: 1,
this.fx = data.fx;
this.fy = data.fy;
this.staY = data.stageY;
this.position.set(this.fx, this.fy);
let itemImg = this.itemImg = UI.Sp(this, "controlpeo.png", 0, 0);
let scale = this.bili = document.body.clientWidth / 750;
// 至于为什么比对的位置, FYGE的适配缩放, 以及Main的剪裁
this.phyBody = Matter.Bodies.rectangle(this.fx * scale + itemImg.width * scale / 2, this.fy * scale + itemImg.height * scale / 2 - data.stageY * scale, itemImg.width * scale, itemImg.height * scale, {
isStatic: false,
isSensor: false, // 传感器，可以检测到碰撞，但是不参与碰撞
restitution: 0.8,
friction: 0.01,
inverseMass: 0.2,
// restitution: 0.8, // 定义刚体恢复（弹性）的数字
// // // density: 0.05,// 定义刚体密度的数字，即单位面积的质量
// // friction: 0.02,
// friction: 0.5, // 设置摩擦力
// frictionAir: 0.01, // 设置空气摩擦力
render: {
fillStyle: "red" // 填充的颜色
}
});
this.setPhyPos();
// 绘制ip
this.getSvga()
this.addEventListener(
FYGE.Event.ADDED_TO_STAGE,
() => {
......@@ -48,164 +50,120 @@ export default class Role extends FYGE.Container {
},
this
);
}
async getSvga(){
async getSvga() {
this.jumpSvga = new FYGE.SvgaAni(await RES.getResAsync("jumppeo.svga"));
this.jumpSvga.position.set(-this.jumpSvga.videoWidth / 2, -this.jumpSvga.videoHeight / 2)
this.addChild(this.jumpSvga);
this.jumpSvga.position.set(-(this.jumpSvga.videoWidth - this.itemImg.width) / 2, -(this.jumpSvga.videoHeight - this.itemImg.height) / 2)
this.itemImg.addChild(this.jumpSvga);
this.downSvga = new FYGE.SvgaAni(await RES.getResAsync("crypeo.svga"));
this.downSvga.position.set(-this.downSvga.videoWidth / 2, -this.downSvga.videoHeight / 2)
this.downSvga.position.set(-(this.downSvga.videoWidth - this.itemImg.width) / 2, -(this.downSvga.videoHeight - this.itemImg.height) / 2)
this.downSvga.visible = false
this.addChild(this.downSvga);
this.itemImg.addChild(this.downSvga);
this.lightSvga = new FYGE.SvgaAni(await RES.getResAsync("light.svga"));
this.lightSvga.position.set(-(this.lightSvga.videoWidth - this.itemImg.width) / 2, -(this.lightSvga.videoHeight - this.itemImg.height) / 2)
this.lightSvga.visible = false
this.itemImg.addChild(this.lightSvga);
}
die(callback){
die(callback) {
this.jumpSvga.visible = false;
this.downSvga.visible = true;
FYGE.Tween.get(this.downSvga)
.to({
y:this.downSvga.y+750
},1000)
.call(()=>{
callback()
})
.to({
y: this.downSvga.y + 750
}, 1000)
.call(() => {
callback()
})
}
leftMove(){
leftMove() {
Matter.Body.applyForce(this.phyBody, this.phyBody.position, {
x: 0.1,
x: -0.1,
y: 0
});
}
rightMove(){
rightMove() {
Matter.Body.applyForce(this.phyBody, this.phyBody.position, {
x: -0.1,
x: 0.1,
y: 0
});
}
/** 根据物理刚体，更新当前的坐标。 */
private onFarm() {
if(this.beforeY){
if( this.beforeY >this.phyBody.position.y ){
this.direction = 'up'
}
if( this.beforeY < this.phyBody.position.y ){
this.direction = 'down'
}
}
if(this.phyBody.position.x > 750){
Matter.Body.setPosition( this.phyBody, {
x:0,
y:this.phyBody.position.y
})
}else if(this.phyBody.position.x<0){
Matter.Body.setPosition( this.phyBody, {
x:750,
y:this.phyBody.position.y
})
}else{
this.x = this.phyBody.position.x;
this.y = this.phyBody.position.y;
}
this.beforeY = this.phyBody.position.y;
this.x = (this.phyBody.position.x - this.itemImg.width * this.bili / 2) / this.bili;
this.y = (this.phyBody.position.y + (this.staY * this.bili) - this.itemImg.height * this.bili / 2) / this.bili;
// if (this.beforeY) {
// if (this.beforeY > this.phyBody.position.y) {
// this.direction = 'up'
// }
// if (this.beforeY < this.phyBody.position.y) {
// this.direction = 'down'
// }
// }
// if (this.phyBody.position.x > 750) {
// Matter.Body.setPosition(this.phyBody, {
// x: 0,
// y: this.phyBody.position.y
// })
// } else if (this.phyBody.position.x < 0) {
// Matter.Body.setPosition(this.phyBody, {
// x: 750,
// y: this.phyBody.position.y
// })
// } else {
// this.x = this.phyBody.position.x;
// this.y = this.phyBody.position.y;
// }
// this.beforeY = this.phyBody.position.y;
}
addScore(num: number | string, color: string) {
var score = this.addChild(new FYGE.TextField());
score.x = -300 / 2;
score.y = -280 / 2 - 50;
score.size = 40;
score.bold = true;
score.text = num + '';
score.textWidth = 300;
score.textAlign = FYGE.TEXT_ALIGN.CENTER;
score.fillColor = color;
FYGE.Tween.get(score, { loop: false }).to({
y: -280 / 2 - 100,
}, 1000, FYGE.Ease.quadInOut).call(() => {
// score.destroy()
FYGE.Tween.get(score, { loop: false }).to({
alpha: 0,
}, 300).call(() => {
score.destroy()
})
})
}
jump() {
if( this.direction == 'up'){return};
setTimeout(()=>{
setTimeout(() => {
Matter.Body.applyForce(this.phyBody, this.phyBody.position, {
x: 0,
y: -1.2
y: -0.1
});
})
}
onMouseDown(e) {
let offsetX = e.stageX - this.x;
let offsetY = e.stageY - this.y;
this.stage.addEventListener(
FYGE.MouseEvent.MOUSE_MOVE,
function (event) {
let resx = event.stageX - offsetX;
let resy = event.stageY - offsetY;
if (resx < 50 || resx > 700) { return }
this.x = resx;
// this.y = resy;
Matter.Body.setPosition(this.phyBody, {
x: resx,
y: this.y,
});
},
this
);
this.stage.addEventListener(
FYGE.MouseEvent.MOUSE_UP,
function (event) {
this.stage.removeAllEventListener()
},
this
);
}
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),
});
}
// onMouseDown(e) {
// let offsetX = e.stageX - this.x;
// let offsetY = e.stageY - this.y;
// this.stage.addEventListener(
// FYGE.MouseEvent.MOUSE_MOVE,
// function (event) {
// let resx = event.stageX - offsetX;
// let resy = event.stageY - offsetY;
// if (resx < 50 || resx > 700) { return }
// this.x = resx;
// // this.y = resy;
// Matter.Body.setPosition(this.phyBody, {
// x: resx,
// y: this.y,
// });
// },
// this
// );
// this.stage.addEventListener(
// FYGE.MouseEvent.MOUSE_UP,
// function (event) {
// this.stage.removeAllEventListener()
// },
// this
// );
// }
}
\ 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