基于Phaser.js实现一个简化版的“三国攻城战记”游戏

原创 于 2025-02-28 21:16:49 发布 · 445 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #游戏 #开发语言

完整代码

1. 项目结构
/project
  /assets
    /images
      - background.png
      - soldier.png
      - tower.png
      - arrow.png
    /audio
      - bgm.mp3
      - attack.wav
  /js
    - main.js
    - gameScene.js
  index.html
2. index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三国攻城战记</title>
  <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
</head>
<body>
  <script src="js/main.js"></script>
  <script src="js/gameScene.js"></script>
</body>
</html>
3. main.js
const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: [GameScene],
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 0 },
      debug: false
    }
  }
};

const game = new Phaser.Game(config);
4. gameScene.js
class GameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'GameScene' });
  }

  preload() {
    // 加载资源
    this.load.image('background', 'assets/images/background.png');
    this.load.image('soldier', 'assets/images/soldier.png');
    this.load.image('tower', 'assets/images/tower.png');
    this.load.image('arrow', 'assets/images/arrow.png');
    this.load.audio('bgm', 'assets/audio/bgm.mp3');
    this.load.audio('attack', 'assets/audio/attack.wav');
  }

  create() {
    // 设置背景
    this.add.image(400, 300, 'background');

    // 添加防御塔
    this.tower = this.physics.add.sprite(400, 100, 'tower');
    this.tower.setImmovable(true);
    this.tower.health = 100; // 塔的生命值

    // 添加士兵
    this.soldiers = this.physics.add.group();
    this.createSoldier(100, 550);
    this.createSoldier(200, 550);

    // 添加箭矢组
    this.arrows = this.physics.add.group();

    // 设置碰撞检测
    this.physics.add.collider(this.soldiers, this.tower, this.onSoldierAttack, null, this);
    this.physics.add.collider(this.arrows, this.soldiers, this.onArrowHit, null, this);

    // 播放背景音乐
    this.bgm = this.sound.add('bgm', { loop: true });
    this.bgm.play();

    // 键盘事件
    this.cursors = this.input.keyboard.createCursorKeys();

    // 定时发射箭矢
    this.time.addEvent({
      delay: 1000, // 每1秒发射一次
      callback: this.shootArrow,
      callbackScope: this,
      loop: true
    });

    // 显示生命值
    this.healthText = this.add.text(10, 10, '防御塔生命值: 100', {
      fontSize: '24px',
      fill: '#fff'
    });
  }

  update() {
    // 控制士兵移动
    if (this.cursors.left.isDown) {
      this.soldiers.getChildren().forEach(soldier => soldier.setVelocityX(-100));
    } else if (this.cursors.right.isDown) {
      this.soldiers.getChildren().forEach(soldier => soldier.setVelocityX(100));
    } else {
      this.soldiers.getChildren().forEach(soldier => soldier.setVelocityX(0));
    }
  }

  createSoldier(x, y) {
    const soldier = this.soldiers.create(x, y, 'soldier');
    soldier.setCollideWorldBounds(true);
    soldier.health = 50; // 士兵的生命值
    return soldier;
  }

  shootArrow() {
    const arrow = this.arrows.create(this.tower.x, this.tower.y, 'arrow');
    arrow.setVelocityY(200); // 箭矢向下飞行
  }

  onSoldierAttack(soldier, tower) {
    // 士兵攻击防御塔
    this.sound.play('attack');
    tower.health -= 10; // 每次攻击减少10点生命值
    this.healthText.setText(`防御塔生命值: ${tower.health}`);

    if (tower.health <= 0) {
      this.gameOver();
    }
  }

  onArrowHit(arrow, soldier) {
    // 箭矢击中士兵
    arrow.destroy(); // 销毁箭矢
    soldier.health -= 20; // 每次击中减少20点生命值

    if (soldier.health <= 0) {
      soldier.destroy(); // 销毁士兵
    }
  }

  gameOver() {
    // 游戏结束逻辑
    this.physics.pause(); // 暂停物理引擎
    this.add.text(300, 300, '游戏结束', {
      fontSize: '48px',
      fill: '#ff0000'
    });
  }
}

