Я пытался сделать игру с простой физикой, в которой вы можете прыгать и видеть, как другие игроки используют node.js, socket.io и express.Тем не менее, я пытался запустить игровой цикл и не мог заставить его нарисовать его в браузере.Если вы можете помочь мне использовать этот формат или можете предложить другие более эффективные форматы для моего проекта, пожалуйста, сделайте это. Я не вижу, что не так с приведенным ниже кодом, спасибо!Также я довольно новичок в работе с node.js и socket.io, поэтому, пожалуйста, будьте осторожны.Спасибо!
game.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();
}
server.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);
}