gpt4 book ai didi

javascript - 简单的游戏循环 Socket.io + Node.js + Express

转载 作者:行者123 更新时间:2023-12-03 00:43:06 25 4
gpt4 key购买 nike

我试图制作一个具有简单物理原理的游戏,在其中你可以跳来跳去并看到其他玩家使用node.js、socket.io 和express。然而,我试图让游戏循环运行,但无法将其绘制到浏览器上。如果您可以帮助我使用这种格式,或者您可以为我的项目建议其他更有效的格式,请这样做。我不明白以下代码有什么问题,谢谢!另外,我对 node.js 和 socket.io 还很陌生,所以请保持温柔。谢谢!

游戏.js

var socket = io.connect('http://IPADRESS/');
var context, controller, rectangle, loop;
context = document.querySelector("canvas").getContext("2d");
canvsize = {
height:720,
width:1080
}
var fps = 60;
var FPS = 1000/fps;
var flooroffset = 64;
context.canvas.height = canvsize.height;
context.canvas.width = canvsize.width;
rectangle = {
height:64,
jumping:true,
width:64,
x:canvsize.width/2, // center of the canvas
x_velocity:0,
y:0,
y_velocity:0
};

controller = {

left:false,
right:false,
up:false,
keyListener:function(event) {

var key_state = (event.type == "keydown")?true:false;

switch(event.keyCode) {

case 37:// left key
controller.left = key_state;
break;
case 65: //or key a
controller.left = key_state;
break;
case 38:// space key
controller.up = key_state;
break;
case 32: // or up key
controller.up = key_state;
break;
case 39:// right key
controller.right = key_state;
break;
case 68:
controller.right = key_state;
break; // d key

}

}

};
window.addEventListener("keydown", controller.keyListener)
window.addEventListener("keyup", controller.keyListener);

setInterval(SendUpdate,FPS);
function SendUpdate(){
socket.emit("update",{Ctl: controller,Rectangle: rectangle, ID:socket.id})
}
socket.on("UPDATE",draw)
function draw(data){
context.fillStyle = "#202020";
context.fillRect(0, 0, canvsize.width, canvsize.height);// x, y, width, height
context.fillStyle = "#ff0000";
context.beginPath();
for(var i = 0; i<data.length; i++){
if (data[i].ID = socket.id){
rectangle = data;
}
context.rect(data[i].x, data[i].y, rectangle.width, rectangle.height);
}
context.fill();
context.strokeStyle = "#202830";
context.lineWidth = 4;
context.beginPath();
context.moveTo(0, canvsize.height-flooroffset);
context.lineTo(canvsize.width, canvsize.height-flooroffset);
context.stroke();
}

服务器.js

const hostname = 'IPADRESS';
var canvsize = {
width : 1080,
height : 720
}
var fps = 60;
var FPS = 1000/fps;
var flooroffset = 64;
var spd = 2;
var jumpForce = 50;
var grav = 1.5;
var friction = 0.9;
var Players = [];
var express = require('express');
var app = express();
var server = app.listen(80);
app.use(express.static('public'));
app.set('port', process.env.HOST || hostname);
var socket = require('socket.io');
var io = socket(server);
console.log("Server working @ " + hostname);
io.sockets.on('connect',newConnection);
function newConnection(socket){
Players[socket.id] = {
height:64,
jumping:true,
width:64,
x:canvsize.width/2, // center of the canvas
x_velocity:0,
y:0,
y_velocity:0
}
console.log("New Connection @ " + socket.id + "\nPlayers: " + Players[socket.id].x);
socket.on('disconnect',disConnect);
function disConnect(){
Players.splice(socket.id,1);
console.log(socket.id + " Has Disconnected \nPlayers: " + Players[socket.id].x);
}
socket.on("update",update);
function update(data){
var player = data;
if (player.Ctl.up && player.Rectangle.jumping == false) {

player.Rectangle.y_velocity -= jumpForce;
player.Rectangle.jumping = true;

}

if (player.Ctl.left) {

player.Rectangle.x_velocity -= spd;

}

if (player.Ctl.right) {

player.Rectangle.x_velocity += spd;

}

player.Rectangle.y_velocity += grav;// gravity
player.Rectangle.x += player.Rectangle.x_velocity;
player.Rectangle.y += player.Rectangle.y_velocity;
player.Rectangle.x_velocity *= friction;// friction
player.Rectangle.y_velocity *= friction;// friction

// if player.Rectangle is falling below floor line
if (player.Rectangle.y > canvsize.height - flooroffset - player.Rectangle.height) {

player.Rectangle.jumping = false;
player.Rectangle.y = canvsize.height - flooroffset - player.Rectangle.height;
player.Rectangle.y_velocity = 0;

}

// if player.Rectangle is going off the left of the screen
if (player.Rectangle.x < -player.Rectangle.width) {

player.Rectangle.x = canvsize.width;

} else if (player.Rectangle.x > canvsize.width) {// if player.Rectangle goes past right boundary

player.Rectangle.x = -player.Rectangle.width;
}
Players[data.ID] = {rectangle:player.Rectangle, ID:data.id};
}
}
setInterval(SEND,FPS);
function SEND(){
io.sockets.emit('UPDATE', Players);
}

最佳答案

您的服务器代码不正确,无法监听端口 80。我在 socket.io's doc 中找到了这段代码:

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
io.on('connection', () => { /* … */ });
server.listen(3000);

也有说法

Also make sure to call .listen on the server, not the app

关于javascript - 简单的游戏循环 Socket.io + Node.js + Express,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53358087/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com