ການສ້າງເກມເວັບທີ່ມີຜູ້ຫຼິ້ນຫຼາຍຄົນໃນປະເພດ .io

ປ່ອຍອອກມາເມື່ອປີ 2015 Agario ໄດ້ກາຍເປັນ progenitor ຂອງປະເພດໃຫມ່ games.io, ຄວາມນິຍົມຂອງເຂົາເຈົ້າໄດ້ເພີ່ມຂຶ້ນຢ່າງຫຼວງຫຼາຍນັບຕັ້ງແຕ່ນັ້ນມາ. ຂ້າພະເຈົ້າໄດ້ປະສົບກັບການເພີ່ມຂຶ້ນຂອງຄວາມນິຍົມຂອງເກມ .io ດ້ວຍຕົນເອງ: ໃນໄລຍະສາມປີທີ່ຜ່ານມາ, ຂ້າພະເຈົ້າ ສ້າງແລະຂາຍສອງເກມໃນປະເພດນີ້..

ໃນ​ກໍ​ລະ​ນີ​ທີ່​ທ່ານ​ບໍ່​ເຄີຍ​ໄດ້​ຍິນ​ຂອງ​ເກມ​ເຫຼົ່າ​ນີ້​ມາ​ກ່ອນ​, ພວກ​ເຂົາ​ເຈົ້າ​ແມ່ນ​ຟຣີ​, ເກມ​ຫຼາຍ​ເວັບ​ທີ່​ງ່າຍ​ທີ່​ຈະ​ຫຼິ້ນ (ບໍ່​ຕ້ອງ​ການ​ບັນ​ຊີ​)​. ປົກກະຕິແລ້ວ ພວກເຂົາຕີຜູ້ຫຼິ້ນຝ່າຍຄ້ານຫຼາຍຄົນຢູ່ໃນສະຫນາມກິລາດຽວ. ເກມ .io ທີ່ມີຊື່ສຽງອື່ນໆ: Slither.io и Diep.io.

ໃນບົດຂຽນນີ້, ພວກເຮົາຈະພິຈາລະນາວິທີການ ສ້າງເກມ .io ຕັ້ງແຕ່ເລີ່ມຕົ້ນ. ເພື່ອເຮັດສິ່ງນີ້, ພຽງແຕ່ຄວາມຮູ້ຂອງ Javascript ຈະພຽງພໍ: ທ່ານຈໍາເປັນຕ້ອງເຂົ້າໃຈສິ່ງຕ່າງໆເຊັ່ນ syntax ES6, ຄໍາສໍາຄັນ this и ຄຳ ໝັ້ນ ສັນຍາ. ເຖິງແມ່ນວ່າທ່ານບໍ່ຮູ້ Javascript ຢ່າງສົມບູນ, ທ່ານຍັງສາມາດເຂົ້າໃຈຂໍ້ຄວາມສ່ວນໃຫຍ່.

ຕົວຢ່າງຂອງເກມ .io

ສໍາລັບການຊ່ວຍເຫຼືອການຝຶກອົບຮົມພວກເຮົາຈະອ້າງເຖິງ ຕົວຢ່າງເກມ .io. ລອງຫຼິ້ນເບິ່ງ!

ເກມແມ່ນຂ້ອນຂ້າງງ່າຍດາຍ: ທ່ານຄວບຄຸມເຮືອໃນນາມຫລິ້ນກິລາກັບຜູ້ນອື່ນໆ. ເຮືອຂອງເຈົ້າຈະຍິງລູກປືນອັດຕະໂນມັດ ແລະເຈົ້າພະຍາຍາມຕີເຄື່ອງຫຼິ້ນອື່ນໃນຂະນະທີ່ຫຼີກລ່ຽງລູກປືນຂອງເຂົາເຈົ້າ.

1. ພາບລວມໂດຍຫຍໍ້/ໂຄງສ້າງໂຄງການ

ຂ້າພະເຈົ້າແນະນໍາໃຫ້ ດາວໂຫລດລະຫັດແຫຼ່ງ ເກມຕົວຢ່າງດັ່ງນັ້ນທ່ານສາມາດປະຕິບັດຕາມຂ້າພະເຈົ້າ.

ຕົວຢ່າງໃຊ້ດັ່ງຕໍ່ໄປນີ້:

• ສະແດງ ແມ່ນກອບເວັບທີ່ນິຍົມທີ່ສຸດສໍາລັບ Node.js ທີ່ຈັດການເຄື່ອງແມ່ຂ່າຍເວັບຂອງເກມ.
• socket.io — ຫ້ອງສະໝຸດ websocket ສໍາລັບການແລກປ່ຽນຂໍ້ມູນລະຫວ່າງ browser ແລະ server.
• Webpack - ຜູ້ຈັດການໂມດູນ. ທ່ານສາມາດອ່ານວ່າເປັນຫຍັງຕ້ອງໃຊ້ Webpack ທີ່ນີ້.

ນີ້ແມ່ນສິ່ງທີ່ໂຄງສ້າງໄດເລກະທໍລີຂອງໂຄງການເບິ່ງຄືວ່າ:

public/
    assets/
        ...
src/
    client/
        css/
            ...
        html/
            index.html
        index.js
        ...
    server/
        server.js
        ...
    shared/
        constants.js

ສາທາລະນະ/

ທຸກສິ່ງທຸກຢ່າງແມ່ນຢູ່ໃນໂຟນເດີ public/ ຈະຖືກສົ່ງຜ່ານທາງສະຖິຕິໂດຍເຊີບເວີ. IN public/assets/ ມີຮູບພາບທີ່ໃຊ້ໂດຍໂຄງການຂອງພວກເຮົາ.

src /

ລະຫັດແຫຼ່ງທັງຫມົດແມ່ນຢູ່ໃນໂຟນເດີ src/. ຫົວຂໍ້ client/ и server/ ເວົ້າສໍາລັບຕົນເອງແລະ shared/ ມີໄຟລ໌ຄົງທີ່ທີ່ນຳເຂົ້າໂດຍທັງລູກຄ້າ ແລະເຊີບເວີ.

2. ຕົວກໍານົດການປະກອບ/ໂຄງການ

ດັ່ງທີ່ໄດ້ກ່າວໄວ້ຂ້າງເທິງ, ພວກເຮົາໃຊ້ຕົວຈັດການໂມດູນເພື່ອສ້າງໂຄງການ Webpack. ມາເບິ່ງການຕັ້ງຄ່າ Webpack ຂອງພວກເຮົາ:

webpack.common.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    game: './src/client/index.js',
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/client/html/index.html',
    }),
  ],
};

ສາຍ​ທີ່​ສໍາ​ຄັນ​ທີ່​ສຸດ​ແມ່ນ​ດັ່ງ​ຕໍ່​ໄປ​ນີ້​:

• src/client/index.js ແມ່ນຈຸດເຂົ້າຂອງລູກຄ້າ Javascript (JS). Webpack ຈະເລີ່ມຈາກບ່ອນນີ້ ແລະຊອກຫາໄຟລ໌ທີ່ນຳເຂົ້າອື່ນຊ້ຳໆ.
• ຜົນຜະລິດ JS ຂອງ Webpack build ຂອງພວກເຮົາຈະຕັ້ງຢູ່ໃນໄດເລກະທໍລີ dist/. ຂ້ອຍຈະໂທຫາໄຟລ໌ນີ້ຂອງພວກເຮົາ ຊຸດ JS.
• ພວກເຮົາໃຊ້ Babel, ແລະໂດຍສະເພາະການຕັ້ງຄ່າ @babel/preset-env ເພື່ອຖອດລະຫັດ JS ຂອງພວກເຮົາສໍາລັບຕົວທ່ອງເວັບທີ່ເກົ່າກວ່າ.
• ພວກເຮົາໃຊ້ plugin ເພື່ອສະກັດ CSS ທັງຫມົດທີ່ອ້າງອິງໂດຍໄຟລ໌ JS ແລະລວມພວກມັນເຂົ້າໄປໃນບ່ອນດຽວ. ຂ້າພະເຈົ້າຈະໂທຫາມັນຂອງພວກເຮົາ ຊຸດ CSS.

ທ່ານອາດຈະໄດ້ສັງເກດເຫັນຊື່ໄຟລ໌ແພັກເກັດທີ່ແປກປະຫຼາດ '[name].[contenthash].ext'. ພວກເຂົາເຈົ້າປະກອບດ້ວຍ ການປ່ຽນຊື່ໄຟລ໌ Webpack: [name] ຈະຖືກແທນທີ່ດ້ວຍຊື່ຂອງຈຸດປ້ອນຂໍ້ມູນ (ໃນກໍລະນີຂອງພວກເຮົາມັນແມ່ນ game), ກ [contenthash] ຈະຖືກແທນທີ່ດ້ວຍ hash ຂອງເນື້ອໃນໄຟລ໌. ພວກເຮົາເຮັດສິ່ງນີ້ເພື່ອ ເພີ່ມປະສິດທິພາບໂຄງການສໍາລັບການ hashing - ພວກ​ເຮົາ​ສາ​ມາດ​ບອກ​ຕົວ​ທ່ອງ​ເວັບ​ເພື່ອ cache packages JS ຂອງ​ພວກ​ເຮົາ​ຢ່າງ​ບໍ່​ມີ​ກໍາ​ນົດ​ເນື່ອງ​ຈາກ​ວ່າ​ ຖ້າແພັກເກັດປ່ຽນ, ຊື່ໄຟລ໌ຂອງມັນປ່ຽນຄືກັນ (ການ​ປ່ຽນ​ແປງ​ contenthash). ຜົນໄດ້ຮັບສໍາເລັດຈະເປັນຊື່ໄຟລ໌ຂອງມຸມເບິ່ງ game.dbeee76e91a97d0c7207.js.

ເອກະສານ webpack.common.js - ນີ້ແມ່ນໄຟລ໌ການຕັ້ງຄ່າພື້ນຖານທີ່ພວກເຮົານໍາເຂົ້າເຂົ້າໃນການພັດທະນາແລະສໍາເລັດການຕັ້ງຄ່າໂຄງການ. ຕົວຢ່າງ, ນີ້ແມ່ນການຕັ້ງຄ່າການພັດທະນາ:

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

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

