使用Node开发一个多人对战的射击游戏

前端大学

共 66643字,需浏览 134分钟

 ·

2021-07-13 17:14

(给前端大学加星标,提升前端技能.)

相信大家都是知道游戏的吧。

这玩意还是很有意思的,无论是超级玛丽,还是魂斗罗,亦或者是王者荣耀以及阴阳师。

当然,这篇文章不涉及到那么牛逼的游戏,这里就简单的做一个小游戏吧。

先给它取个名字,就叫“球球作战”吧。

咳咳,简单易懂嘛

玩法

任何人进入游戏输入名字然后就可以连接进入游戏,控制一个小球。

你可以操作这个小球进行一些动作,比如:移动,发射子弹。

通过杀死其他玩家来获取积分,并在排行榜上进行排名。

其实这类游戏有一个统一的名称,叫做IO类游戏,在这个网站中有大量的这类游戏:https://iogames.space/

这个游戏的github地址:https://github.com/lionet1224/node-game

在线体验: http://120.77.44.111:3000/

演示GIF:

准备工作

首先制作这个游戏,我们需要的技术为:

  • 前端
    • Socket.io
    • Webpack
  • 后端
    • Node
    • Socket.io
    • express
    • ...

并且你需要对以下技术有一定了解:

  • Canvas
  • 面向对象
  • ES6
  • Node
  • Promise

其实本来想使用denots来开发的,但是因为我对这两项技术都是半生不熟的阶段,所以就不拿出来献丑了。

游戏架构

后端服务需要做的是:

  • 存储生成的游戏对象,并且将其发送给前端。
  • 接收前端的玩家操作,给游戏对象进行数据处理

前端需要做的是:

  • 接收后端发送的数据并将其渲染出来。
  • 将玩家的操作发送给服务器

这也是典型的状态同步方式开发游戏。

后端服务搭建开发

因为前端是通过后端的数据驱动的,所以我们就先开发后端。

搭建起一个Express服务

首先我们需要下载express,在根目录下输入以下命令:

// 创建一个package.json文件
> npm init
// 安装并且将其置入package.json文件中的依赖中
> npm install express socket.io --save
// 安装并置入package.json的开发依赖中
> npm install cross-env nodemon --save-dev

这里我们也可以使用cnpm进行安装

然后在根目录中疯狂建文件夹以及文件。

image.png

我们就可以得出以上的文件啦。

解释一下分别是什么东西:

  • public 存储一些资源
  • src 开发代码
    • core 核心代码
    • objects 玩家、道具等对象
    • client 前端代码
    • servers 后端代码
    • shared 前后端共用常量

编写基本代码

然后我们在server.js中编写启动服务的相关代码。

// server.js
// 引入各种模块
const express = require('express')
const socketio = require('socket.io');
const app = express();

const Socket = require('./core/socket');
const Game = require('./core/game');

// 启动服务
const port = process.env.PORT || 3000;
const server = app.listen(3000, () => {
  console.log('Server Listening on port: ' + port)
})

// 实例游戏类
const game = new Game;

// 监听socket服务
const io = socketio(server)
// 将游戏以及io传入创建的socket类来统一管理
const socket = new Socket(game, io);

// 监听连接进入游戏的回调
io.on('connect', item => {
  socket.listen(item)
})

上面的代码还引入了两个其他文件core/gamecore/socket

这两个文件中的代码,我大致的编写了一下。

// core/game.js
class Game{
  constructor(){
    // 保存玩家的socket信息
    this.sockets = {}
    // 保存玩家的游戏对象信息
    this.players = {};
    // 子弹
    this.bullets = [];
    // 最后一次执行时间
    this.lastUpdateTime = Date.now();
    // 是否发送给前端数据,这里将每两帧发送一次数据
    this.shouldSendUpdate = false;
    // 游戏更新
    setInterval(this.update.bind(this), 1000 / 60);
  }

  update(){

  }

  // 玩家加入游戏
  joinGame(){

  }

  // 玩家断开游戏
  disconnect(){

  }
}

module.exports = Game;

// core/socket.js
const Constants = require('../../shared/constants')

class Socket{
  constructor(game, io){
    this.game = game;
    this.io = io;
  }

  listen(){
    // 玩家成功连接socket服务
    console.log(`Player connected! Socket Id: ${socket.id}`)
  }
}

module.exports = Socket

core/socket中引入了常量文件,我们来看看我在其中是怎么定义的。

// shared/constants.js
module.exports = Object.freeze({
  // 玩家的数据
  PLAYER: {
    // 最大生命
    MAX_HP100,
    // 速度
    SPEED500,
    // 大小
    RADUIS50,
    // 开火频率, 0.1秒一发
    FIRE.1
  },

  // 子弹
  BULLET: {
    // 子弹速度
    SPEED1500,
    // 子弹大小
    RADUIS20
  },

  // 道具
  PROP: {
    // 生成时间
    CREATE_TIME10,
    // 大小
    RADUIS30
  },

  // 地图大小
  MAP_SIZE5000,

  // socket发送消息的函数名
  MSG_TYPES: {
    JOIN_GAME1,
    UPDATE2,
    INPUT3
  }
})

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。- MDN

通过上面的四个文件的代码,我们已经拥有了一个具备基本功能的后端服务结构了。

接下来就来将它启动起来吧。

创建启动命令

package.json中编写启动命令。

// package.json
{
    // ...
    "scripts": {
      "dev""cross-env NODE_ENV=development nodemon src/servers/server.js",
      "start""cross-env NODE_ENV=production nodemon src/servers/server.js"
    }
    //..
}

这里的两个命令devstart都使用到了cross-envnodemon,这里解释一下:

  • cross-env 设置环境变量,这里可以看到这个后面还有一个NODE_ENV=development/production,判断是否是开发模式。
  • nodemon 这个的话说白了就是监听文件变化并重置Node服务。

启动服务看一下吧

