20260420

这次能同步子弹了，碰撞检测血量啥的还有一些其他bug后续再完善。

我敢说这是我这辈子写过最烂最烂的代码，没有之一，看起来就像东拼西凑的，一点章法逻辑都没有，完全是想到啥写啥，目标只有一个：能跑就行。。

依旧展示代码进度：

RectangleMove.vue

<template>
  <div class="CanvasContainer">
    <canvas width="1000" height="800" ref="backgroundCanvas"></canvas>
  </div>
</template>

<script setup>
import axios from "axios"
import { onMounted, ref } from "vue"

const backgroundCanvas = ref(null)
let ctx = null
let ws = null
//我的名字
let myName = Date.now()
//玩家集合
const players = []
//子弹集合
const bullets = []
//按键字典
const keys = {
  w: false,
  a: false,
  s: false,
  d: false,
  mouseX: 0,
  mouseY: 0,
  mouseDown: false,
  mouseLatestDown: 0
}
//按下按键
function keyDown(e) {
  if (keys.hasOwnProperty(e.key)) {
    keys[e.key] = true
  }
}
//松开按键
function keyUp(e) {
  if (keys.hasOwnProperty(e.key)) {
    keys[e.key] = false
  }
}
//鼠标移动
function mouseMove(e) {
  keys.mouseX = e.clientX - backgroundCanvas.value.getBoundingClientRect().left;
  keys.mouseY = e.clientY - backgroundCanvas.value.getBoundingClientRect().top;
}
//鼠标按下
function mouseDown(e) {
  const ts = Date.now()
  if (ts - keys.mouseLatestDown >= 1000) {
    //新增子弹
    const me = players.find(player => player.name == myName)

    //计算方向
    const dx = keys.mouseX - me.x
    const dy = keys.mouseY - me.y
    const dist = Math.sqrt(dx * dx + dy * dy)
    const speed = 5

    //保证所有方向速度一致
    const vx = (dx / dist) * speed
    const vy = (dy / dist) * speed

    const bullet = new Bullet(me.x, me.y, 10, 10, "green", vx, vy, null, myName, Date.now())

    bullets.push(bullet)

    ws.send(JSON.stringify({ type: "bjoin", data: bullet }))

    keys.mouseDown = false
    keys.mouseLatestDown = Date.now()
  }

}
//画鼠标准心
function drawMouse() {
  const cx = keys.mouseX
  const cy = keys.mouseY
  const len = 8
  const gap = 3

  ctx.strokeStyle = '#fff'
  ctx.lineWidth = 2

  ctx.beginPath()
  ctx.moveTo(cx, cy - gap - len)
  ctx.lineTo(cx, cy - gap)
  ctx.moveTo(cx, cy + gap)
  ctx.lineTo(cx, cy + gap + len)

  ctx.moveTo(cx - gap - len, cy)
  ctx.lineTo(cx - gap, cy)
  ctx.moveTo(cx + gap, cy)
  ctx.lineTo(cx + gap + len, cy)
  ctx.stroke()
}

