Skip to content

Commit

Permalink
Update GamePage.jsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaowanlu
gaowanlu committed Apr 10, 2024
1 parent 3a7261c commit 4821d4c
Showing 1 changed file with 114 additions and 61 deletions.
175 changes: 114 additions & 61 deletions src/pages/GamePage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Phaser from "phaser";
import React from 'react';
import React, { useState } from 'react';
import { AppBar, Toolbar, Typography } from '@mui/material';
import LabelBottomNavigation from '../components/LabelBottomNavigation';
import styled from "styled-components";
Expand Down Expand Up @@ -86,6 +86,8 @@ function hitdog(player, dog) {
}

function GamePage() {
const [pingText, setPingText] = useState('');

useEffect(() => {
const config = {
type: Phaser.AUTO,
Expand Down Expand Up @@ -146,17 +148,38 @@ function GamePage() {
// 创建场景
function create() {
// 创建地图
let map = this.make.tilemap({ key: 'map' });
let map = this.make.tilemap({ key: 'map', tileWidth: 32, tileHeight: 32 });
// 添加图块集到地图
let tiles = map.addTilesetImage('terrain_atlas', 'tiles');
let tileset = map.addTilesetImage('terrain_atlas', 'tiles');

map.setCollisionByProperty({ collides: true });
// console.log(map);
// 添加图块层
let layer3 = map.createLayer("scene_layer3", tiles, 0, 0);
let layer3 = map.createLayer("scene_layer3", tileset, 0, 0);
console.log("map", map);
layer3.setCollisionByExclusion([-1]);
let layer1 = map.createLayer("scene_layer1", tiles, 0, 0);
// layer3.setCollisionBetween(1, 200);
layer3.setInteractive();
layer3.on('pointerdown', (pointer, tileX, tileY) => {
console.log(`Clicked tile layer3 at (${tileX},${tileY})`);
});

let layer1 = map.createLayer("scene_layer1", tileset, 0, 0);
layer1.setCollisionByExclusion([-1]);
let layer2 = map.createLayer("scene_layer2", tiles, 0, 0);
// layer1.setCollisionBetween(1, 200);
layer1.setInteractive();
layer1.on('pointerdown', (pointer, tileX, tileY) => {
console.log(`Clicked tile layer1 at (${tileX},${tileY})`);
});

let layer2 = map.createLayer("scene_layer2", tileset, 0, 0);
layer2.setCollisionByExclusion([-1]);
// layer2.setCollisionBetween(1, 200);
layer2.setInteractive();
layer2.on('pointerdown', (pointer, tileX, tileY) => {
console.log(`Clicked tile layer2 at (${tileX},${tileY})`);
});


this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
this.cameras.main.setSize(WIDTH, HEIGHT);
Expand Down Expand Up @@ -197,16 +220,16 @@ function GamePage() {
setXY: { x: 140, y: 560, stepX: 100, stepY: 0 }
});

// 添加动态物体
player_before_frame_x = 200;
player_before_frame_y = 200;
player = this.physics.add.sprite(player_before_frame_x, player_before_frame_y, 'sample_character_08').setScale(1.3).refreshBody();
// 创建玩家
player_before_frame_x = 250;
player_before_frame_y = 270;
player = this.physics.add.sprite(player_before_frame_x, player_before_frame_y, 'sample_character_08').setScale(2).refreshBody();

player.setBounce(0.3);// 反弹值
//player.setCollideWorldBounds(true);// 与边界碰撞
//player.body.setGravityY(6000);//重力
//this.physics.world.disable(player);
Players[playerUID] = { player: player, message: [] };
Players[playerUID] = { player: player, message: [], latestSkipTime: new Date() };

this.anims.create({
key: 'left',
Expand Down Expand Up @@ -259,20 +282,26 @@ function GamePage() {
// Load object layer
let objectLayer = map.getObjectLayer('object_layer1');

console.log(objectLayer);

if (objectLayer) {
// Iterate through objects in the object layer
objectLayer.objects.forEach(object => {
console.log(object);
// Example: create a sprite at each object's position
let sprite = this.physics.add.sprite(object.x, object.y - 32, 'tilesetSprite', object.gid - 1);
sprite.setOrigin(0, 0);
this.physics.world.enable(sprite);
Objects.push(sprite);
sprite.body.setImmovable(true);
});
}


Objects.forEach((v, i, arr) => {
this.physics.add.collider(player, v);
this.physics.add.collider(player, v, () => {
v.setVelocity(0, 0);
});
});


Expand Down Expand Up @@ -310,25 +339,28 @@ function GamePage() {
for (let i = 0; i < MessageQueue.length; i++) {
let data = MessageQueue[i];
if (data.Data && data.Data[0]) {
if (data.Data[0].playerUID === playerUID) {
continue;
}
// 自己的发出去的包也要接受
// if (data.Data[0].playerUID === playerUID) {
// continue;
// }
let otherPlayerUID = data.Data[0].playerUID;
if (!Players.hasOwnProperty(otherPlayerUID)) {
if (playerUID !== otherPlayerUID && !Players.hasOwnProperty(otherPlayerUID)) {
// 创建角色
let x = data.Data[0].x;
let y = data.Data[0].y;
let newPlayer = this.physics.add.sprite(x, y, 'sample_character_08').setScale(1.3).refreshBody();
let newPlayer = this.physics.add.sprite(x, y, 'sample_character_08').setScale(2).refreshBody();
newPlayer.setBounce(0.3);// 反弹值
// newPlayer.setCollideWorldBounds(true);// 与边界碰撞
Players[otherPlayerUID] = { player: newPlayer, message: [] };
Players[otherPlayerUID] = { player: newPlayer, message: [], latestSkipTime: new Date() };
// this.physics.add.collider(newPlayer, platforms);
this.physics.add.collider(newPlayer, beds1);
this.physics.add.collider(newPlayer, beds2);
this.physics.add.collider(newPlayer, beds3);

Objects.forEach((v, i, arr) => {
this.physics.add.collider(newPlayer, v);
this.physics.add.collider(newPlayer, v, () => {
v.setVelocity(0, 0);
});
});

}
Expand All @@ -342,23 +374,7 @@ function GamePage() {
}
MessageQueue = [];

// 在每一帧执行的逻辑
let currTime = new Date();
if (!lastTick) {
lastTick = currTime;
} else if (currTime < lastTick) {
lastTick = currTime;
}
// 逻辑帧率25
if (currTime - lastTick >= 60) {
lastTick = currTime;
if (LogicFrame.Data.length > 0) {
WS.send(JSON.stringify(LogicFrame));
LogicFrame.Data = [];
LogicFrame.Num++;
}
}

// 玩家控制begin
{
let gap_x = player.x - player_before_frame_x;
let gap_y = player.y - player_before_frame_y;
Expand Down Expand Up @@ -408,38 +424,73 @@ function GamePage() {
player.anims.stop();
ExistMove = false;
}
// 玩家控制end

// if (cursors.w.isDown && player.body.touching.down) {
// player.setVelocityY(-330);
// }
// Adjust the mini-map's camera to follow the player
miniMap.scrollX = player.x * 0.1 - 200;
miniMap.scrollY = player.y * 0.1 - 200;

if (gameOver) {
game.destroy(true);
// 逻辑帧begin
// 在每一帧执行的逻辑
let currTime = new Date();
if (!lastTick) {
lastTick = currTime;
} else if (currTime < lastTick) {
lastTick = currTime;
}

if (ExistMove) {
// 逻辑帧
if (currTime - lastTick >= 60) {
lastTick = currTime;
if (LogicFrame.Data.length > 0) {
WS.send(JSON.stringify(LogicFrame));
LogicFrame.Data = [];
LogicFrame.Num++;
}
// 缓存Player逻辑帧
let nowAnims = null;
if (ExistMove && player.anims.currentAnim && player.anims.currentAnim.key) {
nowAnims = player.anims.currentAnim.key
};
LogicFrame.Data.push({
vx: player.body.velocity.x,
vy: player.body.velocity.y,
x: player.x,
y: player.y,
frame: frame++,
anims: player.anims.currentAnim.key,
playerUID: playerUID
anims: nowAnims,
playerUID: playerUID,
Time: currTime
});
// Adjust the mini-map's camera to follow the player
miniMap.scrollX = player.x * 0.1 - 200;
miniMap.scrollY = player.y * 0.1 - 200;
}
// 逻辑帧end

// if (cursors.w.isDown && player.body.touching.down) {
// player.setVelocityY(-330);
// }

if (gameOver) {
game.destroy(true);
}

// 遍历所有player除了自己
// 遍历所有player除了自己,其他玩家消息处理
for (let key in Players) {
let otherPlayer = Players[key].player;

// 没消息
if (Players[key].message.length <= 0) {
// 时间太长可能掉线了
if (key !== playerUID && currTime - Players[key].latestSkipTime >= 2000) {
otherPlayer.setVisible(false);
}
continue;
}

let message = Players[key].message.shift();// 取出收个消息
if (key === playerUID) {
setPingText(`${currTime - new Date(message.Time)} ms`);
continue;
}

let otherPlayer = Players[key].player;
// Check if the other player is outside the camera's visible bounds
const relativeX = otherPlayer.x - this.cameras.main.worldView.x;
const relativeY = otherPlayer.y - this.cameras.main.worldView.y;
Expand All @@ -449,23 +500,24 @@ function GamePage() {
// console.log({ relativeX, relativeY, x: otherPlayer.x, y: otherPlayer.y });
otherPlayer.setVisible(!canBeView);

if (Players[key].message.length <= 0) {
Players[key].player.setVelocityX(0);
Players[key].player.setVelocityY(0);
Players[key].player.anims.stop();
continue;
}
let message = Players[key].message.shift();
let gapX = Players[key].player.x - message.x;
let gapY = Players[key].player.y - message.y;
if (Math.abs(gapX) >= 4 || Math.abs(gapY) >= 4) {
// 进行矫正同步下位置 1s同步5次
// let gapX = Players[key].player.x - message.x;
// let gapY = Players[key].player.y - message.y;
if (currTime - Players[key].latestSkipTime >= 200) {
Players[key].player.x = message.x;
Players[key].player.y = message.y;
Players[key].latestSkipTime = currTime;
}

// 设置速度
Players[key].player.setVelocityX(message.vx);
Players[key].player.setVelocityY(message.vy);
Players[key].player.anims.play(message.anims, true);
if (message.anims) {
Players[key].player.anims.play(message.anims, true);
}
else {
Players[key].player.anims.stop();
}
}

}
Expand All @@ -485,6 +537,7 @@ function GamePage() {
</Toolbar>
</MyAppBar>
<MyContainer>
<p>{pingText}</p>
<Typography id="phaser-game-container" align="center"></Typography>
</MyContainer>
<LabelBottomNavigation />
Expand Down

0 comments on commit 4821d4c

Please sign in to comment.