执行以下命令开启开发模式。

> npm run dev

可以看到我们成功的启动服务了,监听到了3000端口。

在服务中,我们搭载了socket服务,那要怎么测试是否有效呢?

所以我们现在简单的搭建一下前端吧。

Webpack搭建前端文件

我们在开发前端的时候,用到模块化的话会开发更加丝滑一些,并且还有生产环境的打包压缩,这些都可以使用到Webpack

我们的打包有两种不同的环境,一种是生产环境,一种是开发环境,所以我们需要两个webpack的配置文件。

当然傻傻的直接写两个就有点憨憨了,我们将其中重复的内容给解构出来。

我们在根目录下创建webpack.common.jswebpack.dev.jswebpack.prod.js三个文件。

此步骤的懒人安装模块命令:

npm install @babel/core @babel/preset-env babel-loader css-loader html-webpack-plugin mini-css-extract-plugin optimize-css-assets-webpack-plugin terser-webpack-plugin webpack webpack-dev-middleware webpack-merge webpack-cli \--save-dev

// webpack.common.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    game'./src/client/index.js',
  },
  // 将打包文件输出到dist文件夹
  output: {
    filename'[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      // 使用babel解析js
      {
        test/\.js$/,
        exclude/node_modules/,
        use: {
          loader"babel-loader",
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      // 将js中的css抽出来
      {
        test/\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename'[name].[contenthash].css',
    }),
    // 将处理后的js以及css置入html中
    new HtmlWebpackPlugin({
      filename'index.html',
      template'src/client/html/index.html',
    }),
  ],
};

上面的代码已经可以处理css以及js文件了,接下来我们将它分配给developmentproduction中,其中production将会压缩jscss以及html

// webpack.dev.js
const { merge } = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common, {
  mode'development'
})

// webpack.prod.js
const { merge } = require('webpack-merge')
const common = require('./webpack.common')
// 压缩js的插件
const TerserJSPlugin = require('terser-webpack-plugin')
// 压缩css的插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = merge(common, {
  mode'production',
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCssAssetsPlugin({})]
  }
})

上面已经定义好了三个不同的webpack文件,那么该怎么样使用它们呢?

首先开发模式,我们需要做到修改了代码就自动打包代码,那么代码如下:

// src/servers/server.js
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')

const webpackConfig = require('../../webpack.dev')
// 前端静态文件
const app = express();
app.use(express.static('public'))