ສໍາລັບປະສິດທິພາບ, ພວກເຮົາໃຊ້ໃນຂະບວນການພັດທະນາ webpack.dev.js, ແລະສະຫຼັບໄປ webpack.prod.js, ເພື່ອເພີ່ມປະສິດທິພາບຂະຫນາດຊຸດໃນເວລາທີ່ deploying ກັບການຜະລິດ.

ການຕັ້ງຄ່າທ້ອງຖິ່ນ

ຂ້າພະເຈົ້າແນະນໍາໃຫ້ຕິດຕັ້ງໂຄງການຢູ່ໃນເຄື່ອງທ້ອງຖິ່ນຂອງທ່ານເພື່ອໃຫ້ທ່ານສາມາດປະຕິບັດຕາມຂັ້ນຕອນທີ່ລະບຸໄວ້ໃນຂໍ້ຄວາມນີ້. ການຕິດຕັ້ງແມ່ນງ່າຍດາຍ: ທໍາອິດ, ລະບົບຕ້ອງມີ node и ປ. ຕໍ່ໄປທ່ານຈໍາເປັນຕ້ອງເຮັດ

$ git clone https://github.com/vzhou842/example-.io-game.git
$ cd example-.io-game
$ npm install

ແລະເຈົ້າພ້ອມທີ່ຈະໄປ! ເພື່ອເລີ່ມຕົ້ນເຄື່ອງແມ່ຂ່າຍການພັດທະນາ, ພຽງແຕ່ດໍາເນີນການ

$ npm run develop

ແລະໄປທີ່ຕົວທ່ອງເວັບຂອງທ່ານ localhost: 3000. ເຊີບເວີພັດທະນາຈະສ້າງແພັກເກັດ JS ແລະ CSS ໂດຍອັດຕະໂນມັດເມື່ອການປ່ຽນແປງລະຫັດເກີດຂື້ນ - ພຽງແຕ່ໂຫຼດຫນ້າໃຫມ່ເພື່ອເບິ່ງການປ່ຽນແປງທັງຫມົດ!

3. ຈຸດເຂົ້າລູກຄ້າ

ໃຫ້ພວກເຮົາລົງໄປຫາລະຫັດເກມຕົວມັນເອງ. ທໍາອິດພວກເຮົາຕ້ອງການຫນ້າ index.html, ເມື່ອທ່ານໄປຢ້ຽມຢາມເວັບໄຊທ໌, ຕົວທ່ອງເວັບຈະໂຫລດມັນກ່ອນ. ຫນ້າຂອງພວກເຮົາຈະຂ້ອນຂ້າງງ່າຍດາຍ:

index.html

ຕົວຢ່າງເກມ .io  ຫຼິ້ນ

ຕົວຢ່າງລະຫັດນີ້ໄດ້ຖືກປັບປຸງເລັກນ້ອຍເພື່ອຄວາມຊັດເຈນ, ແລະຂ້ອຍຈະເຮັດແບບດຽວກັນກັບຫຼາຍໆຕົວຢ່າງອື່ນໆໃນການຕອບ. ທ່ານສາມາດເບິ່ງລະຫັດເຕັມຢູ່ສະເຫມີ GitHub.

ພວກ​ເຮົາ​ມີ:

• ອົງປະກອບຂອງ HTML5 Canvas (<canvas>), ເຊິ່ງພວກເຮົາຈະໃຊ້ເພື່ອສະແດງເກມ.
• <link> ເພື່ອເພີ່ມຊຸດ CSS ຂອງພວກເຮົາ.
• <script> ເພື່ອເພີ່ມຊຸດ Javascript ຂອງພວກເຮົາ.
• ເມນູຫຼັກທີ່ມີຊື່ຜູ້ໃຊ້ <input> ແລະປຸ່ມ “PLAY” (<button>).

ເມື່ອຫນ້າທໍາອິດໂຫຼດ, ຕົວທ່ອງເວັບຈະເລີ່ມປະຕິບັດລະຫັດ Javascript, ເລີ່ມຕົ້ນດ້ວຍໄຟລ໌ JS ຈຸດເຂົ້າ: src/client/index.js.

index.js

import { connect, play } from './networking';
import { startRendering, stopRendering } from './render';
import { startCapturingInput, stopCapturingInput } from './input';
import { downloadAssets } from './assets';
import { initState } from './state';
import { setLeaderboardHidden } from './leaderboard';

import './css/main.css';

const playMenu = document.getElementById('play-menu');
const playButton = document.getElementById('play-button');
const usernameInput = document.getElementById('username-input');

Promise.all([
  connect(),
  downloadAssets(),
]).then(() => {
  playMenu.classList.remove('hidden');
  usernameInput.focus();
  playButton.onclick = () => {
    // Play!
    play(usernameInput.value);
    playMenu.classList.add('hidden');
    initState();
    startCapturingInput();
    startRendering();
    setLeaderboardHidden(false);
  };
});

ນີ້ອາດຈະເບິ່ງຄືວ່າສັບສົນ, ແຕ່ຕົວຈິງແລ້ວບໍ່ມີຫຍັງເກີດຂຶ້ນຢູ່ທີ່ນີ້:

1. ນໍາເຂົ້າໄຟລ໌ JS ອື່ນໆຈໍານວນຫນຶ່ງ.
2. ນໍາເຂົ້າ CSS (ດັ່ງນັ້ນ Webpack ຮູ້ວ່າຈະລວມພວກມັນຢູ່ໃນຊຸດ CSS ຂອງພວກເຮົາ).
3. ເປີດຕົວ connect() ເພື່ອສ້າງການເຊື່ອມຕໍ່ກັບເຄື່ອງແມ່ຂ່າຍແລະເລີ່ມຕົ້ນ downloadAssets() ເພື່ອດາວໂຫລດຮູບພາບທີ່ຈໍາເປັນເພື່ອສະແດງເກມ.
4. ຫຼັງ​ຈາກ​ສໍາ​ເລັດ​ຂັ້ນ​ຕອນ​ທີ 3​ ເມນູຫຼັກແມ່ນສະແດງ (playMenu).
5. ຕັ້ງຄ່າຕົວຈັດການການຄລິກປຸ່ມ “PLAY”. ເມື່ອກົດປຸ່ມ, ລະຫັດເລີ່ມຕົ້ນເກມແລະບອກເຄື່ອງແມ່ຂ່າຍວ່າພວກເຮົາພ້ອມທີ່ຈະຫຼິ້ນ.

"ຊີ້ນ" ຫຼັກຂອງເຫດຜົນຂອງເຄື່ອງແມ່ຂ່າຍລູກຄ້າຂອງພວກເຮົາແມ່ນຢູ່ໃນໄຟລ໌ເຫຼົ່ານັ້ນທີ່ຖືກນໍາເຂົ້າໂດຍໄຟລ໌ index.js. ໃນປັດຈຸບັນພວກເຮົາຈະເບິ່ງພວກເຂົາທັງຫມົດໃນຄໍາສັ່ງ.

4. ການແລກປ່ຽນຂໍ້ມູນລູກຄ້າ

ໃນເກມນີ້ພວກເຮົາໃຊ້ຫ້ອງສະຫມຸດທີ່ມີຊື່ສຽງເພື່ອຕິດຕໍ່ສື່ສານກັບເຄື່ອງແມ່ຂ່າຍ socket.io. Socket.io ມີການສະຫນັບສະຫນູນໃນຕົວ WebSockets, ທີ່ເຫມາະສົມສໍາລັບການສື່ສານສອງທາງ: ພວກເຮົາສາມາດສົ່ງຂໍ້ຄວາມໄປຫາເຄື່ອງແມ່ຂ່າຍ и ເຊີບເວີສາມາດສົ່ງຂໍ້ຄວາມຫາພວກເຮົາຜ່ານການເຊື່ອມຕໍ່ດຽວກັນ.

ພວກເຮົາຈະມີໄຟລ໌ຫນຶ່ງ src/client/networking.jsຜູ້ທີ່ຈະດູແລ ທຸກຄົນ ການ​ສື່​ສານ​ກັບ​ເຄື່ອງ​ແມ່​ຂ່າຍ​:

networking.js

import io from 'socket.io-client';
import { processGameUpdate } from './state';

const Constants = require('../shared/constants');

const socket = io(`ws://${window.location.host}`);
const connectedPromise = new Promise(resolve => {
  socket.on('connect', () => {
    console.log('Connected to server!');
    resolve();
  });
});

export const connect = onGameOver => (
  connectedPromise.then(() => {
    // Register callbacks
    socket.on(Constants.MSG_TYPES.GAME_UPDATE, processGameUpdate);
    socket.on(Constants.MSG_TYPES.GAME_OVER, onGameOver);
  })
);

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

export const updateDirection = dir => {
  socket.emit(Constants.MSG_TYPES.INPUT, dir);
};

ລະຫັດນີ້ຍັງຖືກຫຍໍ້ເລັກນ້ອຍເພື່ອຄວາມຊັດເຈນ.

ມີສາມສິ່ງຕົ້ນຕໍທີ່ເກີດຂຶ້ນໃນໄຟລ໌ນີ້:

• ພວກເຮົາກໍາລັງພະຍາຍາມເຊື່ອມຕໍ່ກັບເຄື່ອງແມ່ຂ່າຍ. connectedPromise ອະນຸຍາດພຽງແຕ່ເມື່ອພວກເຮົາສ້າງການເຊື່ອມຕໍ່.
• ຖ້າການເຊື່ອມຕໍ່ປະສົບຜົນສໍາເລັດ, ພວກເຮົາລົງທະບຽນຟັງຊັນການໂທຄືນ (processGameUpdate() и onGameOver()) ສໍາລັບຂໍ້ຄວາມທີ່ພວກເຮົາອາດຈະໄດ້ຮັບຈາກເຄື່ອງແມ່ຂ່າຍ.
• ພວກເຮົາສົ່ງອອກ play() и updateDirection()ເພື່ອໃຫ້ໄຟລ໌ອື່ນໆສາມາດນໍາໃຊ້ໄດ້.

5. ການສະແດງລູກຄ້າ

ມັນເຖິງເວລາທີ່ຈະສະແດງຮູບພາບໃນຫນ້າຈໍ!

...ແຕ່​ກ່ອນ​ທີ່​ພວກ​ເຮົາ​ຈະ​ສາ​ມາດ​ເຮັດ​ໄດ້, ພວກ​ເຮົາ​ຈໍາ​ເປັນ​ຕ້ອງ​ໄດ້​ດາວ​ນ​໌​ໂຫລດ​ຮູບ​ພາບ​ທັງ​ຫມົດ (ແຫຼ່ງ​ຂໍ້​ມູນ​) ທີ່​ຈໍາ​ເປັນ​ສໍາ​ລັບ​ການ​ນີ້​. ມາຂຽນຕົວຈັດການຊັບພະຍາກອນ:

ຊັບສິນ.js

const ASSET_NAMES = ['ship.svg', 'bullet.svg'];

const assets = {};
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];

ການຈັດການຊັບພະຍາກອນບໍ່ແມ່ນເລື່ອງຍາກທີ່ຈະປະຕິບັດ! ຈຸດຕົ້ນຕໍແມ່ນການເກັບຮັກສາວັດຖຸ assets, ເຊິ່ງຈະຜູກມັດລະຫັດຊື່ໄຟລ໌ກັບຄ່າວັດຖຸ Image. ເມື່ອຊັບພະຍາກອນຖືກໂຫລດ, ພວກເຮົາບັນທຶກມັນໄວ້ໃນວັດຖຸ assets ສໍາລັບການໄດ້ຮັບດ່ວນໃນອະນາຄົດ. ເມື່ອໃດທີ່ຈະດາວໂຫລດຊັບພະຍາກອນຂອງແຕ່ລະບຸກຄົນຈະຖືກອະນຸຍາດໃຫ້ (ນັ້ນແມ່ນ, ຈະດາວໂຫລດ ທັງ​ຫມົດ ຊັບພະຍາກອນ), ພວກເຮົາອະນຸຍາດໃຫ້ downloadPromise.

ຫຼັງ​ຈາກ​ການ​ດາວ​ໂຫຼດ​ຊັບ​ພະ​ຍາ​ກອນ​, ທ່ານ​ສາ​ມາດ​ເລີ່ມ​ຕົ້ນ​ການ​ເຮັດ​ໃຫ້​. ດັ່ງທີ່ໄດ້ກ່າວກ່ອນຫນ້ານີ້, ເພື່ອແຕ້ມຢູ່ໃນຫນ້າເວັບທີ່ພວກເຮົາໃຊ້ HTML5 Canvas (<canvas>). ເກມຂອງພວກເຮົາແມ່ນຂ້ອນຂ້າງງ່າຍດາຍ, ສະນັ້ນພວກເຮົາພຽງແຕ່ຕ້ອງການໃຫ້ດັ່ງຕໍ່ໄປນີ້:

1. ຄວາມເປັນມາ
2. ເຮືອຜູ້ນ
3. ຜູ້ນອື່ນໆໃນເກມ
4. ຫອຍ

ນີ້ແມ່ນພາກສ່ວນທີ່ສໍາຄັນ src/client/render.js, ເຊິ່ງແຕ້ມສີ່ຈຸດທີ່ລະບຸໄວ້ຂ້າງເທິງ:

render.js

import { getAsset } from './assets';
import { getCurrentState } from './state';

const Constants = require('../shared/constants');
const { PLAYER_RADIUS, PLAYER_MAX_HP, BULLET_RADIUS, MAP_SIZE } = Constants;

// Get the canvas graphics context
const canvas = document.getElementById('game-canvas');
const context = canvas.getContext('2d');

// Make the canvas fullscreen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function render() {
  const { me, others, bullets } = getCurrentState();
  if (!me) {
    return;
  }

  // Draw background
  renderBackground(me.x, me.y);

  // Draw all bullets
  bullets.forEach(renderBullet.bind(null, me));

  // Draw all players
  renderPlayer(me, me);
  others.forEach(renderPlayer.bind(null, me));
}

// ... Helper functions here excluded

let renderInterval = null;
export function startRendering() {
  renderInterval = setInterval(render, 1000 / 60);
}
export function stopRendering() {
  clearInterval(renderInterval);
}

ລະຫັດນີ້ຍັງຖືກຫຍໍ້ເພື່ອຄວາມຊັດເຈນ.

render() ແມ່ນຫນ້າທີ່ຕົ້ນຕໍຂອງໄຟລ໌ນີ້. startRendering() и stopRendering() ຄວບຄຸມການເປີດໃຊ້ງານຂອງວົງຈອນການສະແດງຢູ່ທີ່ 60 FPS.

ການປະຕິບັດສະເພາະຂອງຫນ້າທີ່ຜູ້ຊ່ວຍການສະແດງຜົນສ່ວນບຸກຄົນ (ຕົວຢ່າງ renderBullet()) ບໍ່ສໍາຄັນ, ແຕ່ນີ້ແມ່ນຕົວຢ່າງທີ່ງ່າຍດາຍຫນຶ່ງ:

render.js

function renderBullet(me, bullet) {
  const { x, y } = bullet;
  context.drawImage(
    getAsset('bullet.svg'),
    canvas.width / 2 + x - me.x - BULLET_RADIUS,
    canvas.height / 2 + y - me.y - BULLET_RADIUS,
    BULLET_RADIUS * 2,
    BULLET_RADIUS * 2,
  );
}

ໃຫ້ສັງເກດວ່າພວກເຮົາກໍາລັງໃຊ້ວິທີການ getAsset(), ເຊິ່ງໄດ້ເຫັນໃນເມື່ອກ່ອນ asset.js!

ຖ້າ​ຫາກ​ວ່າ​ທ່ານ​ມີ​ຄວາມ​ສົນ​ໃຈ​ໃນ​ການ​ສໍາ​ຫຼວດ​ຫນ້າ​ທີ່​ຜູ້​ຊ່ວຍ​ການ​ເຮັດ​ວຽກ​ອື່ນໆ​, ຫຼັງ​ຈາກ​ນັ້ນ​ອ່ານ​ສ່ວນ​ທີ່​ເຫຼືອ​ຂອງ​ src/client/render.js.

6. ການປ້ອນຂໍ້ມູນຂອງລູກຄ້າ

ມັນເປັນເວລາທີ່ຈະເຮັດໃຫ້ເກມ ຫຼິ້ນໄດ້! ໂຄງ​ການ​ຄວບ​ຄຸມ​ຈະ​ງ່າຍ​ດາຍ​ຫຼາຍ​: ການ​ປ່ຽນ​ແປງ​ທິດ​ທາງ​ຂອງ​ການ​ເຄື່ອນ​ໄຫວ​, ທ່ານ​ສາ​ມາດ​ໃຊ້​ຫນູ (ໃນ​ຄອມ​ພິວ​ເຕີ​) ຫຼື​ສໍາ​ພັດ​ຫນ້າ​ຈໍ (ໃນ​ອຸ​ປະ​ກອນ​ມື​ຖື​)​. ເພື່ອປະຕິບັດນີ້ພວກເຮົາຈະລົງທະບຽນ ຜູ້ຟັງເຫດການ ສໍາ​ລັບ​ເຫດ​ການ​ຫນູ​ແລະ​ສໍາ​ພັດ​.
ຈະດູແລທັງຫມົດນີ້ src/client/input.js:

input.js

import { updateDirection } from './networking';

function onMouseInput(e) {
  handleInput(e.clientX, e.clientY);
}

function onTouchInput(e) {
  const touch = e.touches[0];
  handleInput(touch.clientX, touch.clientY);
}

function handleInput(x, y) {
  const dir = Math.atan2(x - window.innerWidth / 2, window.innerHeight / 2 - y);
  updateDirection(dir);
}

export function startCapturingInput() {
  window.addEventListener('mousemove', onMouseInput);
  window.addEventListener('touchmove', onTouchInput);
}

export function stopCapturingInput() {
  window.removeEventListener('mousemove', onMouseInput);
  window.removeEventListener('touchmove', onTouchInput);
}

onMouseInput() и onTouchInput() ແມ່ນຜູ້ຟັງເຫດການທີ່ໂທຫາ updateDirection() (ຂອງ networking.js) ເມື່ອເຫດການປ້ອນຂໍ້ມູນເກີດຂຶ້ນ (ຕົວຢ່າງ, ເມື່ອເມົາສ໌ຖືກຍ້າຍ). updateDirection() ຈັດການກັບການແລກປ່ຽນຂໍ້ຄວາມກັບເຄື່ອງແມ່ຂ່າຍ, ເຊິ່ງປະມວນຜົນເຫດການປ້ອນຂໍ້ມູນແລະປັບປຸງສະຖານະເກມຕາມຄວາມເຫມາະສົມ.

7. ສະຖານະລູກຄ້າ

ພາກນີ້ແມ່ນມີຄວາມຫຍຸ້ງຍາກທີ່ສຸດໃນພາກທໍາອິດຂອງການຕອບ. ຢ່າທໍ້ຖອຍ ຖ້າບໍ່ເຂົ້າໃຈໃນຄັ້ງທຳອິດທີ່ອ່ານ! ທ່ານສາມາດຂ້າມມັນໄປ ແລະກັບມາຫາມັນໃນພາຍຫຼັງ.

ສິ້ນສຸດທ້າຍຂອງປິດສະຫນາທີ່ຈໍາເປັນເພື່ອເຮັດສໍາເລັດລະຫັດລູກຄ້າ - ເຄື່ອງແມ່ຂ່າຍແມ່ນ ລັດ. ຈື່ຈໍາຂໍ້ຫຍໍ້ຂອງລະຫັດຈາກພາກສ່ວນການໃຫ້ລູກຄ້າບໍ?

render.js

import { getCurrentState } from './state';

function render() {
  const { me, others, bullets } = getCurrentState();

  // Do the rendering
  // ...
}

getCurrentState() ຄວນຈະສາມາດໃຫ້ພວກເຮົາມີສະຖານະເກມໃນປະຈຸບັນຢູ່ໃນລູກຄ້າ ໄດ້ທຸກເວລາ ອີງຕາມການອັບເດດທີ່ໄດ້ຮັບຈາກເຊີບເວີ. ນີ້ແມ່ນຕົວຢ່າງຂອງການອັບເດດເກມທີ່ເຊີບເວີອາດຈະສົ່ງ:

{
  "t": 1555960373725,
  "me": {
    "x": 2213.8050880413657,
    "y": 1469.370893425012,
    "direction": 1.3082443894581433,
    "id": "AhzgAtklgo2FJvwWAADO",
    "hp": 100
  },
  "others": [],
  "bullets": [
    {
      "id": "RUJfJ8Y18n",
      "x": 2354.029197099604,
      "y": 1431.6848318262666
    },
    {
      "id": "ctg5rht5s",
      "x": 2260.546457727445,
      "y": 1456.8088728920968
    }
  ],
  "leaderboard": [
    {
      "username": "Player",
      "score": 3
    }
  ]
}