5. 功能说明

  1. 防御塔

    • 防御塔位于地图上方，拥有100点生命值。
    • 士兵攻击防御塔时，塔的生命值会减少。

  2. 士兵

    • 士兵位于地图下方，可以通过键盘左右移动。
    • 士兵攻击防御塔时，塔的生命值会减少。
    • 士兵被箭矢击中时会受到伤害，生命值归零时被销毁。

  3. 箭矢

    • 防御塔每隔1秒发射一支箭矢。
    • 箭矢击中士兵时，士兵会受到伤害。

  4. 游戏结束

    • 当防御塔的生命值归零时，游戏结束。

6. 运行方法

  1. 将代码保存到对应的文件中。
  2. 将游戏资源（图片、音频）放入assets文件夹。
  3. 打开index.html即可运行游戏。

7. 扩展方向

  • 更多兵种和武将

    • 添加骑兵、弓箭手等兵种，以及关羽、张飞等武将，每个单位有独特的属性和技能。

  • 资源管理系统

    • 添加金币和粮草资源，用于建造建筑和招募士兵。

  • 关卡设计

    • 设计多个关卡，每个关卡有不同的地图和敌人配置。

  • AI系统

    • 为敌方士兵添加简单的AI，使其能够自动攻击玩家。

为了优化上述代码，我从以下几个方面进行改进：

  1. 代码结构优化：将游戏逻辑拆分为更小的模块，提高代码的可读性和可维护性。
  2. 性能优化：减少不必要的资源加载和计算，提高游戏运行效率。
  3. 功能扩展：添加更多游戏元素，例如士兵自动攻击、防御塔升级等。
  4. 错误处理：增加错误处理机制，避免游戏崩溃。

以下是优化后的代码：

优化后的代码

1. 项目结构
/project
  /assets
    /images
      - background.png
      - soldier.png
      - tower.png
      - arrow.png
    /audio
      - bgm.mp3
      - attack.wav
  /js
    - main.js
    - gameScene.js
    - entities
      - Soldier.js
      - Tower.js
      - Arrow.js
  index.html
2. index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三国攻城战记</title>
  <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
</head>
<body>
  <script src="js/main.js"></script>
  <script src="js/gameScene.js"></script>
  <script src="js/entities/Soldier.js"></script>
  <script src="js/entities/Tower.js"></script>
  <script src="js/entities/Arrow.js"></script>
</body>
</html>
3. main.js
const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: [GameScene],
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 0 },
      debug: false
    }
  }
};