//更新位置
function updatedPosition() {
  //自己移动
  players.forEach(player => {
    if (player.name == myName) {
      if (keys.w || keys.a || keys.s || keys.d) {
        if (keys.w) player.y -= player.ySpeed
        if (keys.s) player.y += player.ySpeed
        if (keys.a) player.x -= player.xSpeed
        if (keys.d) player.x += player.xSpeed
        //发送自己新位置
        ws.send(JSON.stringify({ type: "pupdate", data: player }))
      }
    }
  })
  //子弹移动
  bullets.forEach((bullet, index) => {
    bullet.x += bullet.xSpeed
    bullet.y += bullet.ySpeed

    ws.send(JSON.stringify({ type: "bupdate", data: bullet }))

    if (bullet.x < 0 || bullet.x > backgroundCanvas.value.width || bullet.y < 0 || bullet.y > backgroundCanvas.value.height) {
      bullets.splice(index, 1)
      ws.send(JSON.stringify({ type: "bleave", data: bullet }))
      console.log(bullet.from + "已移除子弹")
    }

  })

}
//更新事件
function updateEvent() {

}
//画
function draw() {
  //清空画布
  ctx.clearRect(0, 0, backgroundCanvas.value.width, backgroundCanvas.value.height)

  players.forEach(player => {
    player.draw()
  })

  bullets.forEach(bullet => {
    bullet.draw()
  })
  drawMouse()
}
//动画
function animate() {
  updatedPosition()
  updateEvent()
  draw()
  requestAnimationFrame(animate)
}
//初始化
onMounted(() => {
  const canvas = backgroundCanvas.value
  ctx = canvas.getContext("2d")

  ws = new WebSocket("ws://192.168.174.97:5000")

  ws.onopen = () => {
    const player1 = new Player(0, 0, 60, 60, "red", 2, 2, myName)
    players.push(player1)
    ws.send(JSON.stringify({ type: "pjoin", data: player1 }))
    //绑定按键事件
    window.addEventListener('keydown', keyDown)
    window.addEventListener('keyup', keyUp)
    window.addEventListener('mousemove', mouseMove)
    window.addEventListener('mousedown', mouseDown)
    //启动
    animate()
  }

  ws.onmessage = (res) => {
    const response = JSON.parse(res.data)
    const data = response.data
    const type = response.type
    if (type == "pjoin" || type == "pupdate" || type == "pleave") {
      const player = new Player(data.x, data.y, data.width, data.height, data.color, data.xSpeed, data.ySpeed, data.name)
      if (type == "pjoin") {
        const index = players.findIndex(p => p.name == player.name)
        if (index != -1) {
          players[index] = player
        } else {
          players.push(player)
        }
      } else if (type == "pupdate") {
        const index = players.findIndex(p => p.name == player.name)
        if (index != -1) {
          players[index] = player
        } else {
          players.push(player)
        }
      }
    } else if (type == "bjoin" || type == "bupdate" || type == "bleave") {
      const bullet = new Bullet(data.x, data.y, data.width, data.height, data.color, data.xSpeed, data.ySpeed, data.angle, data.from, data.name)
      if (type == "bjoin") {
        if (!bullets.find(b => b.name == bullet.name)) {
          bullets.push(bullet)
        }
      } else if (type == "bupdate") {
        const index = bullets.findIndex(b => b.name == bullet.name)
        if (index != -1) {
          bullets[index] = bullet
        } else {
          bullets.push(bullet)
        }
      } else if (type == "bleave") {
        const index = bullets.findIndex(b => b.name == bullet.name)
        if (index != -1) {
          bullets.splice(index, 1)
        }
      }
    }
  }

})
//玩家类
class Player {
  constructor(x, y, width, height, color, xSpeed, ySpeed, name) {
    this.x = x
    this.y = y
    this.width = width
    this.height = height
    this.color = color
    this.xSpeed = xSpeed
    this.ySpeed = ySpeed
    this.name = name
  }

  draw() {
    ctx.fillStyle = this.color
    ctx.fillRect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height)
  }

}
//子弹类
class Bullet {
  constructor(x, y, width, height, color, xSpeed, ySpeed, angle, from, name) {
    this.x = x
    this.y = y
    this.width = width
    this.height = height
    this.color = color
    this.xSpeed = xSpeed
    this.ySpeed = ySpeed
    this.angle = angle
    this.from = from
    this.name = name
  }

  draw() {
    ctx.fillStyle = this.color
    ctx.fillRect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height)
  }
}
</script>

<style scoped>
.CanvasContainer {
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  align-items: center;
  justify-content: center;
}

canvas {
  background-color: #000333;
  border: red solid 2px;
  cursor: none;
}
</style>

app.js

const express = require('express');
const WebSocket = require('ws')
const cors = require('cors');
const app = express();

app.use(express.json());
app.use(cors());

const server = app.listen(5000, () => {
    console.log(`服务运行在 http://localhost:5000`);
});

const wss = new WebSocket.Server({server})

let clients = []
let players = []
let bullets = []

wss.on('connection', ws => {

    console.log("新玩家加入游戏")

    ws.on('message',res => {
        const response = JSON.parse(res);
        const data = response.data
        const type = response.type
        //判断类型后操作
        if(type == "pjoin"){
            //新添玩家
            clients.push({name:data.name, ws})
            players.push(data)
            //给所有老玩家同步新玩家
            wss.clients.forEach(client => {
                client.send(JSON.stringify({type: "pjoin", data: data}))
            })
            //给新玩家同步所有老玩家
            players.forEach(p => {
                ws.send(JSON.stringify({type: "pjoin", data: p}))
            })
        }else if(type == "pupdate"){
            //寻找需要更新位置的玩家
            const index = players.findIndex(p => p.name == data.name)
            if(index != -1) {
                //更新玩家
                players[index] = data
            }
            //广播给所有玩家位置
            wss.clients.forEach(client => {
                client.send(JSON.stringify({type: "pupdate", data: data}))
            })
        }else if(type == "pleave"){

        }else if(type == "bjoin"){
            bullets.push(data)
            wss.clients.forEach(client => {
                client.send(JSON.stringify({type: "bjoin", data: data}))
            })
        }else if(type == "bupdate"){
            const index = bullets.findIndex(b => b.name == data.name)
            if(index != -1) {
                bullets[index] = data
            }
            wss.clients.forEach(client => {
                client.send(JSON.stringify({type: "bupdate", data: data}))
            })
        }else if(type == "bleave"){
            const index = bullets.findIndex(b => b.name == data.name)
            if(index != -1) {
                bullets.splice(index, 1)
            }
            wss.clients.forEach(client => {
                client.send(JSON.stringify({type: "bleave", data: data}))
            })
        }
    })
})

感觉我总有一天会把这个重写一遍的，到时候我绝对要把大部分逻辑写在后端，前端只负责画画