ການປັບປຸງແຕ່ລະເກມມີຫ້າຊ່ອງຂໍ້ມູນຄືກັນ:

• t: ເວລາເຊີບເວີທີ່ຊີ້ບອກວ່າການອັບເດດນີ້ຖືກສ້າງຂື້ນເມື່ອໃດ.
• me: ຂໍ້ມູນກ່ຽວກັບຜູ້ນໄດ້ຮັບການອັບເດດນີ້.
• ຄົນອື່ນ: array ຂອງຂໍ້ມູນກ່ຽວກັບຜູ້ນອື່ນໆທີ່ເຂົ້າຮ່ວມໃນເກມດຽວກັນ.
• ລູກປືນ: array ຂອງຂໍ້ມູນກ່ຽວກັບ projectiles ໃນເກມ.
• ກະດານ ນຳ: ຂໍ້ມູນກະດານຈັດອັນດັບປັດຈຸບັນ. ພວກເຮົາຈະບໍ່ເອົາພວກມັນເຂົ້າໄປໃນບັນຊີໃນຂໍ້ຄວາມນີ້.

7.1 ສະຖານະ naive ຂອງລູກຄ້າ

ການປະຕິບັດ Naive getCurrentState() ສາມາດສົ່ງຄືນຂໍ້ມູນໂດຍກົງຈາກການອັບເດດເກມທີ່ໄດ້ຮັບຫຼ້າສຸດ.

naive-state.js

let lastGameUpdate = null;

// Handle a newly received game update.
export function processGameUpdate(update) {
  lastGameUpdate = update;
}

export function getCurrentState() {
  return lastGameUpdate;
}

ງາມແລະຊັດເຈນ! ແຕ່ຖ້າຫາກວ່າພຽງແຕ່ມັນແມ່ນງ່າຍດາຍທີ່. ຫນຶ່ງໃນເຫດຜົນການປະຕິບັດນີ້ແມ່ນບັນຫາ: ມັນຈໍາກັດອັດຕາເຟຣມການສະແດງເຖິງຄວາມໄວໂມງເຊີຟເວີ.

ອັດຕາເຟຣມ: ຈໍານວນຂອງກອບ (i. e. ໂທ render()) ຕໍ່ວິນາທີ, ຫຼື FPS. ເກມປົກກະຕິແລ້ວພະຍາຍາມບັນລຸຢ່າງຫນ້ອຍ 60 FPS.

ອັດ​ຕາ​ການ​ຫມາຍ​ຕິກ​: ຄວາມຖີ່ທີ່ເຊີບເວີສົ່ງອັບເດດເກມໃຫ້ກັບລູກຄ້າ. ມັນມັກຈະຕ່ໍາກວ່າອັດຕາກອບ. ໃນເກມຂອງພວກເຮົາ, ເຄື່ອງແມ່ຂ່າຍແລ່ນຢູ່ທີ່ 30 ຫມາຍຕິກຕໍ່ວິນາທີ.

ຖ້າພວກເຮົາພຽງແຕ່ເຮັດການອັບເດດເກມຫລ້າສຸດ, FPS ທີ່ສໍາຄັນຈະບໍ່ສາມາດເກີນ 30 ເພາະວ່າ ພວກເຮົາບໍ່ເຄີຍໄດ້ຮັບການອັບເດດຫຼາຍກວ່າ 30 ເທື່ອຕໍ່ວິນາທີຈາກເຊີບເວີ. ເຖິງແມ່ນວ່າພວກເຮົາໂທຫາ render() 60 ເທື່ອຕໍ່ວິນາທີ, ຫຼັງຈາກນັ້ນເຄິ່ງຫນຶ່ງຂອງການໂທເຫຼົ່ານີ້ພຽງແຕ່ຈະເຮັດຊ້ໍາສິ່ງດຽວກັນ, ທີ່ສໍາຄັນບໍ່ເຮັດຫຍັງເລີຍ. ບັນຫາອີກປະການຫນຶ່ງທີ່ມີການປະຕິບັດ naive ແມ່ນວ່າມັນ ຂຶ້ນກັບຄວາມລ່າຊ້າ. ໃນຄວາມໄວອິນເຕີເນັດທີ່ເຫມາະສົມ, ລູກຄ້າຈະໄດ້ຮັບການອັບເດດເກມແນ່ນອນທຸກໆ 33 ms (30 ຕໍ່ວິນາທີ):

ແຕ່ຫນ້າເສຍດາຍ, ບໍ່ມີຫຍັງທີ່ສົມບູນແບບ. ຮູບ​ພາບ​ທີ່​ເປັນ​ຈິງ​ຫຼາຍ​ກວ່າ​ຈະ​ເປັນ​:

ການປະຕິບັດທີ່ໄຮ້ດຽງສາແມ່ນຂ້ອນຂ້າງເປັນກໍລະນີທີ່ຮ້າຍແຮງທີ່ສຸດໃນເວລາທີ່ມັນມາກັບ latency. ຖ້າໄດ້ຮັບການອັບເດດເກມດ້ວຍຄວາມລ່າຊ້າ 50ms, ຫຼັງຈາກນັ້ນ ລູກຄ້າຊ້າລົງ ໂດຍ 50ms ພິເສດເນື່ອງຈາກວ່າມັນຍັງສະແດງສະຖານະເກມຈາກການປັບປຸງທີ່ຜ່ານມາ. ທ່ານສາມາດຈິນຕະນາການວ່ານີ້ບໍ່ສະດວກສໍາລັບຜູ້ຫຼິ້ນ: ເນື່ອງຈາກການຊ້າລົງໂດຍຕົນເອງ, ເກມຈະເບິ່ງຄືວ່າ jerky ແລະບໍ່ຫມັ້ນຄົງ.

7.2 ປັບປຸງສະຖານະລູກຄ້າ

ພວກ​ເຮົາ​ຈະ​ເຮັດ​ໃຫ້​ການ​ປັບ​ປຸງ​ບາງ​ຢ່າງ​ໃນ​ການ​ປະ​ຕິ​ບັດ naive. ກ່ອນອື່ນ ໝົດ, ພວກເຮົາໃຊ້ ຄວາມລ່າຊ້າຂອງການສະແດງຜົນ ໂດຍ 100 ms. ນີ້ຫມາຍຄວາມວ່າສະຖານະ "ປະຈຸບັນ" ຂອງລູກຄ້າຈະຢູ່ 100ms ຫລັງສະຖານະເກມຢູ່ໃນເຄື່ອງແມ່ຂ່າຍ. ຕົວຢ່າງ, ຖ້າເວລາຂອງເຄື່ອງແມ່ຂ່າຍແມ່ນ 150, ຫຼັງຈາກນັ້ນລູກຄ້າຈະສະແດງສະຖານະທີ່ເຄື່ອງແມ່ຂ່າຍຢູ່ໃນເວລານັ້ນ 50:

ນີ້ເຮັດໃຫ້ພວກເຮົາມີ buffer 100ms ເພື່ອຄວາມຢູ່ລອດຂອງເວລາທີ່ບໍ່ສາມາດຄາດເດົາໄດ້ຂອງການອັບເດດເກມ:

ລາຄາສໍາລັບການນີ້ຈະຖາວອນ input lag ໂດຍ 100 ms. ນີ້ແມ່ນການເສຍສະລະເລັກນ້ອຍສໍາລັບການຫຼິ້ນເກມທີ່ລຽບງ່າຍ - ຜູ້ຫຼິ້ນສ່ວນໃຫຍ່ (ໂດຍສະເພາະຜູ້ຫຼິ້ນແບບສະບາຍໆ) ຈະບໍ່ສັງເກດເຫັນຄວາມລ່າຊ້ານີ້. ມັນງ່າຍຫຼາຍສຳລັບຄົນທີ່ຈະປັບປ່ຽນເປັນ 100ms latency ຄົງທີ່ກ່ວາການຫຼິ້ນກັບ latency ທີ່ບໍ່ສາມາດຄາດເດົາໄດ້.

ພວກເຮົາສາມາດນໍາໃຊ້ເຕັກນິກອື່ນທີ່ເອີ້ນວ່າ "ການ​ຄາດ​ຄະ​ເນ​ຂ້າງ​ລູກ​ຄ້າ​", ເຊິ່ງເຮັດວຽກໄດ້ດີໃນການຫຼຸດຜ່ອນຄວາມລ່າຊ້າທີ່ຮັບຮູ້ໄດ້, ແຕ່ຈະບໍ່ຖືກກ່າວເຖິງໃນໂພສນີ້.

ການປັບປຸງອີກອັນຫນຶ່ງທີ່ພວກເຮົາໃຊ້ແມ່ນ interpolation ເສັ້ນ. ເນື່ອງຈາກຄວາມຊັກຊ້າຂອງການສະແດງຜົນ, ພວກເຮົາມັກຈະມີຢ່າງຫນ້ອຍຫນຶ່ງການປັບປຸງກ່ອນເວລາປະຈຸບັນຢູ່ໃນລູກຄ້າ. ເມື່ອຖືກເອີ້ນ getCurrentState(), ພວກເຮົາສາມາດປະຕິບັດ interpolation ເສັ້ນ ລະຫວ່າງການອັບເດດເກມກ່ອນ ແລະຫຼັງເວລາປັດຈຸບັນຢູ່ໃນລູກຄ້າ:

ນີ້ແກ້ໄຂບັນຫາອັດຕາເຟຣມ: ຕອນນີ້ພວກເຮົາສາມາດສະແດງເຟຣມທີ່ເປັນເອກະລັກໃນອັດຕາເຟຣມທີ່ພວກເຮົາຕ້ອງການ!

7.3 ການປະຕິບັດລັດລູກຄ້າທີ່ປັບປຸງ

ຕົວຢ່າງການປະຕິບັດໃນ src/client/state.js ໃຊ້ທັງຄວາມລ່າຊ້າຂອງການສະແດງຜົນແລະການແຊກແຊງເສັ້ນ, ແຕ່ນີ້ບໍ່ໄດ້ດົນ. ໃຫ້ແຍກລະຫັດອອກເປັນສອງສ່ວນ. ນີ້ແມ່ນອັນທໍາອິດ:

state.js, ສ່ວນ 1

const RENDER_DELAY = 100;