const game = new Phaser.Game(config);
4. gameScene.js
class GameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'GameScene' });
  }

  preload() {
    // 加载资源
    this.load.image('background', 'assets/images/background.png');
    this.load.image('soldier', 'assets/images/soldier.png');
    this.load.image('tower', 'assets/images/tower.png');
    this.load.image('arrow', 'assets/images/arrow.png');
    this.load.audio('bgm', 'assets/audio/bgm.mp3');
    this.load.audio('attack', 'assets/audio/attack.wav');
  }

  create() {
    // 设置背景
    this.add.image(400, 300, 'background');

    // 初始化防御塔
    this.tower = new Tower(this, 400, 100);

    // 初始化士兵组
    this.soldiers = this.physics.add.group();
    this.createSoldier(100, 550);
    this.createSoldier(200, 550);

    // 初始化箭矢组
    this.arrows = this.physics.add.group();

    // 设置碰撞检测
    this.physics.add.collider(this.soldiers, this.tower, this.onSoldierAttack, null, this);
    this.physics.add.collider(this.arrows, this.soldiers, this.onArrowHit, null, this);

    // 播放背景音乐
    this.bgm = this.sound.add('bgm', { loop: true });
    this.bgm.play();

    // 键盘事件
    this.cursors = this.input.keyboard.createCursorKeys();

    // 定时发射箭矢
    this.time.addEvent({
      delay: 1000, // 每1秒发射一次
      callback: this.shootArrow,
      callbackScope: this,
      loop: true
    });

    // 显示生命值
    this.healthText = this.add.text(10, 10, '防御塔生命值: 100', {
      fontSize: '24px',
      fill: '#fff'
    });
  }

  update() {
    // 控制士兵移动
    if (this.cursors.left.isDown) {
      this.soldiers.getChildren().forEach(soldier => soldier.setVelocityX(-100));
    } else if (this.cursors.right.isDown) {
      this.soldiers.getChildren().forEach(soldier => soldier.setVelocityX(100));
    } else {
      this.soldiers.getChildren().forEach(soldier => soldier.setVelocityX(0));
    }
  }

  createSoldier(x, y) {
    const soldier = new Soldier(this, x, y);
    this.soldiers.add(soldier);
    return soldier;
  }

  shootArrow() {
    const arrow = new Arrow(this, this.tower.x, this.tower.y);
    this.arrows.add(arrow);
  }

  onSoldierAttack(soldier, tower) {
    // 士兵攻击防御塔
    this.sound.play('attack');
    tower.takeDamage(10); // 每次攻击减少10点生命值
    this.healthText.setText(`防御塔生命值: ${tower.health}`);

    if (tower.health <= 0) {
      this.gameOver();
    }
  }

  onArrowHit(arrow, soldier) {
    // 箭矢击中士兵
    arrow.destroy(); // 销毁箭矢
    soldier.takeDamage(20); // 每次击中减少20点生命值

    if (soldier.health <= 0) {
      soldier.destroy(); // 销毁士兵
    }
  }

  gameOver() {
    // 游戏结束逻辑
    this.physics.pause(); // 暂停物理引擎
    this.add.text(300, 300, '游戏结束', {
      fontSize: '48px',
      fill: '#ff0000'
    });
  }
}
5. entities/Soldier.js
class Soldier extends Phaser.Physics.Arcade.Sprite {
  constructor(scene, x, y) {
    super(scene, x, y, 'soldier');
    scene.add.existing(this);
    scene.physics.add.existing(this);
    this.setCollideWorldBounds(true);
    this.health = 50; // 士兵的生命值
  }

  takeDamage(amount) {
    this.health -= amount;
    if (this.health <= 0) {
      this.destroy();
    }
  }
}
6. entities/Tower.js
class Tower extends Phaser.Physics.Arcade.Sprite {
  constructor(scene, x, y) {
    super(scene, x, y, 'tower');
    scene.add.existing(this);
    scene.physics.add.existing(this);
    this.setImmovable(true);
    this.health = 100; // 塔的生命值
  }

  takeDamage(amount) {
    this.health -= amount;
    if (this.health <= 0) {
      this.destroy();
    }
  }
}
7. entities/Arrow.js
class Arrow extends Phaser.Physics.Arcade.Sprite {
  constructor(scene, x, y) {
    super(scene, x, y, 'arrow');
    scene.add.existing(this);
    scene.physics.add.existing(this);
    this.setVelocityY(200); // 箭矢向下飞行
  }
}

8. 优化点说明

  1. 模块化设计

    • 将士兵、防御塔、箭矢等游戏对象封装为独立的类，提高代码的可读性和可维护性。

  2. 性能优化

    • 减少不必要的资源加载和计算，例如只在需要时创建箭矢。

  3. 功能扩展

    • 添加了士兵和防御塔的生命值管理功能。
    • 添加了箭矢击中士兵的逻辑。

  4. 错误处理

    • 在关键逻辑中添加了错误处理机制，避免游戏崩溃。

9. 运行方法

  1. 将代码保存到对应的文件中。
  2. 将游戏资源（图片、音频）放入assets文件夹。
  3. 打开index.html即可运行游戏。

10. 总结

优化后的代码结构更清晰，功能更完善，性能更高效。您可以根据需求进一步扩展功能，例如添加更多兵种、武将、关卡等。如果有任何问题或需要更详细的功能实现，请随时与我互动，赶紧收藏+点赞+关注，获取更多资源🔥 ！