if(process.env.NODE_ENV === 'development'){
  // 这里是开发模式
  // 这里使用了webpack-dev-middleware的中间件,作用就是代码改动就使用webpack.dev的配置进行打包文件
  const compiler = webpack(webpackConfig);
  app.use(webpackDevMiddleware(compiler));
else {
  // 上线环境就只需要展示打包后的文件夹
  app.use(express.static('dist'))
}

接下来就在package.json中添加相对应的命令吧。

{
//...
  "scripts": {
    "build""webpack --config webpack.prod.js",
    "start""npm run build && cross-env NODE_ENV=production nodemon src/servers/server.js"
  },
//...
}

接下来,我们试试devstart的效果吧。

可以看到使用npm run dev命令后不仅启动了服务还打包了前端文件。

再试试npm run start

也可以看到先打包好了文件再启动了服务。

我们来看看打包后的文件。

测试Socket是否有效

先让我装一下前端的socket.io

> npm install socket.io-client --save

然后编写一下前端文件的入口文件:

// src/client/index.js
import { connect } from './networking'

Promise.all([
  connect()
]).then(() => {

}).catch(console.error)

可以看到上面代码我引入了另一个文件networking,我们来看一下:

// src/client/networking
import io from 'socket.io-client'

// 这里判断是否是https,如果是https就需要使用wss协议
const socketProtocal = (window.location.protocol.includes('https') ? 'wss' : 'ws');
// 这里就进行连接并且不重新连接,这样可以制作一个断开连接的功能
const socket = io(`${socketProtocal}://${window.location.host}`, { reconnectionfalse })

const connectPromise = new Promise(resolve => {
  socket.on('connect', () => {
    console.log('Connected to server!');
    resolve();
  })
})

export const connect = onGameOver => {
  connectPromise.then(()=> {
    socket.on('disconnect', () => {
      console.log('Disconnected from server.');
    })
  })
}

上面的代码就是连接socket,将会自动获取地址然后进行连接,通过Promise传给index.js,这样入口文件就可以知道什么时候连接成功了。

我们现在就去前端页面中看一下吧。

可以很清楚的看到,前后端都有连接成功的相关提示。

创建游戏对象

我们现在来定义一下游戏中的游戏对象吧。

首先游戏中将会有四种不同的游戏对象:

  • Player 玩家人物
  • Prop 道具
  • Bullet 子弹

我们来一一将其实现吧。

首先他们都属于物体,所以我给他们都定义一个父类Item:

// src/servers/objects/item.js
class Item{
  constructor(data = {}){
    // id
    this.id = data.id;
    // 位置
    this.x = data.x;
    this.y = data.y;
    // 大小
    this.w = data.w;
    this.h = data.h;
  }

  // 这里是物体每帧的运行状态
  update(dt){
  
  }

  // 格式化数据以方便发送数据给前端
  serializeForUpdate(){
    return {
      idthis.id,
      xthis.x,
      ythis.y,
      wthis.w,
      hthis.h
    }
  }
}

module.exports = Item;

上面这个类是所有游戏对象都要继承的类,它定义了游戏世界里每一个元素的基本属性。

接下来就是playerPropBullet的定义了。

// src/servers/objects/player.js
const Item = require('./item')
const Constants = require('../../shared/constants')

/**
 * 玩家对象类
 */

class Player extends Item{
  constructor(data){
    super(data);

    this.username = data.username;
    this.hp = Constants.PLAYER.MAX_HP;
    this.speed = Constants.PLAYER.SPEED;
    // 击败分值
    this.score = 0;
    // 拥有的buffs
    this.buffs = [];
  }

  update(dt){

  }

  serializeForUpdate(){
    return {
      ...(super.serializeForUpdate()),
      usernamethis.username,
      hpthis.hp,
      buffsthis.buffs.map(item => item.type)
    }
  }
}

module.exports = Player;

然后是道具以及子弹的定义。

// src/servers/objects/prop.js
const Item = require('./item')

/**
 * 道具类
 */

class Prop extends Item{
  constructor(){
    super();
  }
}

module.exports = Prop;

// src/servers/objects/bullet.js
const Item = require('./item')

/**
 * 子弹类
 */

class Bullet extends Item{
  constructor(){
    super();
  }
}

module.exports = Bullet

上面都是简单的定义,随着开发会逐渐添加内容。

添加事件发送

上面的代码虽然已经定义好了,但是还需要使用它,所以在这里我们来开发使用它们的方法。

在玩家输入名称加入游戏后,需要生成一个Player的游戏对象。

// src/servers/core/socket.js
class Socket{
  // ...
  listen(socket){
    console.log(`Player connected! Socket Id: ${socket.id}`);

    // 加入游戏
    socket.on(Constants.MSG_TYPES.JOIN_GAME, this.game.joinGame.bind(this.game, socket));
    // 断开游戏
    socket.on('disconnect'this.game.disconnect.bind(this.game, socket));
  }
  // ...
}

然后在game.js中添加相关逻辑。

// src/servers/core/game.js
const Player = require('../objects/player')
const Constants = require('../../shared/constants')

class Game{
  // ...

  update(){
    const now = Date.now();
    // 现在的时间减去上次执行完毕的时间得到中间间隔的时间
    const dt = (now - this.lastUpdateTime) / 1000;
    this.lastUpdateTime = now;

    // 更新玩家人物
    Object.keys(this.players).map(playerID => {
      const player = this.players[playerID];
      player.update(dt);
    })

    if(this.shouldSendUpdate){
      // 发送数据
      Object.keys(this.sockets).map(playerID => {
        const socket = this.sockets[playerID];
        const player = this.players[playerID];
        socket.emit(
            Constants.MSG_TYPES.UPDATE,
            // 处理游戏中的对象数据发送给前端
            this.createUpdate(player)
        )
      })

      this.shouldSendUpdate = false;
    } else {
      this.shouldSendUpdate = true;
    }
  }

  createUpdate(player){
    // 其他玩家
    const otherPlayer = Object.values(this.players).filter(
        p => p !== player
    );

    return {
      tDate.now(),
      // 自己
      me: player.serializeForUpdate(),
      others: otherPlayer,
      // 子弹
      bulletsthis.bullets.map(bullet => bullet.serializeForUpdate())
    }
  }

  // 玩家加入游戏
  joinGame(socket, username){
    this.sockets[socket.id] = socket;

    // 玩家位置随机生成
    const x = (Math.random() * .5 + .25) * Constants.MAP_SIZE;
    const y = (Math.random() * .5 + .25) * Constants.MAP_SIZE;
    this.players[socket.id] = new Player({
      id: socket.id,
      username,
      x, y,
      w: Constants.PLAYER.WIDTH,
      h: Constants.PLAYER.HEIGHT
    })
  }

  disconnect(socket){
    delete this.sockets[socket.id];
    delete this.players[socket.id];
  }
}

module.exports = Game;

这里我们开发了玩家的加入以及退出,还有Player对象的数据更新,以及游戏的数据发送。

现在后端服务已经有能力提供内容给前端了,接下来我们开始开发前端的界面吧。

前端界面开发

上面的内容让我们开发了一个拥有基本功能的后端服务。

接下来来开发前端的相关功能吧。

接收后端发送的数据

我们来看看后端发过来的数据是什么样的吧。

先在前端编写接收的方法。

// src/client/networking.js
import { processGameUpdate } from "./state";

export const connect = onGameOver => {
  connectPromise.then(()=> {
    // 游戏更新
    socket.on(Constants.MSG_TYPES.UPDATE, processGameUpdate);

    socket.on('disconnect', () => {
      console.log('Disconnected from server.');
    })
  })
}

export const play = username => {
  socket.emit(Constants.MSG_TYPES.JOIN_GAME, username);
}

// src/client/state.js
export function processGameUpdate(update){
    console.log(update);
}

// src/client/index.js
import { connect, play } from './networking'

Promise.all([
  connect()
]).then(() => {
  play('test');
}).catch(console.error)

上面的代码就可以让我们进入页面就直接加入游戏了,去页面看看效果吧。

image.png

编写游戏界面

我们先将html代码编辑一下。

// src/client/html/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>球球作战</title>
</head>
<body>
  <canvas id="cnv"></canvas>
  <div id="home">
    <h1>球球作战</h1>
    <p class="text-secondary">一个简简单单的射击游戏</p>
    <hr>

    <div class="content">
      <div class="key">
        <p>
          <code>W</code> 向上移动
        </p>
        <p>
          <code>S</code> 向下移动
        </p>
        <p>
          <code>A</code> 向左移动
        </p>
        <p>
          <code>D</code> 向右移动
        </p>
        <p>
          <code>鼠标左键</code> 发射子弹
        </p>
      </div>
      <div class="play hidden">
        <input type="text" id="username-input" placeholder="名称">
        <button id="play-button">开始游戏</button>
      </div>
      <div class="connect">
        <p>连接服务器中...</p>
      </div>
    </div>
  </div>
</body>
</html>

然后在index.js中导入css

// src/client/index.js
import './css/bootstrap-reboot.css'
import './css/main.css'

src/client/css中创建对应的文件,其中bootstrap-rebootbootstrap的重置基础样式的文件,这个可以在网络上下载,因为太长,本文就不贴出来了。

main.css中编写对应的样式。

// src/client/css/main.css
htmlbody {
  margin0;
  padding0;
  overflow: hidden;
  width100%;
  height100vh;
  backgroundlinear-gradient(to right bottom, rgb(154207223), rgb(10021689));
}

.hidden{
  display: none !important;
}

#cnv{
  width100%;
  height100%;
}