const gameUpdates = [];
let gameStart = 0;
let firstServerTimestamp = 0;

export function initState() {
  gameStart = 0;
  firstServerTimestamp = 0;
}

export function processGameUpdate(update) {
  if (!firstServerTimestamp) {
    firstServerTimestamp = update.t;
    gameStart = Date.now();
  }
  gameUpdates.push(update);

  // Keep only one game update before the current server time
  const base = getBaseUpdate();
  if (base > 0) {
    gameUpdates.splice(0, base);
  }
}

function currentServerTime() {
  return firstServerTimestamp + (Date.now() - gameStart) - RENDER_DELAY;
}

// Returns the index of the base update, the first game update before
// current server time, or -1 if N/A.
function getBaseUpdate() {
  const serverTime = currentServerTime();
  for (let i = gameUpdates.length - 1; i >= 0; i--) {
    if (gameUpdates[i].t <= serverTime) {
      return i;
    }
  }
  return -1;
}

ສິ່ງທໍາອິດທີ່ທ່ານຈໍາເປັນຕ້ອງເຮັດແມ່ນຄິດອອກວ່າມັນເຮັດຫຍັງ currentServerTime(). ດັ່ງທີ່ພວກເຮົາໄດ້ເຫັນກ່ອນຫນ້ານັ້ນ, ທຸກໆການປັບປຸງເກມປະກອບມີເວລາຂອງເຄື່ອງແມ່ຂ່າຍ. ພວກເຮົາຕ້ອງການໃຊ້ render latency ເພື່ອ render ຮູບພາບ 100ms ຫລັງເຄື່ອງແມ່ຂ່າຍ, ແຕ່ ພວກເຮົາຈະບໍ່ຮູ້ເວລາປະຈຸບັນຢູ່ໃນເຊີບເວີ, ເພາະວ່າພວກເຮົາບໍ່ສາມາດຮູ້ວ່າມັນໃຊ້ເວລາດົນປານໃດສໍາລັບການອັບເດດໃດໆທີ່ຈະມາຮອດພວກເຮົາ. ອິນເຕີເນັດແມ່ນບໍ່ສາມາດຄາດເດົາໄດ້ແລະຄວາມໄວຂອງມັນສາມາດແຕກຕ່າງກັນຢ່າງຫຼວງຫຼາຍ!

ເພື່ອໃຫ້ໄດ້ຮັບປະມານບັນຫານີ້, ພວກເຮົາສາມາດນໍາໃຊ້ປະມານທີ່ສົມເຫດສົມຜົນ: ພວກເຮົາ ໃຫ້ສົມມຸດວ່າການປັບປຸງຄັ້ງທໍາອິດມາຮອດທັນທີ. ຖ້ານີ້ແມ່ນຄວາມຈິງ, ພວກເຮົາຈະຮູ້ເວລາເຊີຟເວີໃນຊ່ວງເວລານັ້ນ! ພວກເຮົາເກັບຮັກສາເວລາຂອງເຄື່ອງແມ່ຂ່າຍຢູ່ໃນ firstServerTimestamp ແລະຊ່ວຍປະຢັດຂອງພວກເຮົາ ທ້ອງຖິ່ນ (ລູກ​ຄ້າ​) timestamp ໃນ​ປັດ​ຈຸ​ບັນ​ດຽວ​ກັນ​ໃນ​ gameStart.

ໂອ້, ລໍຖ້ານາທີ. ບໍ່ຄວນມີເວລາຢູ່ໃນເຄື່ອງແມ່ຂ່າຍ = ເວລາຢູ່ໃນລູກຄ້າບໍ? ເປັນຫຍັງພວກເຮົາຈຶ່ງມີຄວາມແຕກຕ່າງກັນລະຫວ່າງ "ເວລາເຊີບເວີ" ແລະ "ເວລາລູກຄ້າ"? ນີ້ແມ່ນຄໍາຖາມທີ່ຍິ່ງໃຫຍ່! ມັນ turns ໃຫ້ ເຫັນ ວ່າ ເຫຼົ່າ ນີ້ ບໍ່ ແມ່ນ ສິ່ງ ດຽວ ກັນ . Date.now() ຈະສົ່ງຄືນການສະແຕມເວລາທີ່ແຕກຕ່າງກັນຢູ່ໃນລູກຄ້າແລະເຄື່ອງແມ່ຂ່າຍແລະນີ້ແມ່ນຂຶ້ນກັບປັດໃຈທ້ອງຖິ່ນຂອງເຄື່ອງຈັກເຫຼົ່ານີ້. ຢ່າສົມມຸດວ່າສະແຕມເວລາຈະຄືກັນໃນທຸກເຄື່ອງ.

ໃນປັດຈຸບັນພວກເຮົາເຂົ້າໃຈສິ່ງທີ່ມັນເຮັດ currentServerTime(): ມັນກັບຄືນມາ ເວລາເຊີບເວີຂອງເວລາການສະແດງຜົນປະຈຸບັນ. ໃນຄໍາສັບຕ່າງໆອື່ນໆ, ນີ້ແມ່ນເວລາຂອງເຄື່ອງແມ່ຂ່າຍໃນປະຈຸບັນ (firstServerTimestamp <+ (Date.now() - gameStart)) ລົບ​ການ​ລ່າ​ຊ້າ​ການ​ສະ​ແດງ (RENDER_DELAY).

ຕອນນີ້ໃຫ້ເບິ່ງວິທີທີ່ພວກເຮົາຈັດການກັບການອັບເດດເກມ. ເມື່ອໄດ້ຮັບການປັບປຸງຈາກເຄື່ອງແມ່ຂ່າຍ, ມັນຖືກເອີ້ນວ່າ processGameUpdate(), ແລະພວກເຮົາບັນທຶກການປັບປຸງໃຫມ່ໃສ່ array gameUpdates. ຫຼັງຈາກນັ້ນ, ເພື່ອກວດເບິ່ງການນໍາໃຊ້ຫນ່ວຍຄວາມຈໍາ, ພວກເຮົາເອົາການປັບປຸງເກົ່າທັງຫມົດອອກ ການປັບປຸງພື້ນຖານເພາະວ່າພວກເຮົາບໍ່ຕ້ອງການພວກມັນອີກຕໍ່ໄປ.

"ການປັບປຸງຫຼັກ" ແມ່ນຫຍັງ? ນີ້ ການປັບປຸງຄັ້ງທໍາອິດທີ່ພວກເຮົາພົບເຫັນໂດຍການຍ້າຍກັບຄືນໄປບ່ອນຈາກເວລາຂອງເຄື່ອງແມ່ຂ່າຍປະຈຸບັນ. ຈື່ແຜນວາດນີ້ບໍ?

ການອັບເດດເກມໂດຍກົງໄປທາງຊ້າຍຂອງ "ເວລາການໃຫ້ລູກຄ້າ" ແມ່ນການປັບປຸງພື້ນຖານ.

ການປັບປຸງພື້ນຖານທີ່ໃຊ້ສໍາລັບແມ່ນຫຍັງ? ເປັນ​ຫຍັງ​ພວກ​ເຮົາ​ສາ​ມາດ​ຫຼຸດ​ລົງ​ການ​ປັບ​ປຸງ​ໃນ​ຖານ​? ເພື່ອເຂົ້າໃຈເລື່ອງນີ້, ໃຫ້ຂອງ ສຸດທ້າຍ ໃຫ້ເຮົາເບິ່ງການຈັດຕັ້ງປະຕິບັດ getCurrentState():

state.js, ສ່ວນ 2

export function getCurrentState() {
  if (!firstServerTimestamp) {
    return {};
  }

  const base = getBaseUpdate();
  const serverTime = currentServerTime();

  // If base is the most recent update we have, use its state.
  // Else, interpolate between its state and the state of (base + 1).
  if (base < 0) {
    return gameUpdates[gameUpdates.length - 1];
  } else if (base === gameUpdates.length - 1) {
    return gameUpdates[base];
  } else {
    const baseUpdate = gameUpdates[base];
    const next = gameUpdates[base + 1];
    const r = (serverTime - baseUpdate.t) / (next.t - baseUpdate.t);
    return {
      me: interpolateObject(baseUpdate.me, next.me, r),
      others: interpolateObjectArray(baseUpdate.others, next.others, r),
      bullets: interpolateObjectArray(baseUpdate.bullets, next.bullets, r),
    };
  }
}

ພວກເຮົາຈັດການສາມກໍລະນີ:

1. base < 0 ຫມາຍຄວາມວ່າບໍ່ມີການປັບປຸງຈົນກ່ວາເວລາການສະແດງໃນປະຈຸບັນ (ເບິ່ງການປະຕິບັດຂ້າງເທິງ getBaseUpdate()). ນີ້ສາມາດເກີດຂຶ້ນໄດ້ທັນທີໃນຕອນເລີ່ມຕົ້ນຂອງເກມເນື່ອງຈາກການເຮັດໃຫ້ຊັກຊ້າ. ໃນກໍລະນີນີ້, ພວກເຮົາໃຊ້ການປັບປຸງຫຼ້າສຸດທີ່ໄດ້ຮັບ.
2. base ແມ່ນການປັບປຸງຫຼ້າສຸດທີ່ພວກເຮົາມີ. ອັນນີ້ອາດຈະເກີດຂຶ້ນເນື່ອງຈາກການຕອບສະໜອງຂອງເຄືອຂ່າຍ ຫຼືການເຊື່ອມຕໍ່ອິນເຕີເນັດບໍ່ດີ. ໃນກໍລະນີນີ້ເຊັ່ນດຽວກັນພວກເຮົາໃຊ້ການປັບປຸງຫລ້າສຸດທີ່ພວກເຮົາມີ.
3. ພວກ​ເຮົາ​ມີ​ການ​ປັບ​ປຸງ​ທັງ​ກ່ອນ​ແລະ​ຫຼັງ​ຈາກ​ທີ່​ໃຊ້​ເວ​ລາ render ໃນ​ປະ​ຈຸ​ບັນ​, ດັ່ງ​ນັ້ນ​ພວກ​ເຮົາ​ສາ​ມາດ​ເຮັດ​ໄດ້​ interpolate!

ທັງຫມົດທີ່ເຫລືອຢູ່ໃນ state.js ແມ່ນການຈັດຕັ້ງປະຕິບັດການເຊື່ອມສານເສັ້ນຊື່ທີ່ງ່າຍດາຍ (ແຕ່ໜ້າເບື່ອ) ຄະນິດສາດ. ຖ້າທ່ານຕ້ອງການສໍາຫຼວດມັນເອງ, ຫຼັງຈາກນັ້ນເປີດ state.js ສຸດ GitHub.