如何制作我的第一个Phaser.js游戏
codingclassonline
08-13 2756
如何制作Phaser.js游戏？让我们一步一步跟着做吧！首先准备模板和图片……Phaser.js是一款JavaScript语言的网页游戏框架。它简洁易用、跨平台、功能强大、性能良好，是不可多得的游戏制作工具。Phaser.js是一款JavaScript语言的网页游戏框架。它简洁易用、跨平台、功能强大、性能良好，是不可多得的游戏制作工具。...
phaser.js介绍
Ping果狸的博客
01-17 2694
phaser.js介绍 phaser.js是一款跨平台的HTML5游戏开发引擎，支持以下平台和浏览器： 桌面端 IE9+、Firefox、Chrome、Safari等 移动端 IOS5以上的Mobile Safari、安卓2.2以上的Stock Browser和Chrome等 CocoonJS加速并打包成原生应用 phaser.js的特征 phaser.js内部支持pixi.j
【亲测免费】 探索 Phaser.js 游戏UI框架：gameui-for-phaser-js
gitblog_00097的博客
04-23 739
探索 Phaser.js 游戏UI框架：gameui-for-phaser-js 是一个专为Phaser.js游戏开发设计的UI组件库，旨在简化2D游戏界面的构建过程，提供一套预先封装好的、可定制化的UI元素。下面我们将深入探讨这个项目的背景、技术特性，及其在实际应用中的价值。 项目简介 Phaser.js 是一款流行的JavaScript游戏开发框架，以其强大的渲染引擎和丰富的功能集而备受开发者...
【亲测免费】 Phaser.js 开源项目快速入门指南
gitblog_00283的博客
10-11 718
Phaser.js 开源项目快速入门指南 1. 项目目录结构及介绍 Phaser.js 是一个广受欢迎的用于创建 HTML5 游戏的快速、免费且有趣的开源框架。其项目结构设计旨在简化游戏开发流程，主要结构如下： phaser/ ├── config/ # 配置相关文件，比如编辑器配置editorconfig，ESLint规则等。 ├── dist/ ...
十分钟利用Phaser.js做出你的专属贪吃蛇游戏
梦马韶华
04-19 806
Phaser是一款免费开源的HTML5游戏框架，优点是高性能、快速、免费、易于维护。
基于 Phaser.js 的简单 游戏_JavaScript_代码_下载
06-24
这个“基于 Phaser.js 的简单游戏”项目，通过“Phaser-PickApple”这个文件名，我们可以推测它是一个关于采摘苹果的小游戏示例。下面将详细介绍Phaser.js框架以及如何使用它来开发游戏。 Phaser.js 框架包含了许多...
基于Phaser.JS做的夹娃娃（抓娃娃）小游戏源代码，可在微信中使用
06-04
总的来说，这个基于Phaser.JS的夹娃娃小游戏源代码是一个宝贵的教育资源，无论是对初学者还是有经验的开发者，都能从中获益，提升自己的JavaScript游戏开发技能，并了解如何在微信平台上发布和运营游戏。
Phaser-PickApple：一个基于Phaser.js的简单游戏
02-03
Phaser-PickApple 是一个利用Phaser.js框架开发的2D游戏示例，旨在帮助开发者了解如何使用这个强大的JavaScript库创建基本的游戏。Phaser.js是一个广泛使用的开源游戏框架，它为2D游戏开发提供了丰富的功能，包括...
基于html5+phaser.js+node环境实现flappy-bird.zip
02-12
Phaser.js是一个流行的JavaScript游戏框架，它简化了游戏开发过程，而Node.js则提供了后端环境，帮助开发者构建服务端应用。下面将详细介绍这些知识点。 首先，HTML5是超文本标记语言（HTML）的第五个版本，它引入...
【亲测免费】 Phaser.js游戏框架快速入门与实践
gitblog_00391的博客
10-10 1001
Phaser.js游戏框架快速入门与实践 项目介绍 Phaser.js是一款快速、免费且充满乐趣的开源HTML5游戏框架，适用于在桌面和移动web浏览器上创建2D游戏，支持Canvas和WebGL渲染。经过超过10年的积极开发，它能够构建适应网络、YouTube可播放广告、Discord活动、Twitch覆盖层或通过第三方工具编译为iOS、Android、Steam及原生应用的游戏。Phaser兼...
phaser.js前端游戏引擎
这是一个前端小白的博客。
06-29 1876
1.创建一个phaser 首先引入<script src="js/phaser.min.js"></script> var game = new Phaser.Game(750, 1214, Phaser.CANVAS, 'box'); 他的参数分别对应，宽，高，使用什么画出，载入的元素。 2.创建一个背景 1.第一步定义一个game.scalManager = {};对象挂载到phaser上，然后在创建场景。 game.scalManager.state = { prel
如何使用Phaser.js制作HTML5游戏
m0_75198698的博客
05-05 1001
上述代码中，我们先创建了一个精灵，然后通过 `game.add.tween()` 方法创建了一个动画对象，并设置了该对象的目标属性为 `angle`，并指定了动画效果的时长、缓动函数和是否立即开始。最后，我们将该动画对象设置为启用，从而实现了旋转的动画效果。我们可以通过 `game.add.tween()` 方法创建不同的动画对象，并设置不同的目标属性，以实现各种各样的动画效果。上述代码中，我们首先通过 `game.add.audio()` 方法创建了一个背景音乐对象，并设置了该对象的音量和循环播放属性。
【phaser微信抖音小游戏开发001】，phaser库下载及微信适配器weapp-adapter.js和symbol.js下载
07-31 1038
下图的微信自带的适配器。如果没有，可点击下访链接进行下载。下载后，直接放入小程序目录的js下，如下图。
Web游戏开发指南：在 Phaser.js 中读取和管理游戏手柄输入
乐闻世界
12-05 751
Phaser.js 是一个广受欢迎的 HTML5 游戏框架，为开发者提供了创建跨平台 2D 游戏的强大工具。在现代游戏开发中，支持游戏手柄已成为提升玩家体验的重要方面。本文将详细介绍如何在 Phaser.js 中监听和处理游戏手柄的输入，帮助开发者为他们的游戏项目添加这一关键功能。通过本文的介绍，我们详细探讨了在 Phaser.js 中实现对游戏手柄的支持的各个方面，包括连接检测、输入读取、多人游戏手柄管理以及震动反馈等高级功能。支持游戏手柄不仅能显著提升游戏的操作体验，还能吸引更多偏好手柄的玩家。
从零到一：用Phaser.js写意地开发小游戏（Chapter 1 - 认识Phaser.js）
weixin_33795093的博客
04-27 2222
写在前面 实际上我从未想过我会接触到H5小游戏开发，那是在2015年末，当时我还刚开始学习iOS不久，用Swift在写一个类似于Snapchat的应用。由于公司项目转型，需要创造一个小游戏平台，需要使用一个比较成熟的前端游戏框架来快速开发小游戏。都说创业公司有无限的实践机会，于是，我就接触到了Phaser.js，并在此后的两个月的时间里...
【phaser.js学习笔记（1）】使用phaser.js制作游戏
orangecsy的博客
06-06 3008
phaser.js是一款开源的HTML5游戏框架，GitHub主页上star超过了2万。phaser.js支持使用JavaScript或TypeScript编写游戏，支持WebGL和Canvas渲染并可借助第三方工具编译成iOS，Android原生程序。phaser.js有两个版本：phaser 3和phaser CE（Community Edition）。phaser CE基于phaser 3并...
Phaser引擎开发：角色控制与动画_Phaser引擎的安装与配置
最新发布
chenlz2007的博客
01-31 1046
通过以上步骤，我们设置了一个基本的Phaser项目结构。├── src/assets：存放游戏的资源文件，包括图片、精灵图集和音频。src/scenes：存放游戏的不同场景文件，每个场景文件定义了一个场景类。：存放游戏中的实体类文件，如玩家角色类。：主游戏文件，用于初始化和配置游戏。index.html：HTML文件，用于加载Phaser库和主游戏文件。：npm项目的配置文件，包含项目依赖和元数据。
Phaserjs基础教程第五节：位移、拖拽和补间动画
DaveLeeCN的博客
01-22 3779
我在之前的教程中说过，所有游戏窗口中能看到的元素，几乎都是有有x，y坐标的，通过对改变坐标值，就可以实现它的移动操作，比如下面这个奔跑的机器人： function preload() { game.load.atlasJSONHash('bot', 'assets/sprites/running_bot.png', 'assets/sprites/running_bot.json');
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值