.text-secondary{
  color#666;
}

code{
  color: white;
  backgroundrgb(2367272);
  padding2px 10px;
  border-radius5px;
}

hr {
  border0;
  border-top1px solid rgba(0000.1);
  margin1rem 0;
  width100%;
}

button {
  font-size18px;
  outline: none;
  border: none;
  color: black;
  background-color: transparent;
  padding5px 20px;
  border-radius3px;
  transition: background-color 0.2s ease;
}

button:hover {
  background-colorrgb(141218134);
  color: white;
}

button:focus {
  outline: none;
}

#home p{
  margin-bottom5px;
}

#home{
  position: fixed;
  top50%;
  left50%;
  transformtranslateY(-50%translateX(-50%);
  padding20px 30px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius5px;
  text-align: center;
}

#home input {
  font-size18px;
  outline: none;
  border: none;
  border-bottom1px solid #dedede;
  margin-bottom5px;
  padding3px;
  text-align: center;
}

#home input:focus{
  border-bottom1px solid #8d8d8d;
}

#home .content{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#home .content .play{
  width200px;
  margin-left50px;
}

#home .content .connect{
  margin-left50px;
}

最后我们就可以得到下面这张图的效果了。

image.png

编写游戏开始的逻辑

我们先创建一个util.js来存放一些工具函数。

// src/client/util.js
export function $(elem){
  return document.querySelector(elem)
}

然后在index.js中编写对应的逻辑代码。

// src/client/index.js
import { connect, play } from './networking'
import { $ } from './util'

Promise.all([
  connect()
]).then(() => {
  // 隐藏连接服务器显示输入框及按键
  $('.connect').classList.add('hidden')
  $('.play').classList.remove('hidden')
  // 并且默认聚焦输入框
  $('#home input').focus();

  // 游戏开始按钮监听点击事件
  $('#play-button').onclick = () => {
    // 判断输入框的值是否为空
    let val = $('#home input').value;
    if(val.replace(/\s*/g'') === '') {
      alert('名称不能为空')
      return;
    }
    // 游戏开始,隐藏开始界面
    $('#home').classList.add('hidden')
    play(val)
  }
}).catch(console.error)

上面的代码已经可以正常的开始游戏了,但是游戏开始了,没有画面。

所以,我们现在来开发一下渲染画面的代码。

加载资源

我们都知道canvas绘制图片需要图片加载完毕,不然的话会啥也没有,所以我们先编写一个加载所有图片的代码。

图片文件存储在public/assets

// src/client/asset.js
// 需要加载的资源
const ASSET_NAMES = [
  'ball.svg',
  'aim.svg'
]

// 将下载好的图片文件保存起来供canvas使用
const assets = {};
// 每一张图片都是通过promise进行加载的,所有图片加载成功后,Promise.all就会结束
const downloadPromise = Promise.all(ASSET_NAMES.map(downloadAsset))

function downloadAsset(assetName){
  return new Promise(resolve => {
    const asset = new Image();
    asset.onload = () => {
      console.log(`Downloaded ${assetName}`)
      assets[assetName] = asset;
      resolve();
    }
    asset.src = `/assets/${assetName}`
  })
}

export const downloadAssets = () => downloadPromise;
export const getAsset = assetName => assets[assetName]

接下来在index.js中引入asset.js

// src/client/index.js
import { downloadAssets } from './asset'

Promise.all([
  connect(),
  downloadAssets()
]).then(() => {
  // ...
}).catch(console.error)

这个时候,我们在页面中就可以看到这样的输出了。

image.png

图片可以去iconfont或是在线体验的network或是github中下载。

绘制游戏对象

我们新建一个render.js文件,在其中编写对应的绘制代码。

// src/client/render.js
import { MAP_SIZE, PLAYER } from '../shared/constants'
import { getAsset } from './asset'
import { getCurrentState } from './state'
import { $ } from './util'

const cnv = $('#cnv')
const ctx = cnv.getContext('2d')

function setCanvasSize(){
  cnv.width = window.innerWidth;
  cnv.height = window.innerHeight;
}

// 这里将默认设置一次canvas宽高,当屏幕缩放的时候也会设置一次
setCanvasSize();
window.addEventListener('resize', setCanvasSize)

// 绘制函数
function render(){
  const { me, others, bullets } = getCurrentState();
  if(!me){
    return;
  }
}

// 这里将启动渲染函数的定时器,将其导出,我们在index.js中使用
let renderInterval = null;
export function startRendering(){
  renderInterval = setInterval(render, 1000 / 60);
}

export function stopRendering(){
  ctx.clearRect(00, cnv.width, cnv.height)
  clearInterval(renderInterval);
}

可以看到上面我们引入state.js中的getCurrentState函数,这个函数将获取最新服务器返回的数据对象。

// src/client/state.js
const gameUpdates = [];