ສ່ວນທີ 2. ເຊີບເວີ Backend

ໃນສ່ວນນີ້ພວກເຮົາຈະເບິ່ງ backend Node.js ທີ່ຄວບຄຸມຂອງພວກເຮົາ ຕົວຢ່າງຂອງເກມ .io.

1. ຈຸດເຂົ້າຂອງເຊີບເວີ

ເພື່ອຈັດການເວັບເຊີບເວີພວກເຮົາຈະໃຊ້ກອບເວັບທີ່ນິຍົມສໍາລັບ Node.js ເອີ້ນວ່າ ສະແດງ. ມັນຈະຖືກຕັ້ງຄ່າໂດຍໄຟລ໌ຈຸດເຂົ້າເຄື່ອງແມ່ຂ່າຍຂອງພວກເຮົາ src/server/server.js:

server.js, ສ່ວນ 1

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackConfig = require('../../webpack.dev.js');

// Setup an Express server
const app = express();
app.use(express.static('public'));

if (process.env.NODE_ENV === 'development') {
  // Setup Webpack for development
  const compiler = webpack(webpackConfig);
  app.use(webpackDevMiddleware(compiler));
} else {
  // Static serve the dist/ folder in production
  app.use(express.static('dist'));
}

// Listen on port
const port = process.env.PORT || 3000;
const server = app.listen(port);
console.log(`Server listening on port ${port}`);

ຈື່ໄວ້ວ່າໃນສ່ວນທໍາອິດທີ່ພວກເຮົາໄດ້ສົນທະນາກ່ຽວກັບ Webpack? ນີ້ແມ່ນບ່ອນທີ່ພວກເຮົາຈະໃຊ້ການຕັ້ງຄ່າ Webpack ຂອງພວກເຮົາ. ພວກເຮົາຈະນໍາໃຊ້ພວກມັນໃນສອງວິທີ:

• ໃຊ້ webpack-dev-middleware ອັດຕະໂນມັດສ້າງຊຸດການພັດທະນາຂອງພວກເຮົາ, ຫຼື
• ໂອນຍ້າຍໂຟນເດີແບບຄົງທີ່ dist/, ທີ່ Webpack ຈະຂຽນໄຟລ໌ຂອງພວກເຮົາຫຼັງຈາກການກໍ່ສ້າງການຜະລິດ.

ວຽກງານທີ່ສໍາຄັນອີກອັນຫນຶ່ງ server.js ປະກອບດ້ວຍການຕັ້ງຄ່າເຄື່ອງແມ່ຂ່າຍ socket.ioເຊິ່ງພຽງແຕ່ເຊື່ອມຕໍ່ກັບເຄື່ອງແມ່ຂ່າຍ Express:

server.js, ສ່ວນ 2

const socketio = require('socket.io');
const Constants = require('../shared/constants');

// Setup Express
// ...
const server = app.listen(port);
console.log(`Server listening on port ${port}`);

// Setup socket.io
const io = socketio(server);

// Listen for socket.io connections
io.on('connection', socket => {
  console.log('Player connected!', socket.id);

  socket.on(Constants.MSG_TYPES.JOIN_GAME, joinGame);
  socket.on(Constants.MSG_TYPES.INPUT, handleInput);
  socket.on('disconnect', onDisconnect);
});

ຫຼັງຈາກສຳເລັດການສ້າງການເຊື່ອມຕໍ່ socket.io ກັບເຊີບເວີ, ພວກເຮົາກຳນົດຄ່າຕົວຈັດການເຫດການສຳລັບຊັອກເກັດໃໝ່. ຕົວຈັດການເຫດການປະມວນຜົນຂໍ້ຄວາມທີ່ໄດ້ຮັບຈາກລູກຄ້າໂດຍການມອບຫມາຍໃຫ້ວັດຖຸດຽວ game:

server.js, ສ່ວນ 3

const Game = require('./game');

// ...

// Setup the Game
const game = new Game();

function joinGame(username) {
  game.addPlayer(this, username);
}

function handleInput(dir) {
  game.handleInput(this, dir);
}

function onDisconnect() {
  game.removePlayer(this);
}

ພວກເຮົາກໍາລັງສ້າງເກມ .io, ດັ່ງນັ້ນພວກເຮົາຈະຕ້ອງການພຽງແຕ່ຫນຶ່ງສໍາເນົາ Game ("ເກມ") – ຜູ້ນ​ທັງ​ຫມົດ​ຫຼິ້ນ​ໃນ​ສະ​ຫນາມ​ກິ​ລາ​ດຽວ​ກັນ​! ໃນພາກຕໍ່ໄປພວກເຮົາຈະເບິ່ງວິທີການເຮັດວຽກຂອງຫ້ອງຮຽນນີ້ Game.

2. ເຊີບເວີເກມ

Класс Game ມີເຫດຜົນດ້ານເຊີບເວີທີ່ສໍາຄັນທີ່ສຸດ. ມັນ​ມີ​ສອງ​ຫນ້າ​ທີ່​ຕົ້ນ​ຕໍ​: ການ​ຄຸ້ມ​ຄອງ​ຜູ້ນ​ и ຈໍາ​ລອງ​ເກມ​.

ໃຫ້ເລີ່ມຕົ້ນດ້ວຍວຽກງານທໍາອິດ - ການຄຸ້ມຄອງຜູ້ນ.

game.js, ສ່ວນ 1

const Constants = require('../shared/constants');
const Player = require('./player');

class Game {
  constructor() {
    this.sockets = {};
    this.players = {};
    this.bullets = [];
    this.lastUpdateTime = Date.now();
    this.shouldSendUpdate = false;
    setInterval(this.update.bind(this), 1000 / 60);
  }

  addPlayer(socket, username) {
    this.sockets[socket.id] = socket;

    // Generate a position to start this player at.
    const x = Constants.MAP_SIZE * (0.25 + Math.random() * 0.5);
    const y = Constants.MAP_SIZE * (0.25 + Math.random() * 0.5);
    this.players[socket.id] = new Player(socket.id, username, x, y);
  }

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

  handleInput(socket, dir) {
    if (this.players[socket.id]) {
      this.players[socket.id].setDirection(dir);
    }
  }

  // ...
}

ໃນເກມນີ້ພວກເຮົາຈະກໍານົດຜູ້ນໂດຍພາກສະຫນາມ id socket.io ຂອງພວກເຂົາ (ຖ້າທ່ານສັບສົນ, ຫຼັງຈາກນັ້ນກັບຄືນໄປຫາ server.js). Socket.io ຕົວຂອງມັນເອງກໍານົດແຕ່ລະ socket ເປັນເອກະລັກ id, ດັ່ງນັ້ນພວກເຮົາບໍ່ຈໍາເປັນຕ້ອງກັງວົນກ່ຽວກັບມັນ. ຂ້ອຍຈະໂທຫາລາວ ID ຜູ້ຫຼິ້ນ.

ດ້ວຍວ່າຢູ່ໃນໃຈ, ໃຫ້ກວດເບິ່ງຕົວແປຕົວຢ່າງໃນຊັ້ນຮຽນ Game:

• sockets ແມ່ນວັດຖຸທີ່ຜູກ ID ຜູ້ນກັບ socket ທີ່ກ່ຽວຂ້ອງກັບຜູ້ນໄດ້. ມັນອະນຸຍາດໃຫ້ພວກເຮົາເຂົ້າເຖິງເຕົ້າຮັບໂດຍ ID ຜູ້ນຂອງເຂົາເຈົ້າໃນໄລຍະເວລາ.
• players ເປັນວັດຖຸທີ່ຜູກ ID ຜູ້ນກັບລະຫັດ> ວັດຖຸຜູ້ນ

bullets ເປັນ array ຂອງວັດຖຸ Bullet, ບໍ່ມີຄໍາສັ່ງສະເພາະ.
lastUpdateTime - ນີ້ແມ່ນເວລາຂອງການອັບເດດເກມຫຼ້າສຸດ. ພວກເຮົາຈະເບິ່ງວ່າມັນຖືກນໍາໃຊ້ແນວໃດໃນໄວໆນີ້.
shouldSendUpdate ເປັນຕົວແປເສີມ. ພວກເຮົາຍັງຈະເຫັນການນໍາໃຊ້ຂອງມັນໃນໄວໆນີ້.
ວິທີການ addPlayer(), removePlayer() и handleInput() ບໍ່ຈໍາເປັນຕ້ອງອະທິບາຍ, ພວກມັນຖືກນໍາໃຊ້ໃນ server.js. ຖ້າທ່ານຕ້ອງການການໂຫຼດຫນ້າຈໍຄືນ, ໃຫ້ກັບຄືນໄປບ່ອນສູງກວ່າເລັກນ້ອຍ.

ເສັ້ນສຸດທ້າຍ constructor() ເລີ່ມຕົ້ນ ຮອບ​ວຽນ​ການ​ປັບ​ປຸງ​ ເກມ (ໂດຍ​ມີ​ຄວາມ​ຖີ່​ຂອງ 60 ການ​ປັບ​ປຸງ / ວິ​)​:

game.js, ສ່ວນ 2

const Constants = require('../shared/constants');
const applyCollisions = require('./collisions');

class Game {
  // ...

  update() {
    // Calculate time elapsed
    const now = Date.now();
    const dt = (now - this.lastUpdateTime) / 1000;
    this.lastUpdateTime = now;

    // Update each bullet
    const bulletsToRemove = [];
    this.bullets.forEach(bullet => {
      if (bullet.update(dt)) {
        // Destroy this bullet
        bulletsToRemove.push(bullet);
      }
    });
    this.bullets = this.bullets.filter(
      bullet => !bulletsToRemove.includes(bullet),
    );

    // Update each player
    Object.keys(this.sockets).forEach(playerID => {
      const player = this.players[playerID];
      const newBullet = player.update(dt);
      if (newBullet) {
        this.bullets.push(newBullet);
      }
    });

    // Apply collisions, give players score for hitting bullets
    const destroyedBullets = applyCollisions(
      Object.values(this.players),
      this.bullets,
    );
    destroyedBullets.forEach(b => {
      if (this.players[b.parentID]) {
        this.players[b.parentID].onDealtDamage();
      }
    });
    this.bullets = this.bullets.filter(
      bullet => !destroyedBullets.includes(bullet),
    );

    // Check if any players are dead
    Object.keys(this.sockets).forEach(playerID => {
      const socket = this.sockets[playerID];
      const player = this.players[playerID];
      if (player.hp <= 0) {
        socket.emit(Constants.MSG_TYPES.GAME_OVER);
        this.removePlayer(socket);
      }
    });

    // Send a game update to each player every other time
    if (this.shouldSendUpdate) {
      const leaderboard = this.getLeaderboard();
      Object.keys(this.sockets).forEach(playerID => {
        const socket = this.sockets[playerID];
        const player = this.players[playerID];
        socket.emit(
          Constants.MSG_TYPES.GAME_UPDATE,
          this.createUpdate(player, leaderboard),
        );
      });
      this.shouldSendUpdate = false;
    } else {
      this.shouldSendUpdate = true;
    }
  }

