javascript - 游戏内子弹错误：未捕获类型错误：无法读取未定义的属性“长度”

问题描述

我真的很难为我正在为我的计算机科学课制作的多人游戏制作子弹。我正在使用socket.io，并且我正在将子弹数组从服务器发送到客户端，但是每当我尝试遍历我发送给客户端的数组时，它一直告诉我它是未定义的。有人对我有解决方案吗？提前致谢！我的代码如下：

game.js（客户端）：

var socket = io();
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var context = canvas.getContext('2d');

var movement = {
    up: false,
    down: false,
    left: false,
    right: false
};

var mouse = {
    mouseX: undefined,
    mouseY: undefined
};


document.addEventListener('keydown', function(event) {
    switch (event.keyCode) {
        case 65: // A
            movement.left = true;
            break;
        case 87: // W
            movement.up = true;
            break;
        case 68: // D
            movement.right = true;
            break;
        case 83: // S
            movement.down = true;
            break;
    }
});
document.addEventListener('keyup', function(event) {
    switch (event.keyCode) {
        case 65: // A
            movement.left = false;
            break;
        case 87: // W
            movement.up = false;
            break;
        case 68: // D
            movement.right = false;
            break;
        case 83: // S
            movement.down = false;
            break;
    }
});


document.addEventListener('click', function(event){
    mouse.mouseX = event.clientX;
    mouse.mouseY = event.clientY;
    socket.emit('mousePos', mouse);
});


socket.emit('new player');
setInterval(function() {
    socket.emit('movement', movement);
}, 1000 / 30);

socket.on('state', function(data) {
    var bullets = data.p;
    var players = data.b;
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (var id in players) {
        context.save();
        var player = players[id];
        var img = new Image();
        img.src = 'https://opengameart.org/sites/default/files/spaceship.pod_.1.green_.png';
        context.translate(player.x + player.width / 2, player.y + player.height / 2);
        context.rotate(player.rotation * Math.PI/180);
        context.drawImage(img, -player.width / 2, -player.height / 2, player.width, player.height);
        context.fill();
        context.restore();
    }
    for (var i=0; i<bullets.length; i++) {
        bullet = bullets[i];
        var bmg = new Image();
        bmg.src= 'https://s1.piq.land/2013/02/24/K22HRK2BcpIwVYDuzwgpicei_400x400.png';
        context.drawImage(bmg, bullet.x, bullet.y, bullet.width, bullet.height);
    }

});

server.js（服务器端）：

// Dependencies.
var express = require('express');
var http = require('http');
var path = require('path');
var socketIO = require('socket.io');

var app = express();
var server = http.Server(app);
var io = socketIO(server);

app.set('port', 5000);
app.use('/static', express.static(__dirname + '/static'));

// Routing
app.get('/', function(request, response) {
    response.sendFile(path.join(__dirname, 'index.html'));
});

server.listen(5000, function() {
    console.log('Starting server on port 5000');
});

var players = {};
var bullets = [];
function Bullet(x, y, angle){
    this.x = x;
    this.y = y;
    this.width = 40;
    this.height = 40;
    this.ang = angle;
    this.speed = 15;
}
io.on('connection', function(socket) {
    socket.on('new player', function() {
        players[socket.id] = {
            x: 300,
            y: 300,
            rotation: 0,
            width: 70,
            height: 70,
            speed: 15,
            health:100
        };
    });
    socket.on('disconnect', function(){
        delete players[socket.id];
    });
    socket.on('movement', function(data) {
        var player = players[socket.id] || {};
        if (data.left) {
            player.rotation-=2*Math.PI;
        }
        if (data.up) {
            player.x -= player.speed * Math.cos((player.rotation+90) * Math.PI / 180);
            player.y -= player.speed * Math.sin((player.rotation+90) * Math.PI / 180);
        }
        if (data.right) {
            player.rotation+=2*Math.PI;
        }
        if (data.down) {
            player.x += player.speed * Math.cos((player.rotation+90) * Math.PI / 180);
            player.y += player.speed * Math.sin((player.rotation+90) * Math.PI / 180);
        }

    });
    socket.on('mousePos', function (mouse) {
        bullets.push(new Bullet(players[socket.id].x, players[socket.id].y, players[socket.id].rotation));

    })
});

setInterval(function() {
    for (var i=0; i<bullets.length; i++) {
        bullet = bullets[i];
        bullet.x += bullet.speed * Math.cos((bullet.rotation+90) * Math.PI/180);
        bullet.x += bullet.speed * Math.sin((bullet.rotation+90) * Math.PI/180);
    }
    io.sockets.emit('state', {p:players, b:bullets});
}, 1000 / 30);

这是我在控制台中遇到的错误：

game.js:82 Uncaught TypeError: Cannot read property 'length' of undefined
    at r.<anonymous> (game.js:82)
    at r.emit (index.js:83)
    at r.onevent (index.js:83)
    at r.onpacket (index.js:83)
    at r.<anonymous> (index.js:83)
    at r.emit (index.js:83)
    at r.ondecoded (index.js:83)
    at a.<anonymous> (index.js:83)
    at a.r.emit (index.js:83)
    at a.add (index.js:83)

标签： javascriptnode.jsexpresssocket.io

javascript - 游戏内子弹错误：未捕获类型错误：无法读取未定义的属性“长度”

问题描述

解决方案

推荐阅读