DIY地鼠王争霸，掘金大作战之掘地寻宝

前端

2023-09-27 20:40:06

前言

各位掘金开发者，大家好！欢迎来到掘金大作战。在这里，我们将一同踏上掘地寻宝之旅，DIY专属地鼠王争霸赛！

玩法介绍

地鼠王争霸赛是一款极具创意和趣味性的多人游戏。游戏分为两队，双方队员轮流扮演地鼠和打地鼠的角色。地鼠需要在规定的时间内尽可能多地挖洞逃跑，而打地鼠则需要用锤子尽可能多地打到地鼠。最终，得分较高的一队获胜。

技术攻略

1. 设置游戏环境

创建一个空文件夹并打开终端。
运行以下命令安装游戏引擎 Phaser：

npm install phaser

在文件夹中创建一个名为 index.html 的文件，并添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    
    <script src="phaser.min.js"></script>
  </head>
  <body>
    <div id="game"></div>
    <script src="main.js"></script>
  </body>
</html>

创建一个名为 main.js 的文件，并添加以下代码：

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game');

game.state.add('PlayState', PlayState);
game.state.start('PlayState');

2. 编写核心逻辑

在 PlayState 中编写以下代码：

// 地鼠
var Groundhogs = function(game) {
  Phaser.Group.call(this, game);
  this.enableBody = true;
  this.createMultiple(10, 'groundhog');
  this.setAll('anchor.x', 0.5);
  this.setAll('anchor.y', 0.5);
  this.setAll('scale.x', 0.5);
  this.setAll('scale.y', 0.5);
  this.setAll('body.immovable', true);
};

Groundhogs.prototype = Object.create(Phaser.Group.prototype);
Groundhogs.prototype.constructor = Groundhogs;

Groundhogs.prototype.spawn = function(x, y) {
  var groundhog = this.getFirstDead();
  if (!groundhog) {
    return;
  }
  groundhog.reset(x, y);
  groundhog.body.velocity.x = Math.random() * 100 + 100;
  groundhog.body.velocity.y = Math.random() * 100 + 100;
};

// 打地鼠
var Hammers = function(game) {
  Phaser.Group.call(this, game);
  this.enableBody = true;
  this.createMultiple(10, 'hammer');
  this.setAll('anchor.x', 0.5);
  this.setAll('anchor.y', 0.5);
  this.setAll('scale.x', 0.5);
  this.setAll('scale.y', 0.5);
  this.setAll('body.immovable', true);
};

Hammers.prototype = Object.create(Phaser.Group.prototype);
Hammers.prototype.constructor = Hammers;

Hammers.prototype.spawn = function(x, y) {
  var hammer = this.getFirstDead();
  if (!hammer) {
    return;
  }
  hammer.reset(x, y);
  hammer.body.velocity.x = Math.random() * 100 + 100;
  hammer.body.velocity.y = Math.random() * 100 + 100;
};

3. 加载资源

在 preload 函数中加载资源：

game.load.image('groundhog', 'groundhog.png');
game.load.image('hammer', 'hammer.png');

4. 创建游戏场景

在 create 函数中创建游戏场景：

this.groundhogs = new Groundhogs(game);
this.hammers = new Hammers(game);

5. 游戏循环

在 update 函数中进行游戏循环：

// 地鼠生成
if (Math.random() > 0.9) {
  this.groundhogs.spawn(Math.random() * game.width, 0);
}

// 打地鼠生成
if (Math.random() > 0.9) {
  this.hammers.spawn(Math.random() * game.width, 0);
}

// 碰撞检测
game.physics.overlap(this.groundhogs, this.hammers, this.hitGroundhog, null, this);