  // ...
}

ວິທີການ update() ອາດຈະເປັນສ່ວນທີ່ສໍາຄັນທີ່ສຸດຂອງເຫດຜົນດ້ານເຊີຟເວີ. ຂໍໃຫ້ຈັດລາຍການທຸກຢ່າງທີ່ມັນເຮັດຕາມລໍາດັບ:

1. ຄິດໄລ່ວ່າເວລາໃດ dt ມັນ ເປັນ ມາ ຕັ້ງ ແຕ່ ສຸດ ທ້າຍ update().
2. ປັບປຸງແຕ່ລະ projectile ແລະທໍາລາຍພວກມັນຖ້າຈໍາເປັນ. ພວກເຮົາຈະເຫັນການປະຕິບັດຫນ້າທີ່ນີ້ຕໍ່ມາ. ສໍາລັບໃນປັດຈຸບັນມັນພຽງພໍສໍາລັບພວກເຮົາທີ່ຈະຮູ້ວ່າ bullet.update() ກັບຄືນ true, ຖ້າ projectile ຕ້ອງໄດ້ຮັບການທໍາລາຍ (ລາວອອກໄປນອກສະໜາມກິລາ).
3. ປັບປຸງຜູ້ນແຕ່ລະຄົນແລະສ້າງ projectile ຖ້າຈໍາເປັນ. ພວກເຮົາຍັງຈະເຫັນການປະຕິບັດນີ້ຕໍ່ມາ - player.update() ສາມາດສົ່ງຄືນວັດຖຸ Bullet.
4. ກວດ​ສອບ​ການ​ປະ​ທະ​ກັນ​ລະ​ຫວ່າງ projectiles ແລະ​ຜູ້ນ​ການ​ນໍາ​ໃຊ້​ applyCollisions(), ເຊິ່ງສົ່ງຄືນ array ຂອງ projectiles ທີ່ຕີຜູ້ນ. ສໍາລັບແຕ່ລະ projectile ກັບຄືນ, ພວກເຮົາເພີ່ມຄະແນນຂອງຜູ້ນຜູ້ທີ່ຍິງມັນ (ການນໍາໃຊ້ player.onDealtDamage()), ແລະຫຼັງຈາກນັ້ນເອົາ projectile ອອກຈາກ array ໄດ້ bullets.
5. ແຈ້ງ​ການ​ແລະ​ທໍາ​ລາຍ​ຜູ້ນ​ຕາຍ​ທັງ​ຫມົດ​.
6. ສົ່ງອັບເດດເກມໃຫ້ກັບຜູ້ຫຼິ້ນທັງໝົດ ທຸກໆວິນາທີ ເວລາເອີ້ນ update(). ຕົວແປເສີມທີ່ໄດ້ກ່າວມາຂ້າງເທິງຊ່ວຍໃຫ້ພວກເຮົາຕິດຕາມສິ່ງນີ້ shouldSendUpdate. ເປັນ update() ເອີ້ນວ່າ 60 ເທື່ອ/ວິນາທີ, ພວກເຮົາສົ່ງການອັບເດດເກມ 30 ເທື່ອ/ວິນາທີ. ດັ່ງນັ້ນ, ຄວາມຖີ່ໂມງ ເຊີບເວີແມ່ນ 30 ຮອບວຽນໂມງ/ວິນາທີ (ພວກເຮົາໄດ້ເວົ້າເຖິງຄວາມຖີ່ໂມງໃນພາກທຳອິດ).

ເປັນຫຍັງຕ້ອງສົ່ງອັບເດດເກມເທົ່ານັ້ນ ຜ່ານເວລາ ? ເພື່ອບັນທຶກຊ່ອງ. 30 ການປັບປຸງເກມຕໍ່ວິນາທີແມ່ນຫຼາຍ!

ເປັນຫຍັງຈຶ່ງບໍ່ພຽງແຕ່ໂທຫາຫຼັງຈາກນັ້ນ? update() 30 ເທື່ອຕໍ່ວິນາທີ? ເພື່ອປັບປຸງການຈໍາລອງເກມ. ຫຼາຍມັກຈະເອີ້ນວ່າ update(), ການຈໍາລອງເກມຈະຖືກຕ້ອງຫຼາຍຂຶ້ນ. ແຕ່ບໍ່ຖືກປະຕິບັດເກີນໄປໂດຍຈໍານວນຂອງສິ່ງທ້າທາຍ update(), ເນື່ອງຈາກວ່ານີ້ແມ່ນວຽກງານທີ່ມີລາຄາແພງໃນຄອມພິວເຕີ້ - 60 ຕໍ່ວິນາທີແມ່ນຂ້ອນຂ້າງພຽງພໍ.

ສ່ວນທີ່ເຫຼືອຂອງຫ້ອງຮຽນ Game ປະກອບດ້ວຍວິທີການຜູ້ຊ່ວຍທີ່ໃຊ້ໃນ update():

game.js, ສ່ວນ 3

class Game {
  // ...

  getLeaderboard() {
    return Object.values(this.players)
      .sort((p1, p2) => p2.score - p1.score)
      .slice(0, 5)
      .map(p => ({ username: p.username, score: Math.round(p.score) }));
  }

  createUpdate(player, leaderboard) {
    const nearbyPlayers = Object.values(this.players).filter(
      p => p !== player && p.distanceTo(player) <= Constants.MAP_SIZE / 2,
    );
    const nearbyBullets = this.bullets.filter(
      b => b.distanceTo(player) <= Constants.MAP_SIZE / 2,
    );

    return {
      t: Date.now(),
      me: player.serializeForUpdate(),
      others: nearbyPlayers.map(p => p.serializeForUpdate()),
      bullets: nearbyBullets.map(b => b.serializeForUpdate()),
      leaderboard,
    };
  }
}

getLeaderboard() ມັນງ່າຍດາຍຫຼາຍ - ມັນຈັດຮຽງຜູ້ນໂດຍຄະແນນ, ເອົາອັນດັບຫ້າ, ແລະສົ່ງຄືນຊື່ຜູ້ໃຊ້ແລະຄະແນນສໍາລັບແຕ່ລະຄົນ.

createUpdate() ໃຊ້ໃນ update() ເພື່ອສ້າງການປັບປຸງເກມທີ່ແຈກຢາຍໃຫ້ຜູ້ຫຼິ້ນ. ວຽກງານຕົ້ນຕໍຂອງມັນແມ່ນການໂທຫາວິທີການ serializeForUpdate(), ປະຕິບັດສໍາລັບຫ້ອງຮຽນ Player и Bullet. ໃຫ້ສັງເກດວ່າມັນພຽງແຕ່ສົ່ງຂໍ້ມູນໄປຫາຜູ້ນແຕ່ລະຄົນກ່ຽວກັບ ໃກ້ທີ່ສຸດ ຜູ້ນແລະ projectiles - ບໍ່ຈໍາເປັນຕ້ອງສົ່ງຂໍ້ມູນກ່ຽວກັບວັດຖຸເກມທີ່ຕັ້ງຢູ່ໄກຈາກຜູ້ນໄດ້!

3. ວັດຖຸເກມຢູ່ໃນເຄື່ອງແມ່ຂ່າຍ

ໃນ​ເກມ​ຂອງ​ພວກ​ເຮົາ​, projectiles ແລະ​ຜູ້ນ​ແມ່ນ​ຕົວ​ຈິງ​ແລ້ວ​ຄ້າຍ​ຄື​ກັນ​ຫຼາຍ​: ພວກ​ເຂົາ​ເຈົ້າ​ແມ່ນ​ບໍ່​ມີ​ຕົວ​ຕົນ​ຂອງ​ເກມ​ເຄື່ອນ​ຍ້າຍ​ຮອບ​. ເພື່ອໃຊ້ປະໂຫຍດຈາກຄວາມຄ້າຍຄືກັນນີ້ລະຫວ່າງເຄື່ອງຫຼິ້ນ ແລະລູກປືນ, ໃຫ້ເລີ່ມຕົ້ນດ້ວຍການປະຕິບັດຊັ້ນພື້ນຖານ Object:

object.js

class Object {
  constructor(id, x, y, dir, speed) {
    this.id = id;
    this.x = x;
    this.y = y;
    this.direction = dir;
    this.speed = speed;
  }

  update(dt) {
    this.x += dt * this.speed * Math.sin(this.direction);
    this.y -= dt * this.speed * Math.cos(this.direction);
  }

  distanceTo(object) {
    const dx = this.x - object.x;
    const dy = this.y - object.y;
    return Math.sqrt(dx * dx + dy * dy);
  }

  setDirection(dir) {
    this.direction = dir;
  }

  serializeForUpdate() {
    return {
      id: this.id,
      x: this.x,
      y: this.y,
    };
  }
}

ບໍ່ມີຫຍັງສັບສົນທີ່ຈະເກີດຂຶ້ນຢູ່ທີ່ນີ້. ຫ້ອງຮຽນນີ້ຈະເປັນຈຸດເລີ່ມຕົ້ນທີ່ດີສໍາລັບການຂະຫຍາຍ. ໃຫ້ເບິ່ງວິທີການຫ້ອງຮຽນ Bullet ການນໍາໃຊ້ Object:

bullet.js

const shortid = require('shortid');
const ObjectClass = require('./object');
const Constants = require('../shared/constants');

class Bullet extends ObjectClass {
  constructor(parentID, x, y, dir) {
    super(shortid(), x, y, dir, Constants.BULLET_SPEED);
    this.parentID = parentID;
  }

