效果展示
资源
图片资源
地图资源
src/GameScenes/Scene02/Tilemaps/map.json
{ "compressionlevel":-1,
"height":6,
"infinite":true,
"layers":[
{
"chunks":[
{
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0,
2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0,
3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":16,
"width":16,
"x":0,
"y":0
}],
"height":16,
"id":1,
"name":"sky",
"opacity":1,
"startx":0,
"starty":0,
"type":"tilelayer",
"visible":true,
"width":16,
"x":0,
"y":0
},
{
"chunks":[
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
4, 6, 5, 4, 6, 5, 4, 6, 5, 4, 6, 5, 0, 0, 0, 0,
7, 9, 8, 7, 9, 8, 7, 9, 8, 7, 9, 8, 0, 0, 0, 0,
10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":16,
"width":16,
"x":0,
"y":0
}],
"height":16,
"id":2,
"name":"ground",
"opacity":1,
"startx":0,
"starty":0,
"type":"tilelayer",
"visible":true,
"width":16,
"x":0,
"y":0
}],
"nextlayerid":3,
"nextobjectid":1,
"orientation":"orthogonal",
"renderorder":"left-up",
"tiledversion":"1.9.0",
"tileheight":16,
"tilesets":[
{
"columns":1,
"firstgid":1,
"image":"sky.png",
"imageheight":48,
"imagewidth":16,
"margin":0,
"name":"sky",
"spacing":0,
"tilecount":3,
"tileheight":16,
"tilewidth":16
},
{
"columns":3,
"firstgid":4,
"image":"ground.png",
"imageheight":48,
"imagewidth":48,
"margin":0,
"name":"ground",
"spacing":0,
"tilecount":9,
"tileheight":16,
"tilewidth":16
}],
"tilewidth":16,
"type":"map",
"version":"1.9",
"width":12
}创建地图
天空地面循环滚动
左键：
减速右键：
加速不按：
普通速度
import Phaser from 'phaser';
export default class MainScene extends Phaser.Scene {
// 地图
private map: Phaser.Tilemaps.Tilemap | undefined;
// 天空图层
private skyLayer: Phaser.Tilemaps.TilemapLayer | undefined;
// 地面图层
private groundLayer: Phaser.Tilemaps.TilemapLayer | undefined;
// 缩放系数
private mapScale: number = 6.25;
// 当前速度
private currentVelocity: number = 1.5;
// 速度
private velocity: number = 1.5;
// 加速度
private acceleration: number = 1;
// 距离
private distance: number = 0;
// 键盘
private cursors: Phaser.Types.Input.Keyboard.CursorKeys | undefined;
constructor() {
super({
key: 'MainScene',
physics: {
default: 'arcade',
arcade: {
debug: true
}
},
});
}
preload() {
// 天空地面
{
const map = new URL(`../Tilemaps/map.json`, import.meta.url).href;
const sky = new URL(`../Tilemaps/sky.png`, import.meta.url).href;
const ground = new URL(`../Tilemaps/ground.png`, import.meta.url).href;
this.load.tilemapTiledJSON('map', map);
this.load.image('sky', sky);
this.load.image('ground', ground);
}
}
create() {
// 添加键盘控制
{
this.cursors = this.input.keyboard.createCursorKeys();
}
// 创建天空地面
{
this.map = this.make.tilemap({key: 'map'});
const sky = this.map.addTilesetImage('sky', 'sky');
const ground = this.map.addTilesetImage('ground', 'ground');
this.skyLayer = this.map.createLayer('sky', sky, 0, 0).setScale(this.mapScale);
this.groundLayer = this.map.createLayer('ground', ground, 0, 0).setScale(this.mapScale);
this.groundLayer.setCollision([4, 5, 6, 7, 8, 9, 10]);
}
}
update(time: number, delta: number) {
super.update(time, delta);
// 天空地面运动
{
if (this.cursors?.left.isDown) { // 减速
this.currentVelocity = this.velocity - this.acceleration;
} else if (this.cursors?.right.isDown) { // 加速
this.currentVelocity = this.velocity + this.acceleration;
} else { // 默认速度
this.currentVelocity = this.velocity;
}
this.distance += this.currentVelocity;
let isTolerance = Phaser.Math.Within(this.map!.tileWidth * this.mapScale, this.distance, 1); // 容差在1以内
if (isTolerance) {
let prev, current;
for (let y = 0; y < this.map!.height; y++) {
for (let x = 1; x < this.map!.width; x++) {
if (y < 3) {
prev = this.skyLayer?.getTileAt(x - 1, y);
current = this.skyLayer?.getTileAt(x, y);
prev!.index = current!.index;
} else if (y >= 3) {
prev = this.groundLayer?.getTileAt(x - 1, y);
current = this.groundLayer?.getTileAt(x, y);
prev!.index = current!.index;
if (y === 3) {
current!.index = Phaser.Math.RND.weightedPick([4, 5, 6]);
}
if (y === 4) {
if (this.groundLayer?.getTileAt(x, 3).index === 6) {
current!.index = 9;
} else {
current!.index = Phaser.Math.RND.weightedPick([7, 8]);
}
}
if (y === 5) {
current!.index = Phaser.Math.RND.weightedPick([10]);
}
}
}
}
this.distance = 0;
}
this.skyLayer?.setX(-this.distance * 0.5);
this.groundLayer?.setX(-this.distance);
}
}
}放置障碍物
import Phaser from 'phaser';
export default class MainScene extends Phaser.Scene {
// 地图
private map: Phaser.Tilemaps.Tilemap | undefined;
// 天空图层
private skyLayer: Phaser.Tilemaps.TilemapLayer | undefined;
// 地面图层
private groundLayer: Phaser.Tilemaps.TilemapLayer | undefined;
// 缩放系数
private mapScale: number = 6.25;
// 当前速度
private currentVelocity: number = 1.5;
// 速度
private velocity: number = 1.5;
// 加速度
private acceleration: number = 1;
// 距离
private distance: number = 0;
// 键盘
private cursors: Phaser.Types.Input.Keyboard.CursorKeys | undefined;
// 时间监听
private timer: Phaser.Time.TimerEvent | undefined;
// 障碍物集合
private obstacles: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody[] = [];
// 分数
private score: number = 0;
// 分数文本
private scoreText: Phaser.GameObjects.Text | undefined;
constructor() {
super({
key: 'MainScene',
physics: {
default: 'arcade',
arcade: {
debug: true
}
},
});
}
preload() {
// 障碍物
{
const {href: cactusA} = new URL(`../Sprites/cactus A.png`, import.meta.url);
const {href: cactusB} = new URL(`../Sprites/cactus B.png`, import.meta.url);
const {href: cactusC} = new URL(`../Sprites/cactus C.png`, import.meta.url);
this.load.spritesheet('obstacle A', cactusA, {frameWidth: 12, frameHeight: 20});
this.load.spritesheet('obstacle B', cactusB, {frameWidth: 21, frameHeight: 15});
this.load.spritesheet('obstacle C', cactusC, {frameWidth: 28, frameHeight: 20});
}
// 分数
{
this.scoreText = this.add.text(16, 16, `Score: ${this.score}`, {fontSize: '32px', color: '#48ff00'});
this.scoreText.setDepth(2);
}
}
create() {
// 添加键盘控制
{
this.cursors = this.input.keyboard.createCursorKeys();
}
// 障碍物
{
this.setObstacles();
}
}
update(time: number, delta: number) {
super.update(time, delta);
// 障碍物速度
{
this.obstacles.forEach(obstacle => {
obstacle.x -= this.currentVelocity;
if (obstacle.x < -100) {
obstacle.destroy();
}
})
}
}
// 放置障碍物
setObstacles() {
this.score += 1;
this.scoreText!.setText(`Score: ${this.score * 10}`);
if (this.timer) this.timer.destroy();
let delay = Math.cos(this.score / 600) * 3000;
// 秒数小于2秒固定为2秒
if (delay < 2000) {
delay = 2000;
}
// 按左键固定秒数，避免障碍物过近
if (this.cursors?.left.isDown) {
delay = 6000;
}
this.timer = this.time.addEvent({
delay,
callback: this.setObstacles,
callbackScope: this,
loop: true
});
let item = Phaser.Math.RND.weightedPick([
{key: 'obstacle A', w: 12, h: 20},
{key: 'obstacle B', w: 21, h: 15},
{key: 'obstacle C', w: 28, h: 20}
]);
let x = this.map!.widthInPixels * this.mapScale + 100; // Math.cos(this.score / 600) * 1600;
let y = this.map!.tileHeight * this.mapScale * 3 - item.h / 2 * this.mapScale;
let obstacle = this.physics.add.sprite(x, y, item.key).setScale(this.mapScale).refreshBody();
obstacle.setCircle(item.w / 2); // 碰撞区域
this.obstacles.push(obstacle);
}
}添加玩家操作和动画
import Phaser from 'phaser';
export default class MainScene extends Phaser.Scene {
// 地图
private map: Phaser.Tilemaps.Tilemap | undefined;
// 天空图层
private skyLayer: Phaser.Tilemaps.TilemapLayer | undefined;
// 地面图层
private groundLayer: Phaser.Tilemaps.TilemapLayer | undefined;
// 缩放系数
private mapScale: number = 6.25;
// 当前速度
private currentVelocity: number = 1.5;
// 速度
private velocity: number = 1.5;
// 加速度
private acceleration: number = 1;
// 距离
private distance: number = 0;
// 键盘
private cursors: Phaser.Types.Input.Keyboard.CursorKeys | undefined;
// 时间监听
private timer: Phaser.Time.TimerEvent | undefined;
// 障碍物集合
private obstacles: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody[] = [];
// 分数
private score: number = 0;
// 分数文本
private scoreText: Phaser.GameObjects.Text | undefined;
// 玩家
private player: (Phaser.Physics.Arcade.Sprite & { body: Phaser.Physics.Arcade.Body; }) | undefined;
// 重力
private gravityY: number = 600;
// 跳跃速度
private jumpVelocity: number = 500;
constructor() {
super({
key: 'MainScene',
physics: {
default: 'arcade',
arcade: {
debug: true
}
},
});
}
preload() {
// 玩家
{
const {href: player} = new URL(`../Sprites/player.png`, import.meta.url);
this.load.spritesheet('player', player, {frameWidth: 16.8, frameHeight: 16});
}
}
create() {
// 添加键盘控制
{
this.cursors = this.input.keyboard.createCursorKeys();
}
// 玩家
{
this.player = this.physics.add.sprite(100, 100, 'player').setScale(this.mapScale).refreshBody();
this.player.setDepth(1);
// 左右
this.anims.create({
key: 'run',
frames: this.anims.generateFrameNumbers('player', {start: 0, end: 3}),
frameRate: 10,
repeat: -1
});
// 跳跃
this.anims.create({
key: 'jump',
frames: [{key: 'player', frame: 4}],
frameRate: 20
});
// 死亡
this.anims.create({
key: 'died',
frames: [{key: 'player', frame: 5}],
frameRate: 20
});
this.player.setGravityY(this.gravityY);
}
// 玩家与地面碰撞
{
this.physics.add.collider(this.player, this.groundLayer);
}
}
update(time: number, delta: number) {
super.update(time, delta);
// 玩家移动跳跃
{
// 在地面上
if (this.player?.body.onFloor()) {
// 获取当前动画是否为 run
this.player?.anims.getName() !== 'run' && this.player?.anims.play('run');
// 在地面时可跳跃
if (this.cursors?.space.isDown || this.cursors?.up.isDown) {
this.player?.setVelocityY(-this.jumpVelocity);
}
}
// 不在地面上 动画jump
else {
this.player?.anims.play('jump');
}
}
}
}玩家与障碍物碰撞游戏结束
import Phaser from 'phaser';
export default class MainScene extends Phaser.Scene {
// 地图
private map: Phaser.Tilemaps.Tilemap | undefined;
// 天空图层
private skyLayer: Phaser.Tilemaps.TilemapLayer | undefined;
// 地面图层
private groundLayer: Phaser.Tilemaps.TilemapLayer | undefined;
// 缩放系数
private mapScale: number = 6.25;
// 当前速度
private currentVelocity: number = 1.5;
// 速度
private velocity: number = 1.5;
// 加速度
private acceleration: number = 1;
// 距离
private distance: number = 0;
// 键盘
private cursors: Phaser.Types.Input.Keyboard.CursorKeys | undefined;
// 时间监听
private timer: Phaser.Time.TimerEvent | undefined;
// 障碍物集合
private obstacles: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody[] = [];
// 分数
private score: number = 0;
// 分数文本
private scoreText: Phaser.GameObjects.Text | undefined;
// 玩家
private player: (Phaser.Physics.Arcade.Sprite & { body: Phaser.Physics.Arcade.Body; }) | undefined;
// 重力
private gravityY: number = 600;
// 跳跃速度
private jumpVelocity: number = 500;
// 游戏结束
private gameOver: boolean = false;
constructor() {
super({
key: 'MainScene',
physics: {
default: 'arcade',
arcade: {
debug: true
}
},
});
}
preload() {
}
create() {
// 玩家与障碍物碰撞游戏结束
{
this.physics.add.overlap(this.player, this.obstacles, this.hitObstacle, undefined, this);
}
}
update(time: number, delta: number) {
super.update(time, delta);
// 游戏结束
{
if (this.gameOver) {
this.timer && this.timer.destroy();
this.scoreText!.setText(`游戏结束, Score: ${this.score * 10}`);
return
}
}
}
// 放置障碍物
setObstacles() {
if (this.gameOver) return;
}
// 角色碰撞障碍物
hitObstacle(player: Phaser.Types.Physics.Arcade.GameObjectWithBody, _obstacle: Phaser.Types.Physics.Arcade.GameObjectWithBody) {
// 暂停物理引擎
this.physics.pause();
// player.body.gameObject.setTint(0xff0000);
player.body.gameObject.anims.play('died');
this.timer && this.timer.destroy();
this.gameOver = true;
}
}添加场景装饰云和石头
import Phaser from 'phaser';
export default class MainScene extends Phaser.Scene {
// 地图
private map: Phaser.Tilemaps.Tilemap | undefined;
// 天空图层
private skyLayer: Phaser.Tilemaps.TilemapLayer | undefined;
// 地面图层
private groundLayer: Phaser.Tilemaps.TilemapLayer | undefined;
// 缩放系数
private mapScale: number = 6.25;
// 当前速度
private currentVelocity: number = 1.5;
// 速度
private velocity: number = 1.5;
// 加速度
private acceleration: number = 1;
// 距离
private distance: number = 0;
// 键盘
private cursors: Phaser.Types.Input.Keyboard.CursorKeys | undefined;
// 障碍物时间监听
private obstacleTimer: Phaser.Time.TimerEvent | undefined;
// 障碍物集合
private obstacles: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody[] = [];
// 分数
private score: number = 0;
// 分数文本
private scoreText: Phaser.GameObjects.Text | undefined;
// 玩家
private player: (Phaser.Physics.Arcade.Sprite & { body: Phaser.Physics.Arcade.Body; }) | undefined;
// 重力
private gravityY: number = 600;
// 跳跃速度
private jumpVelocity: number = 500;
// 游戏结束
private gameOver: boolean = false;
// 云
private clouds: Phaser.GameObjects.Image[] = [];
// 石头
private rocks: Phaser.GameObjects.Image[] = [];
// 云石头时间监听
private crTimer: Phaser.Time.TimerEvent | undefined;
constructor() {
super({
key: 'MainScene',
physics: {
default: 'arcade',
arcade: {
debug: true
}
},
});
}
preload() {
// 云和石头
{
const cloudA = new URL(`../Sprites/cloud A.png`, import.meta.url).href;
const cloudB = new URL(`../Sprites/cloud B.png`, import.meta.url).href;
const rockA = new URL(`../Sprites/rock A.png`, import.meta.url).href;
const rockB = new URL(`../Sprites/rock B.png`, import.meta.url).href;
this.load.image('cloud A', cloudA);
this.load.image('cloud B', cloudB);
this.load.image('rock A', rockA);
this.load.image('rock B', rockB);
}
}
create() {
// 云和石头监听
{
this.crTimer = this.time.addEvent({
delay: 1000,
callback: this.setCloudsRocks,
callbackScope: this,
loop: true
});
}
}
update(time: number, delta: number) {
super.update(time, delta);
// 游戏结束
{
if (this.gameOver) {
this.obstacleTimer && this.obstacleTimer.destroy();
this.crTimer && this.crTimer.destroy();
this.scoreText!.setText(`游戏结束, Score: ${this.score * 10}`);
return
}
}
// 云和石头
{
this.clouds.forEach(cloud => {
cloud.x -= this.currentVelocity * 0.6;
if (cloud.x < -100) {
cloud.destroy();
}
})
this.rocks.forEach(rock => {
rock.x -= this.currentVelocity * 0.8;
if (rock.x < -100) {
rock.destroy();
}
})
}
}
// 云和石头
setCloudsRocks() {
let cloudItem = Phaser.Math.RND.weightedPick([
{key: 'cloud A', w: 20, h: 11},
{key: 'cloud B', w: 11, h: 5}
]);
let rockItem = Phaser.Math.RND.weightedPick([
{key: 'rock A', w: 48, h: 24},
{key: 'rock B', w: 16, h: 16}
]);
let clodX = this.map!.widthInPixels * this.mapScale + 100;
let clodY = Math.random() * this.map!.tileHeight * 2 * this.mapScale;
let rockX = this.map!.widthInPixels * this.mapScale * (1 + Math.random());
let rockY = this.map!.tileHeight * this.mapScale * 3 - rockItem.h / 2 * this.mapScale;
let cloud = this.add.image(clodX, clodY, cloudItem.key).setScale(this.mapScale).setDepth(2);
let rock = this.add.image(rockX, rockY, rockItem.key).setScale(this.mapScale).setDepth(2);
this.clouds.push(cloud);
this.rocks.push(rock);
}
}完整代码
import Phaser from 'phaser';
export default class MainScene extends Phaser.Scene {
// 地图
private map: Phaser.Tilemaps.Tilemap | undefined;
// 天空图层
private skyLayer: Phaser.Tilemaps.TilemapLayer | undefined;
// 地面图层
private groundLayer: Phaser.Tilemaps.TilemapLayer | undefined;
// 缩放系数
private mapScale: number = 6.25;
// 当前速度
private currentVelocity: number = 1.5;
// 速度
private velocity: number = 1.5;
// 加速度
private acceleration: number = 1;
// 距离
private distance: number = 0;
// 键盘
private cursors: Phaser.Types.Input.Keyboard.CursorKeys | undefined;
// 障碍物时间监听
private obstacleTimer: Phaser.Time.TimerEvent | undefined;
// 障碍物集合
private obstacles: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody[] = [];
// 分数
private score: number = 0;
// 分数文本
private scoreText: Phaser.GameObjects.Text | undefined;
// 玩家
private player: (Phaser.Physics.Arcade.Sprite & { body: Phaser.Physics.Arcade.Body; }) | undefined;
// 重力
private gravityY: number = 600;
// 跳跃速度
private jumpVelocity: number = 500;
// 游戏结束
private gameOver: boolean = false;
// 云
private clouds: Phaser.GameObjects.Image[] = [];
// 石头
private rocks: Phaser.GameObjects.Image[] = [];
// 云石头时间监听
private crTimer: Phaser.Time.TimerEvent | undefined;
constructor() {
super({
key: 'MainScene',
physics: {
default: 'arcade',
arcade: {
debug: true
}
},
});
}
preload() {
// 天空地面
{
const map = new URL(`../Tilemaps/map.json`, import.meta.url).href;
const sky = new URL(`../Tilemaps/sky.png`, import.meta.url).href;
const ground = new URL(`../Tilemaps/ground.png`, import.meta.url).href;
this.load.tilemapTiledJSON('map', map);
this.load.image('sky', sky);
this.load.image('ground', ground);
}
// 障碍物
{
const {href: cactusA} = new URL(`../Sprites/cactus A.png`, import.meta.url);
const {href: cactusB} = new URL(`../Sprites/cactus B.png`, import.meta.url);
const {href: cactusC} = new URL(`../Sprites/cactus C.png`, import.meta.url);
this.load.spritesheet('obstacle A', cactusA, {frameWidth: 12, frameHeight: 20});
this.load.spritesheet('obstacle B', cactusB, {frameWidth: 21, frameHeight: 15});
this.load.spritesheet('obstacle C', cactusC, {frameWidth: 28, frameHeight: 20});
}
// 分数
{
this.scoreText = this.add.text(16, 16, `Score: ${this.score}`, {fontSize: '32px', color: '#48ff00'});
this.scoreText.setDepth(5);
}
// 玩家
{
const {href: player} = new URL(`../Sprites/player.png`, import.meta.url);
this.load.spritesheet('player', player, {frameWidth: 16.8, frameHeight: 16});
}
// 云和石头
{
const cloudA = new URL(`../Sprites/cloud A.png`, import.meta.url).href;
const cloudB = new URL(`../Sprites/cloud B.png`, import.meta.url).href;
const rockA = new URL(`../Sprites/rock A.png`, import.meta.url).href;
const rockB = new URL(`../Sprites/rock B.png`, import.meta.url).href;
this.load.image('cloud A', cloudA);
this.load.image('cloud B', cloudB);
this.load.image('rock A', rockA);
this.load.image('rock B', rockB);
}
}
create() {
// 添加键盘控制
{
this.cursors = this.input.keyboard.createCursorKeys();
}
// 创建天空地面
{
this.map = this.make.tilemap({key: 'map'});
const sky = this.map.addTilesetImage('sky', 'sky');
const ground = this.map.addTilesetImage('ground', 'ground');
this.skyLayer = this.map.createLayer('sky', sky, 0, 0).setScale(this.mapScale);
this.groundLayer = this.map.createLayer('ground', ground, 0, 0).setScale(this.mapScale);
this.groundLayer.setCollision([4, 5, 6, 7, 8, 9, 10]);
}
// 障碍物
{
this.setObstacles();
}
// 玩家
{
this.player = this.physics.add.sprite(200, 100, 'player').setScale(this.mapScale).refreshBody();
this.player.setDepth(4);
// 左右
this.anims.create({
key: 'run',
frames: this.anims.generateFrameNumbers('player', {start: 0, end: 3}),
frameRate: 10,
repeat: -1
});
// 跳跃
this.anims.create({
key: 'jump',
frames: [{key: 'player', frame: 4}],
frameRate: 20
});
// 死亡
this.anims.create({
key: 'died',
frames: [{key: 'player', frame: 5}],
frameRate: 20
});
this.player.setGravityY(this.gravityY);
}
// 玩家与地面碰撞
{
this.physics.add.collider(this.player, this.groundLayer);
}
// 玩家与障碍物碰撞游戏结束
{
this.physics.add.overlap(this.player, this.obstacles, this.hitObstacle, undefined, this);
}
// 云和石头监听
{
this.crTimer = this.time.addEvent({
delay: 1000,
callback: this.setCloudsRocks,
callbackScope: this,
loop: true
});
}
}
update(time: number, delta: number) {
super.update(time, delta);
// 游戏结束
{
if (this.gameOver) {
this.obstacleTimer && this.obstacleTimer.destroy();
this.crTimer && this.crTimer.destroy();
this.scoreText!.setText(`游戏结束, Score: ${this.score * 10}`);
return
}
}
// 天空地面运动
{
if (this.cursors?.left.isDown) { // 减速
this.currentVelocity = this.velocity - this.acceleration;
} else if (this.cursors?.right.isDown) { // 加速
this.currentVelocity = this.velocity + this.acceleration;
} else { // 默认速度
this.currentVelocity = this.velocity;
}
this.distance += this.currentVelocity;
let isTolerance = Phaser.Math.Within(this.map!.tileWidth * this.mapScale, this.distance, 1); // 容差在1以内
if (isTolerance) {
let prev, current;
for (let y = 0; y < this.map!.height; y++) {
for (let x = 1; x < this.map!.width; x++) {
if (y < 3) {
prev = this.skyLayer?.getTileAt(x - 1, y);
current = this.skyLayer?.getTileAt(x, y);
prev!.index = current!.index;
} else if (y >= 3) {
prev = this.groundLayer?.getTileAt(x - 1, y);
current = this.groundLayer?.getTileAt(x, y);
prev!.index = current!.index;
if (y === 3) {
current!.index = Phaser.Math.RND.weightedPick([4, 5, 6]);
}
if (y === 4) {
if (this.groundLayer?.getTileAt(x, 3).index === 6) {
current!.index = 9;
} else {
current!.index = Phaser.Math.RND.weightedPick([7, 8]);
}
}
if (y === 5) {
current!.index = Phaser.Math.RND.weightedPick([10]);
}
}
}
}
this.distance = 0;
}
this.skyLayer?.setX(-this.distance * 0.5);
this.groundLayer?.setX(-this.distance);
}
// 障碍物速度
{
this.obstacles.forEach(obstacle => {
obstacle.x -= this.currentVelocity;
if (obstacle.x < -100) {
obstacle.destroy();
}
})
}
// 玩家移动跳跃
{
// 在地面上
if (this.player?.body.onFloor()) {
// 获取当前动画是否为 run
this.player?.anims.getName() !== 'run' && this.player?.anims.play('run');
// 在地面时可跳跃
if (this.cursors?.space.isDown || this.cursors?.up.isDown) {
this.player?.setVelocityY(-this.jumpVelocity);
}
}
// 不在地面上 动画jump
else {
this.player?.anims.play('jump');
}
}
// 云和石头
{
this.clouds.forEach(cloud => {
cloud.x -= this.currentVelocity * 0.6;
if (cloud.x < -100) {
cloud.destroy();
}
})
this.rocks.forEach(rock => {
rock.x -= this.currentVelocity * 0.8;
if (rock.x < -100) {
rock.destroy();
}
})
}
}
// 放置障碍物
setObstacles() {
if (this.gameOver) return;
this.score += 1;
this.scoreText!.setText(`Score: ${this.score * 10}`);
this.obstacleTimer && this.obstacleTimer.destroy();
let delay = Math.cos(this.score / 600) * 3000;
// 秒数小于2秒固定为2秒
if (delay < 2000) {
delay = 2000;
}
// 按左键固定秒数，避免障碍物过近
if (this.cursors?.left.isDown) {
delay = 6000;
}
this.obstacleTimer = this.time.addEvent({
delay,
callback: this.setObstacles,
callbackScope: this,
loop: true
});
let item = Phaser.Math.RND.weightedPick([
{key: 'obstacle A', w: 12, h: 20},
{key: 'obstacle B', w: 21, h: 15},
{key: 'obstacle C', w: 28, h: 20}
]);
let x = this.map!.widthInPixels * this.mapScale + 100;
let y = this.map!.tileHeight * this.mapScale * 3 - item.h / 2 * this.mapScale;
let obstacle = this.physics.add.sprite(x, y, item.key).setScale(this.mapScale).refreshBody();
obstacle.setCircle(item.w / 2.5, 1); // 碰撞区域
obstacle.setDepth(3);
this.obstacles.push(obstacle);
}
// 角色碰撞障碍物
hitObstacle(player: Phaser.Types.Physics.Arcade.GameObjectWithBody, _obstacle: Phaser.Types.Physics.Arcade.GameObjectWithBody) {
// 暂停物理引擎
this.physics.pause();
// player.body.gameObject.setTint(0xff0000);
player.body.gameObject.anims.play('died');
this.obstacleTimer && this.obstacleTimer.destroy();
this.gameOver = true;
}
// 云和石头
setCloudsRocks() {
let cloudItem = Phaser.Math.RND.weightedPick([
{key: 'cloud A', w: 20, h: 11},
{key: 'cloud B', w: 11, h: 5}
]);
let rockItem = Phaser.Math.RND.weightedPick([
{key: 'rock A', w: 48, h: 24},
{key: 'rock B', w: 16, h: 16}
]);
let clodX = this.map!.widthInPixels * this.mapScale + 100;
let clodY = Math.random() * this.map!.tileHeight * 2 * this.mapScale;
let rockX = this.map!.widthInPixels * this.mapScale * (1 + Math.random());
let rockY = this.map!.tileHeight * this.mapScale * 3 - rockItem.h / 2 * this.mapScale;
let cloud = this.add.image(clodX, clodY, cloudItem.key).setScale(this.mapScale).setDepth(2);
let rock = this.add.image(rockX, rockY, rockItem.key).setScale(this.mapScale).setDepth(2);
this.clouds.push(cloud);
this.rocks.push(rock);
}
}import Phaser from "phaser";
new Phaser.Game({
type: Phaser.AUTO,
parent: 'phaser3-game',
width: 1024,
height: 600,
pixelArt: true,
scene: MainScene,
});
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