export function processGameUpdate(update){
  gameUpdates.push(update)


export function getCurrentState(){
  return gameUpdates[gameUpdates.length - 1]
}

绘制背景

因为游戏中的地图是一个大地图,一个屏幕是装不下的,所以玩家移动需要一个参照物,这里使用一个渐变的圆来做参照物。

// src/client/render.js
function render(){
  // ...
  // 绘制背景圆
  renderBackground(me.x, me.y);

  // 绘制一个边界
  ctx.strokeStyle = 'black'
  ctx.lineWidth = 1;
  // 默认边界左上角在屏幕中心,减去人物的x/y算出相对于人物的偏移
  ctx.strokeRect(cnv.width / 2 - me.x, cnv.height / 2 - me.y, MAP_SIZE, MAP_SIZE)
}

function renderBackground(x, y){
  // 假设背景圆的位置在屏幕左上角,那么cnv.width/height / 2就会将这个圆定位在屏幕中心
  // MAP_SIZE / 2 - x/y 地图中心与玩家的距离,这段距离就是背景圆圆心正确的位置
  const backgroundX = MAP_SIZE / 2 - x + cnv.width / 2;
  const backgroundY = MAP_SIZE / 2 - y + cnv.height / 2;
  const bgGradient = ctx.createRadialGradient(
    backgroundX,
    backgroundY,
    MAP_SIZE / 10,
    backgroundX,
    backgroundY,
    MAP_SIZE / 2
  )
  bgGradient.addColorStop(0'rgb(100, 216, 89)')
  bgGradient.addColorStop(1'rgb(154, 207, 223)')
  ctx.fillStyle = bgGradient;
  ctx.fillRect(00, cnv.width, cnv.height)
}

上面的代码实现的效果就是下图。

我们玩家的位置在服务器中设置的是随机数字,所以每次进入游戏都是随机的位置。

image.png

绘制玩家

接下来就是绘制玩家了,依旧是在render.js中编写对应的代码。

// src/client/render.js
function render(){
  // ...
  // 绘制所有的玩家
  // 第一个参数是对照位置的数据,第二个参数是玩家渲染的数据
  renderPlayer(me, me);
  others.forEach(renderPlayer.bind(null, me));
}

function renderPlayer(me, player){
  const { x, y } = player;
  // 默认将玩家渲染在屏幕中心,然后将位置设置上去,再计算相对于自己的相对位置,就是正确在屏幕的位置了
  const canvasX = cnv.width / 2 + x - me.x;
  const canvasY = cnv.height / 2 + y - me.y;

  ctx.save();
  ctx.translate(canvasX, canvasY);
  ctx.drawImage(
    getAsset('ball.svg'),
    -PLAYER.RADUIS,
    -PLAYER.RADUIS,
    PLAYER.RADUIS * 2,
    PLAYER.RADUIS * 2
  )
  ctx.restore();

  // 绘制血条背景
  ctx.fillStyle = 'white'
  ctx.fillRect(
    canvasX - PLAYER.RADUIS,
    canvasY - PLAYER.RADUIS - 8,
    PLAYER.RADUIS * 2,
    4
  )

  // 绘制血条
  ctx.fillStyle = 'red'
  ctx.fillRect(
    canvasX - PLAYER.RADUIS,
    canvasY - PLAYER.RADUIS - 8,
    PLAYER.RADUIS * 2 * (player.hp / PLAYER.MAX_HP),
    4
  )

  // 绘制玩家的名称
  ctx.fillStyle = 'white'
  ctx.textAlign = 'center';
  ctx.font = "20px '微软雅黑'"
  ctx.fillText(player.username, canvasX, canvasY - PLAYER.RADUIS - 16)
}

这样就可以将玩家正确的绘制出来了。

image.png
image.png

上面两张图,是我打开两个页面进入游戏的两名玩家,可以看出它们分别以自己为中心,其他的玩家相对于它进行了绘制。

游戏玩法开发

添加移动交互

既然玩家我们绘制出来了,那么就可以让它开始移动起来了。

我们创建一个input.js来编写对应的输入交互代码。

// src/client/input.js
// 发送信息给后端
import { emitControl } from "./networking";

function onKeydown(ev){
  let code = ev.keyCode;
  switch(code){
    case 65:
      emitControl({
        action'move-left',
        datafalse
      })
      break;
    case 68:
      emitControl({
        action'move-right',
        datatrue
      })
      break;
    case 87:
      emitControl({
        action'move-top',
        datafalse
      })
      break;
    case 83:
      emitControl({
        action'move-bottom',
        datatrue
      })
      break;
  }
}

function onKeyup(ev){
  let code = ev.keyCode;
  switch(code){
    case 65:
      emitControl({
        action'move-left',
        data0
      })
      break;
    case 68:
      emitControl({
        action'move-right',
        data0
      })
      break;
    case 87:
      emitControl({
        action'move-top',
        data0
      })
      break;
    case 83:
      emitControl({
        action'move-bottom',
        data0
      })
      break;
  }
}

export function startCapturingInput(){
  window.addEventListener('keydown', onKeydown);
  window.addEventListener('keyup', onKeyup);
}

export function stopCapturingInput(){
  window.removeEventListener('keydown', onKeydown);
  window.removeEventListener('keyup', onKeyup);
}

// src/client/networking.js
// ...

// 发送信息给后端
export const emitControl = data => {
  socket.emit(Constants.MSG_TYPES.INPUT, data);
}

上面的代码很简单,通过判断W/S/A/D四个按键发送信息给后端。

后端进行处理传递给玩家对象,然后在游戏更新中使玩家移动。

// src/servers/core/game.js
class Game{
  // ...
  update(){
    const now = Date.now();
    const dt = (now - this.lastUpdateTime) / 1000;
    this.lastUpdateTime = now;

    // 每次游戏更新告诉玩家对象,你要更新了
    Object.keys(this.players).map(playerID => {
      const player = this.players[playerID]
      player.update(dt)
    })
  }

  handleInput(socket, item){
    const player = this.players[socket.id];
    if(player){
      let data = item.action.split('-');
      let type = data[0];
      let value = data[1];
      switch(type){
        case 'move':
          // 这里是为了防止前端发送1000/-1000这种数字,会导致玩家移动飞快
          player.move[value] = typeof item.data === 'boolean'
                                ? item.data ? 1 : -1
                                : 0
          break;
      }
    }
  }
}

然后在player.js中加入对应的移动代码。

// src/servers/objects/player.js
class Player extends Item{
  constructor(data){
    super(data)

    this.move = {
      left0right0,
      top0bottom0
    };
    // ...
  }

  update(dt){
    // 这里的dt是每次游戏更新的时间,乘于dt将会60帧也就是一秒移动speed的值
    this.x += (this.move.left + this.move.right) * this.speed * dt;
    this.y += (this.move.top + this.move.bottom) * this.speed * dt;
  }

  // ...
}

module.exports = Player;

通过上面的代码,我们就实现了玩家移动的逻辑了,下面我们看看效果。

5.gif

可以看出,我们可以飞出地图之外,我们在player.js中添加对应的限制代码。

// src/servers/objects/player.js
class Player extends Item{
  // ...
  
  update(dt){
    this.x += (this.move.left + this.move.right) * this.speed * dt;
    this.y += (this.move.top + this.move.bottom) * this.speed * dt;

    // 在地图最大尺寸和自身位置比较时,不能大于地图最大尺寸
    // 在地图开始0位置和自身位置比较时,不能小于0
    this.x = Math.max(0Math.min(Constants.MAP_SIZE, this.x))
    this.y = Math.max(0Math.min(Constants.MAP_SIZE, this.y))
  }

  // ...
}

module.exports = Player;

增加发送子弹

既然我们的人物已经可以移动了,那么玩家间对抗的工具“子弹”那肯定是不能少的,现在我们就来开发吧。

我们先在前端添加发送开枪意图的代码。

// src/client/input.js
// 这里使用atan2获取鼠标相对屏幕中心的角度
function getMouseDir(ev){
  const dir = Math.atan2(ev.clientX - window.innerWidth / 2, ev.clientY - window.innerHeight / 2);
  return dir;
}

// 每次鼠标移动,发送方向给后端保存
function onMousemove(ev){
  if(ev.button === 0){
    emitControl({
      action'dir',
      data: getMouseDir(ev)
    })
  }
}

// 开火
function onMousedown(ev){
  if(ev.button === 0){
    emitControl({
      action'bullet',
      datatrue
    })
  }
}

// 停火
function onMouseup(ev){
  if(ev.button === 0){
    emitControl({
      action'bullet',
      datafalse
    })
  }
}

export function startCapturingInput(){
  window.addEventListener('mousedown', onMousedown)
  window.addEventListener('mousemove', onMousemove)
  window.addEventListener('mouseup', onMouseup)
}

export function stopCapturingInput(){
  window.removeEventListener('mousedown', onMousedown)
  window.addEventListener('mousemove', onMousemove)
  window.removeEventListener('mouseup', onMouseup)
}

然后在后端中编写对应的代码。

// src/servers/core/game.js
class Game{
  // ...
  
  update(){
    // ...
    // 如果子弹飞出地图或是已经达到人物身上,就过滤掉
    this.bullets = this.bullets.filter(item => !item.isOver)
    // 为每一个子弹更新
    this.bullets.map(bullet => {
      bullet.update(dt);
    })

    Object.keys(this.players).map(playerID => {
      const player = this.players[playerID]
      // 在人物对象中添加发射子弹
      const bullet = player.update(dt)
      if(bullet){
        this.bullets.push(bullet);
      }
    })
  }

  handleInput(socket, item){
    const player = this.players[socket.id];
    if(player){
      let data = item.action.split('-');
      let type = data[0];
      let value = data[1];
      switch(type){
        case 'move':
          player.move[value] = typeof item.data === 'boolean'
                                ? item.data ? 1 : -1
                                : 0
          break;
        // 更新鼠标位置
        case 'dir':
          player.fireMouseDir = item.data;
          break;
        // 开火/停火
        case 'bullet':
          player.fire = item.data;
          break;
      }
    }
  }
}

module.exports = Game;

game.js中已经编写好了子弹的逻辑了,现在只需要在player.js中返回一个bullet对象就可以成功发射了。

// src/servers/objects/player.js
const Bullet = require('./bullet');

class Player extends Item{
  constructor(data){
    super(data)
    
    // ...
    
    // 开火
    this.fire = false;
    this.fireMouseDir = 0;
    this.fireTime = 0;
  }

  update(dt){
    // ...
    
    // 每帧都减少开火延迟
    this.fireTime -= dt;
    // 判断是否开火
    if(this.fire != false){
      // 如果没有延迟了就返回一个bullet对象
      if(this.fireTime <= 0){
        // 将延迟重新设置
        this.fireTime = Constants.PLAYER.FIRE;
        // 创建一个bullet对象,将自身的id传递过去,后面做碰撞的时候,就自己发射的子弹就不会打到自己
        return new Bullet(this.id, this.x, this.y, this.fireMouseDir);
      }
    }
  }
  
  // ...
}

module.exports = Player;

对应的bullet.js文件也要补全一下。

// src/servers/objects/bullet.js
const shortid = require('shortid')
const Constants = require('../../shared/constants');
const Item = require('./item')

class Bullet extends Item{
  constructor(parentID, x, y, dir){
    super({
      id: shortid(),
      x, y,
      w: Constants.BULLET.RADUIS,
      h: Constants.BULLET.RADUIS,
    });

    this.rotate = 0;
    this.dir = dir;
    this.parentID = parentID;
    this.isOver = false;
  }

  update(dt){
    // 使用三角函数将鼠标位置计算出对应的x/y值
    this.x += dt * Constants.BULLET.SPEED * Math.sin(this.dir);
    this.y += dt * Constants.BULLET.SPEED * Math.cos(this.dir);
    
    // 这里是为了让子弹有一个旋转功能,一秒转一圈
    this.rotate += dt * 360;

    // 离开地图就将isOver设置为true,在game.js中就会过滤
    if(this.x < 0 || this.x > Constants.MAP_SIZE
      || this.y < 0 || this.y > Constants.MAP_SIZE){
        this.isOver = true;
      }
  }

  serializeForUpdate(){
    return {
      ...(super.serializeForUpdate()),
      rotatethis.rotate
    }
  }
}

module.exports = Bullet;

这里引入了一个shortid库,是创建一个随机数的作用

使用npm install shortid \--save安装

这个时候,我们就可以正常发射子弹,但是还不能看见子弹。

那是因为没有写对应的绘制代码。

// src/client/render.js
function render(){
  // ...
  
  bullets.map(renderBullet.bind(null, me))

  // ...
}

function renderBullet(me, bullet){
  const { x, y, rotate } = bullet;
  ctx.save();
  // 偏移到子弹相对人物的位置
  ctx.translate(cnv.width / 2 + x - me.x, cnv.height / 2 + y - me.y)
  // 旋转
  ctx.rotate(Math.PI / 180 * rotate)
  // 绘制子弹
  ctx.drawImage(
    getAsset('bullet.svg'),
    -BULLET.RADUIS,
    -BULLET.RADUIS,
    BULLET.RADUIS * 2,
    BULLET.RADUIS * 2
  )
  ctx.restore();
}

这个时候,我们就将发射子弹的功能完成了。

来看看效果吧。

6.gif

碰撞检测

既然完成了玩家的移动及发送子弹逻辑,现在就可以开发对战最重要的碰撞检测了。

我们直接在game.js中添加。

// src/servers/core/game.js
class Game{
  // ..
  
  update(){
    // ...

    // 将玩家及子弹传入进行碰撞检测
    this.collisions(Object.values(this.players), this.bullets);

    Object.keys(this.sockets).map(playerID => {
      const socket = this.sockets[playerID]
      const player = this.players[playerID]
      // 如果玩家的血量低于等于0就告诉他游戏结束,并将其移除游戏
      if(player.hp <= 0){
        socket.emit(Constants.MSG_TYPES.GAME_OVER)
        this.disconnect(socket);
      }
    })

    // ...
  }

  collisions(players, bullets){
    for(let i = 0; i < bullets.length; i++){
      for(let j = 0; j < players.length; j++){
        let bullet = bullets[i];
        let player = players[j];

        // 自己发射的子弹不能达到自己身上
        // distanceTo是一个使用勾股定理判断物体与自己的距离,如果距离小于玩家与子弹的半径就是碰撞了
        if(bullet.parentID !== player.id
          && player.distanceTo(bullet) <= Constants.PLAYER.RADUIS + Constants.BULLET.RADUIS
          ){
          // 子弹毁灭
          bullet.isOver = true;
          // 玩家扣血
          player.takeBulletDamage();
          // 这里判断给最后一击使其死亡的玩家加分
          if(player.hp <= 0){
            this.players[bullet.parentID].score++;
          }
          break;
        }
      }
    }
  }

  // ...
}

module.exports = Game;

接下来在前端中添加游戏结束的逻辑。

// src/client/index.js
// ...
import { startRendering, stopRendering } from './render'
import { startCapturingInput, stopCapturingInput } from './input'

Promise.all([
  connect(gameOver),
  downloadAssets()
]).then(() => {
  // ...
}).catch(console.error)

function gameOver(){
  // 停止渲染
  stopRendering();
  // 停止监听
  stopCapturingInput();
  // 将开始界面显示出来
  $('#home').classList.remove('hidden');
  alert('你GG了,重新进入游戏吧。');
}

这个时候我们就可以正常的进行游戏了。

来看看效果。

8.gif

排行榜功能

既然我们已经完成了正常的游戏基本操作,那么现在需要一个排行来让玩家有游戏体验(啊哈哈哈)。

我们先在前端把排行榜显示出来。

我们先在后端添加返回排行榜的数据。

// src/servers/core/game.js
class Game{
  // ...

  createUpdate(player){
    // ...

    return {
      // ...
      leaderboardthis.getLeaderboard()
    }
  }

  getLeaderboard(){
    return Object.values(this.players)
      .sort((a, b) => b.score - a.score)
      .slice(010)
      .map(item => ({ username: item.username, score: item.score }))
  }
}

module.exports = Game;

然后在前端中编写一下排行榜的样式。

// src/client/html/index.html
// ..
<body>
  <canvas id="cnv"></canvas>

  <div class="ranking hidden">
    <table>
      <thead>
        <tr>
          <th>排名</th>
          <th>姓名</th>
          <th>积分</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  
  // ...
</body>
</html>

// src/client/css/main.css
// ...

.ranking{
  position: fixed;
  width300px;
  background#333;
  top0;
  left0;
  color: white;
  padding10px;
}

.ranking table{
  border0;
  border-collapse0;
  width100%;
}

再编写一个渲染数据的函数在render.js中。

// src/client/render.js
// ...

export function updateRanking(data){
  let str = '';

  data.map((item, i) => {
    str += `
      <tr>
        <td>${i + 1}</td>
        <td>${item.username}</td>
        <td>${item.score}</td>
      <tr>
    `

  })

  $('.ranking table tbody').innerHTML = str;
}

最后在state.js中使用这个函数。

// src/client/state.js
import { updateRanking } from "./render";

const gameUpdates = [];

export function processGameUpdate(update){
  gameUpdates.push(update)

  updateRanking(update.leaderboard) 
}

// ...

现在渲染排行榜是没有问题了,现在到index.js中管理一下排行榜的显示隐藏。

// src/client/index.js
// ...

Promise.all([
  connect(gameOver),
  downloadAssets()
]).then(() => {
  // ...

  $('#play-button').onclick = () => {
    // ...

    $('.ranking').classList.remove('hidden')

    // ...
  }
}).catch(console.error)

function gameOver(){
  // ...
  $('.ranking').classList.add('hidden')
  // ...
}

写到这里,排行榜的功能就完成了。

image.png

道具开发

当然游戏现在这样游戏性还是很差的,我们来加几个道具增加一点游戏性吧。

先将prop.js完善吧。

// src/servers/objects/prop.js
const Constants = require('../../shared/constants')
const Item = require('./item')

class Prop extends Item{
  constructor(type){
    // 随机位置
    const x = (Math.random() * .5 + .25) * Constants.MAP_SIZE;
    const y = (Math.random() * .5 + .25) * Constants.MAP_SIZE;
    super({
      x, y,
      w: Constants.PROP.RADUIS,
      h: Constants.PROP.RADUIS
    });

    this.isOver = false;
    // 什么类型的buff
    this.type = type;
    // 持续10秒
    this.time = 10;
  }

  // 这个道具对玩家的影响
  add(player){
    switch(this.type){
      case 'speed':
        player.speed += 500;
        break;
    }
  }
  
  // 移除这个道具时将对玩家的影响消除
  remove(player){
    switch(this.type){
      case 'speed':
        player.speed -= 500;
        break;
    }
  }

  // 每帧更新
  update(dt){
    this.time -= dt;
  }

  serializeForUpdate(){
    return {
      ...(super.serializeForUpdate()),
      typethis.type,
      timethis.time
    }
  }
}

module.exports = Prop;

然后我们在game.js中添加定时添加道具的逻辑。

// src/servers/core/game.js
const Constants = require("../../shared/constants");
const Player = require("../objects/player");
const Prop = require("../objects/prop");

class Game{
  constructor(){
    // ...
    // 增加一个保存道具的数组
    this.props = [];
    
    // ...
    // 添加道具的计时
    this.createPropTime = 0;
    setInterval(this.update.bind(this), 1000 / 60);
  }

  update(){
    // ...
    
    // 这个定时为0时添加
    this.createPropTime -= dt;
    // 过滤掉已经碰撞后的道具
    this.props = this.props.filter(item => !item.isOver)
    // 道具大于10个时不添加
    if(this.createPropTime <= 0 && this.props.length < 10){
      this.createPropTime = Constants.PROP.CREATE_TIME;
      this.props.push(new Prop('speed'))
    }
    
    // ...

    this.collisionsBullet(Object.values(this.players), this.bullets);
    this.collisionsProp(Object.values(this.players), this.props)

    // ...
  }

  // 玩家与道具的碰撞检测
  collisionsProp(players, props){
    for(let i = 0; i < props.length; i++){
      for(let j = 0; j < players.length; j++){
        let prop = props[i];
        let player = players[j];

        if(player.distanceTo(prop) <= Constants.PLAYER.RADUIS + Constants.PROP.RADUIS){
          // 碰撞后,道具消失
          prop.isOver = true;
          // 玩家添加这个道具的效果
          player.pushBuff(prop);
          break;
        }
      }
    }
  }

  // 这里是之前的collisions,为了和碰撞道具区分
  collisionsBullet(players, bullets){
    // ...
  }

  createUpdate(player){
    // ...
    
    return {
      // ...
      propsthis.props.map(prop => prop.serializeForUpdate())
    }
  }
}

module.exports = Game;

这里可以将碰撞检测进行优化,将其改造成任何场景都可以使用的碰撞函数,这里是为了方便就直接复制成两个。

接下来在player.js添加对应的函数。

// src/servers/objects/player.js
const Item = require('./item')
const Constants = require('../../shared/constants');
const Bullet = require('./bullet');

class Player extends Item{
  // ...

  update(dt){
    // ...
  
    // 判断buff是否失效
    this.buffs = this.buffs.filter(item => {
      if(item.time > 0){
        return item;
      } else {
        item.remove(this);
      }
    })
    // buff的持续时间每帧都减少
    this.buffs.map(buff => buff.update(dt));

    // ...
  }

  // 添加
  pushBuff(prop){
    this.buffs.push(prop);
    prop.add(this);
  }
  
  // ...

  serializeForUpdate(){
    return {
      // ...
      buffsthis.buffs.map(item => item.serializeForUpdate())
    }
  }
}

module.exports = Player;

后端需要做的功能已经完成了,现在到前端中添加绘制方面的代码。

// src/client/render.js
// ...

function render(){
  const { me, others, bullets, props } = getCurrentState();
  if(!me){
    return;
  }
  
  // ...
  
  // 绘制道具
  props.map(renderProp.bind(null, me))
  
  // ...
}

// ...

// 绘制道具
function renderProp(me, prop){
  const { x, y, type } = prop;
  ctx.save();
  ctx.drawImage(
    getAsset(`${type}.svg`),
    cnv.width / 2 + x - me.x,
    cnv.height / 2 + y - me.y,
    PROP.RADUIS * 2,
    PROP.RADUIS * 2
  )
  ctx.restore();
}

function renderPlayer(me, player){
  // ...
  
  // 显示玩家已经领取到的道具
  player.buffs.map((buff, i) => {
    ctx.drawImage(
      getAsset(`${buff.type}.svg`),
      canvasX - PLAYER.RADUIS + i * 22,
      canvasY + PLAYER.RADUIS + 16,
      2020
    )
  })
}

这个时候,加速道具就完成啦。

如果你需要添加更多道具,可以在prop.js中进行添加,并且在game.js中生成道具的时候把speed改为随机道具的type

完成后的效果。

image.png

断开连接显示

我们可以写一个界面专门来显示断开连接的提示。

// src/client/html/index.html
// ...
<body>
  // ...
  
  <div class="disconnect hidden">
    <p>与服务器断开连接了</p>
  </div>
</body>

// src/client/css/main.css
.disconnect{
  position: fixed;
  width100%;
  height100vh;
  left0;
  top0;
  z-index100;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  color#444;
  font-size40px;
}

再到networking.js中断开连接时显示这个界面。

// src/client/networking.js
// ...

export const connect = onGameOver => {
  connectPromise.then(() => {
    // ...
    socket.on('disconnect', () => {
      $('.disconnect').classList.remove('hidden')
      console.log('Disconnected from server.')
    })
  })
}

// ...

这个时候,我们打开游戏,然后关闭游戏服务,游戏就会显示这个界面了。

image.png

转自:我系小西几呀

https://juejin.cn/post/6960096410305822751

点赞和在看就是最大的支持❤️

浏览 32
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报