  // Returns true if the bullet should be destroyed
  update(dt) {
    super.update(dt);
    return this.x < 0 || this.x > Constants.MAP_SIZE || this.y < 0 || this.y > Constants.MAP_SIZE;
  }
}

Реализация Bullet ສັ້ນຫຼາຍ! ພວກເຮົາໄດ້ເພີ່ມໃສ່ Object ພຽງແຕ່ສ່ວນຂະຫຍາຍຕໍ່ໄປນີ້:

• ການນໍາໃຊ້ຊຸດ ສັ້ນ ສໍາລັບການຜະລິດແບບສຸ່ມ id ລູກສອນໄຟ.
• ກຳລັງເພີ່ມຊ່ອງຂໍ້ມູນ parentID, ດັ່ງນັ້ນທ່ານສາມາດຕິດຕາມຜູ້ນຜູ້ທີ່ສ້າງ projectile ນີ້.
• ການເພີ່ມມູນຄ່າກັບຄືນໄປຫາ update(), ເຊິ່ງເທົ່າກັບ true, ຖ້າ projectile ແມ່ນຢູ່ນອກສະຫນາມກິລາ (ຈື່ພວກເຮົາໄດ້ເວົ້າກ່ຽວກັບເລື່ອງນີ້ໃນພາກສຸດທ້າຍ?).

ຂໍໃຫ້ກ້າວໄປສູ່ Player:

player.js

const ObjectClass = require('./object');
const Bullet = require('./bullet');
const Constants = require('../shared/constants');

class Player extends ObjectClass {
  constructor(id, username, x, y) {
    super(id, x, y, Math.random() * 2 * Math.PI, Constants.PLAYER_SPEED);
    this.username = username;
    this.hp = Constants.PLAYER_MAX_HP;
    this.fireCooldown = 0;
    this.score = 0;
  }

  // Returns a newly created bullet, or null.
  update(dt) {
    super.update(dt);

    // Update score
    this.score += dt * Constants.SCORE_PER_SECOND;

    // Make sure the player stays in bounds
    this.x = Math.max(0, Math.min(Constants.MAP_SIZE, this.x));
    this.y = Math.max(0, Math.min(Constants.MAP_SIZE, this.y));

    // Fire a bullet, if needed
    this.fireCooldown -= dt;
    if (this.fireCooldown <= 0) {
      this.fireCooldown += Constants.PLAYER_FIRE_COOLDOWN;
      return new Bullet(this.id, this.x, this.y, this.direction);
    }
    return null;
  }

  takeBulletDamage() {
    this.hp -= Constants.BULLET_DAMAGE;
  }

  onDealtDamage() {
    this.score += Constants.SCORE_BULLET_HIT;
  }

  serializeForUpdate() {
    return {
      ...(super.serializeForUpdate()),
      direction: this.direction,
      hp: this.hp,
    };
  }
}

ຜູ້ນແມ່ນສະລັບສັບຊ້ອນຫຼາຍກ່ວາ projectiles, ສະນັ້ນຫ້ອງຮຽນນີ້ຄວນຈະເກັບຮັກສາຊ່ອງຂໍ້ມູນຈໍານວນຫນຶ່ງ. ວິທີການຂອງລາວ update() ເຮັດວຽກຫຼາຍຂຶ້ນ, ໂດຍສະເພາະການສົ່ງຄືນ projectile ທີ່ສ້າງຂຶ້ນໃຫມ່ຖ້າບໍ່ມີອັນໃດເຫຼືອໄວ້ fireCooldown (ຈື່ພວກເຮົາໄດ້ເວົ້າກ່ຽວກັບເລື່ອງນີ້ໃນພາກກ່ອນ?). ມັນຍັງຂະຫຍາຍວິທີການ serializeForUpdate(), ເນື່ອງຈາກວ່າພວກເຮົາຈໍາເປັນຕ້ອງໄດ້ລວມເອົາຊ່ອງຂໍ້ມູນເພີ່ມເຕີມສໍາລັບຜູ້ນໃນການອັບເດດເກມ.

ຄວາມພ້ອມຂອງຫ້ອງຮຽນພື້ນຖານ Object - ເປັນຂັ້ນຕອນທີ່ສໍາຄັນເພື່ອຫຼີກເວັ້ນການຊ້ໍາກັນລະຫັດ. ຕົວຢ່າງ, ໂດຍບໍ່ມີຫ້ອງຮຽນ Object ທຸກວັດຖຸເກມຕ້ອງມີການປະຕິບັດອັນດຽວກັນ distanceTo(), ແລະການຄັດລອກການຈັດຕັ້ງປະຕິບັດທັງຫມົດເຫຼົ່ານີ້ໃນທົ່ວຫຼາຍໄຟລ໌ຈະເປັນຝັນຮ້າຍ. ນີ້ກາຍເປັນສິ່ງສໍາຄັນໂດຍສະເພາະສໍາລັບໂຄງການຂະຫນາດໃຫຍ່, ໃນເວລາທີ່ຈໍານວນຂອງການຂະຫຍາຍຕົວ Object ຫ້ອງຮຽນກໍາລັງເຕີບໂຕ.

4. ການກວດຫາການປະທະກັນ

ສິ່ງດຽວທີ່ປ່ອຍໃຫ້ພວກເຮົາເຮັດແມ່ນຮັບຮູ້ເວລາທີ່ລູກປືນໄດ້ຕົກໃສ່ຜູ້ຫຼິ້ນ! ຈື່ຈໍາຂໍ້ຫຍໍ້ຂອງລະຫັດນີ້ຈາກວິທີການ update() ໃນຫ້ອງຮຽນ Game:

game.js

const applyCollisions = require('./collisions');

class Game {
  // ...

  update() {
    // ...

    // Apply collisions, give players score for hitting bullets
    const destroyedBullets = applyCollisions(
      Object.values(this.players),
      this.bullets,
    );
    destroyedBullets.forEach(b => {
      if (this.players[b.parentID]) {
        this.players[b.parentID].onDealtDamage();
      }
    });
    this.bullets = this.bullets.filter(
      bullet => !destroyedBullets.includes(bullet),
    );

    // ...
  }
}

ພວກເຮົາຈໍາເປັນຕ້ອງໄດ້ປະຕິບັດວິທີການ applyCollisions(), ເຊິ່ງສົ່ງຄືນ projectiles ທັງຫມົດທີ່ຕີຜູ້ນ. ໂຊກດີ, ນີ້ບໍ່ແມ່ນການຍາກທີ່ຈະເຮັດເພາະວ່າ

• ວັດຖຸທີ່ຕຳກັນທັງໝົດແມ່ນຮູບວົງມົນ, ແລະນີ້ແມ່ນຮູບຮ່າງທີ່ງ່າຍດາຍທີ່ສຸດເພື່ອປະຕິບັດການກວດຫາການປະທະກັນ.
• ພວກເຮົາມີວິທີການແລ້ວ distanceTo(), ເຊິ່ງພວກເຮົາໄດ້ປະຕິບັດຢູ່ໃນຫ້ອງຮຽນໃນພາກກ່ອນຫນ້າ Object.

ນີ້ແມ່ນສິ່ງທີ່ການປະຕິບັດການກວດພົບການປະທະກັນຂອງພວກເຮົາເບິ່ງຄືວ່າ:

collisions.js

const Constants = require('../shared/constants');

// Returns an array of bullets to be destroyed.
function applyCollisions(players, bullets) {
  const destroyedBullets = [];
  for (let i = 0; i < bullets.length; i++) {
    // Look for a player (who didn't create the bullet) to collide each bullet with.
    // As soon as we find one, break out of the loop to prevent double counting a bullet.
    for (let j = 0; j < players.length; j++) {
      const bullet = bullets[i];
      const player = players[j];
      if (
        bullet.parentID !== player.id &&
        player.distanceTo(bullet) <= Constants.PLAYER_RADIUS + Constants.BULLET_RADIUS
      ) {
        destroyedBullets.push(bullet);
        player.takeBulletDamage();
        break;
      }
    }
  }
  return destroyedBullets;
}

ການຊອກຄົ້ນຫາ collision ງ່າຍດາຍນີ້ແມ່ນອີງໃສ່ຄວາມຈິງທີ່ວ່າ ວົງມົນສອງອັນຂັດກັນຖ້າໄລຍະຫ່າງລະຫວ່າງຈຸດສູນກາງຂອງພວກມັນໜ້ອຍກວ່າຜົນລວມຂອງ radii. ນີ້ແມ່ນກໍລະນີທີ່ໄລຍະຫ່າງລະຫວ່າງສູນກາງຂອງສອງວົງແມ່ນເທົ່າກັບຜົນລວມຂອງ radii:

ໃນທີ່ນີ້ທ່ານຕ້ອງເອົາໃຈໃສ່ສອງດ້ານເພີ່ມເຕີມ:

• projectile ຈະຕ້ອງບໍ່ມົນຕີຜູ້ນຜູ້ທີ່ສ້າງມັນ. ນີ້ສາມາດບັນລຸໄດ້ໂດຍການປຽບທຽບ bullet.parentID с player.id.
• ລູກສອນໄຟຄວນຕີພຽງຄັ້ງດຽວໃນກໍລະນີທີ່ຮ້າຍແຮງຂອງການຕີຜູ້ຫຼິ້ນຫຼາຍຄົນໃນເວລາດຽວກັນ. ພວກເຮົາຈະແກ້ໄຂບັນຫານີ້ໂດຍໃຊ້ຕົວປະຕິບັດການ break: ເມື່ອພົບຜູ້ຫຼິ້ນທີ່ປະທະກັນກັບລູກສອນໄຟ, ພວກເຮົາຢຸດການຊອກຫາ ແລະກ້າວໄປສູ່ລູກສອນໄຟຕໍ່ໄປ.

ທີ່ສຸດ

ຫມົດ​ເທົ່າ​ນີ້! ພວກເຮົາໄດ້ກວມເອົາທຸກຢ່າງທີ່ເຈົ້າຕ້ອງການຮູ້ເພື່ອສ້າງເກມເວັບ .io. ຕໍ່ໄປແມ່ນຫຍັງ? ສ້າງເກມ .io ຂອງທ່ານເອງ!

ລະຫັດຕົວຢ່າງທັງໝົດແມ່ນແຫຼ່ງເປີດ ແລະ ປະກາດໃນ GitHub.

ແຫຼ່ງຂໍ້ມູນ: www.habr.com