Question

嘿，我正在使用nodejs制作在线游戏。我试图这样做，当有人加入时，它运行Math.random，如果它小于0.5，它们是橙色的螃蟹，否则它们是红蟹。现在这种方式正常，除非有时你无法看到其他人的形象。我无法弄清楚为什么会发生这种情况。有人可以看看吗？我知道它很简单。这是我的代码：的index.html：

＆＃13;

//var mongojs = require("mongojs");
var db = null;//mongojs('localhost:27017/myGame', ['account','progress']);

var express = require('express');
var app = express();
var serv = require('http').Server(app);

app.get('/',function(req, res) {
	res.sendFile(__dirname + '/client/index.html');
});
app.use('/client',express.static(__dirname + '/client'));

serv.listen(process.env.PORT || 2000);
console.log("Server started.");

var SOCKET_LIST = {};

var Entity = function(param){
	var self = {
		x:250,
		y:250,
		spdX:0,
		spdY:0,
		id:"",
		map:'forest',
	}
	if(param){
		if(param.x)
			self.x = param.x;
		if(param.y)
			self.y = param.y;
		if(param.map)
			self.map = param.map;
		if(param.id)
			self.id = param.id;		
	}
	
	self.update = function(){
		self.updatePosition();
	}
	self.updatePosition = function(){
		self.x += self.spdX;
		self.y += self.spdY;
	}
	self.getDistance = function(pt){
		return Math.sqrt(Math.pow(self.x-pt.x,2) + Math.pow(self.y-pt.y,2));
	}
	return self;
}

var Player = function(param){
	var self = Entity(param);
	self.number = "" + Math.floor(10 * Math.random());
	self.pressingRight = false;
	self.pressingLeft = false;
	self.pressingUp = false;
	self.pressingDown = false;
	self.pressingAttack = false;
	self.mouseAngle = 0;
	self.maxSpd = 10;
	self.hp = 10;
	self.hpMax = 10;
	self.score = 0;
	self.team = Math.random();

	var super_update = self.update;
	self.update = function(){
		self.updateSpd();
		
		super_update();
		
		if(self.pressingAttack){
			self.shootBullet(self.mouseAngle);
		}
	}
	self.shootBullet = function(angle){
		Bullet({
			parent:self.id,
			angle:angle,
			x:self.x,
			y:self.y,
			map:self.map,
			team:self.team,
		});
	}
	
	self.updateSpd = function(){
		if(self.pressingRight)
			self.spdX = self.maxSpd;
		else if(self.pressingLeft)
			self.spdX = -self.maxSpd;
		else
			self.spdX = 0;
		
		if(self.pressingUp)
			self.spdY = -self.maxSpd;
		else if(self.pressingDown)
			self.spdY = self.maxSpd;
		else
			self.spdY = 0;		
	}
	
	self.getInitPack = function(){
		return {
			id:self.id,
			x:self.x,
			y:self.y,	
			number:self.number,	
			hp:self.hp,
			hpMax:self.hpMax,
			score:self.score,
			map:self.map,
			team:self.team,
		};		
	}
	self.getUpdatePack = function(){
		return {
			id:self.id,
			x:self.x,
			y:self.y,
			hp:self.hp,
			score:self.score,
			map:self.map,
			team:self.team,
		}	
	}
	
	Player.list[self.id] = self;
	
	initPack.player.push(self.getInitPack());
	return self;
}
Player.list = {};
Player.onConnect = function(socket){
	var map = 'forest';
	if(Math.random() < 0.5)
		map = 'field';
	var player = Player({
		id:socket.id,
		map:map,
	});
	socket.on('keyPress',function(data){
		if(data.inputId === 'left')
			player.pressingLeft = data.state;
		else if(data.inputId === 'right')
			player.pressingRight = data.state;
		else if(data.inputId === 'up')
			player.pressingUp = data.state;
		else if(data.inputId === 'down')
			player.pressingDown = data.state;
		else if(data.inputId === 'attack')
			player.pressingAttack = data.state;
		else if(data.inputId === 'mouseAngle')
			player.mouseAngle = data.state;
	});
	
	socket.on('changeMap',function(data){
		if(player.map === 'field')
			player.map = 'forest';
		else
			player.map = 'field';
	});
	
	socket.emit('init',{
		selfId:socket.id,
		player:Player.getAllInitPack(),
		bullet:Bullet.getAllInitPack(),
	})
}
Player.getAllInitPack = function(){
	var players = [];
	for(var i in Player.list)
		players.push(Player.list[i].getInitPack());
	return players;
}

Player.onDisconnect = function(socket){
	delete Player.list[socket.id];
	removePack.player.push(socket.id);
}
Player.update = function(){
	var pack = [];
	for(var i in Player.list){
		var player = Player.list[i];
		player.update();
		pack.push(player.getUpdatePack());		
	}
	return pack;
}


var Bullet = function(param){
	var self = Entity(param);
	self.id = Math.random();
	self.angle = param.angle;
	self.spdX = Math.cos(param.angle/180*Math.PI) * 10;
	self.spdY = Math.sin(param.angle/180*Math.PI) * 10;
	self.parent = param.parent;
	
	self.timer = 0;
	self.toRemove = false;
	var super_update = self.update;
	self.update = function(){
		if(self.timer++ > 100)
			self.toRemove = true;
		super_update();
		
		for(var i in Player.list){
			var p = Player.list[i];
			if(self.map === p.map && self.getDistance(p) < 32 && self.parent !== p.id){
				p.hp -= 1;
								
				if(p.hp <= 0){
					var shooter = Player.list[self.parent];
					if(shooter)
						shooter.score += 1;
					p.hp = p.hpMax;
					p.x = Math.random() * 500;
					p.y = Math.random() * 500;					
				}
				self.toRemove = true;
			}
		}
	}
	self.getInitPack = function(){
		return {
			id:self.id,
			x:self.x,
			y:self.y,
			map:self.map,
		};
	}
	self.getUpdatePack = function(){
		return {
			id:self.id,
			x:self.x,
			y:self.y,		
		};
	}
	
	Bullet.list[self.id] = self;
	initPack.bullet.push(self.getInitPack());
	return self;
}
Bullet.list = {};

Bullet.update = function(){
	var pack = [];
	for(var i in Bullet.list){
		var bullet = Bullet.list[i];
		bullet.update();
		if(bullet.toRemove){
			delete Bullet.list[i];
			removePack.bullet.push(bullet.id);
		} else
			pack.push(bullet.getUpdatePack());		
	}
	return pack;
}

Bullet.getAllInitPack = function(){
	var bullets = [];
	for(var i in Bullet.list)
		bullets.push(Bullet.list[i].getInitPack());
	return bullets;
}

var DEBUG = true;

var isValidPassword = function(data,cb){
	return cb(true);
	/*db.account.find({username:data.username,password:data.password},function(err,res){
		if(res.length > 0)
			cb(true);
		else
			cb(false);
	});*/
}
var isUsernameTaken = function(data,cb){
	return cb(false);
	/*db.account.find({username:data.username},function(err,res){
		if(res.length > 0)
			cb(true);
		else
			cb(false);
	});*/
}
var addUser = function(data,cb){
	return cb();
	/*db.account.insert({username:data.username,password:data.password},function(err){
		cb();
	});*/
}

var io = require('socket.io')(serv,{});
io.sockets.on('connection', function(socket){
	socket.id = Math.random();
	SOCKET_LIST[socket.id] = socket;
	
	socket.on('signIn',function(data){
		isValidPassword(data,function(res){
			if(res){
				Player.onConnect(socket);
				socket.emit('signInResponse',{success:true});
				var playerName = ("" + socket.id).slice(2,7);
				for(var i in SOCKET_LIST){
		SOCKET_LIST[i].emit('addToChat',playerName + ': connected.');
		}
			} else {
				socket.emit('signInResponse',{success:false});			
			}
		});
	});
	socket.on('signUp',function(data){
		isUsernameTaken(data,function(res){
			if(res){
				socket.emit('signUpResponse',{success:false});		
			} else {
				addUser(data,function(){
					socket.emit('signUpResponse',{success:true});					
				});
			}
		});		
	});
	
	
	socket.on('disconnect',function(){
		var playerName = ("" + socket.id).slice(2,7);
		delete SOCKET_LIST[socket.id];
		Player.onDisconnect(socket);
		for(var i in SOCKET_LIST){
		SOCKET_LIST[i].emit('addToChat',playerName + ': disconnected.');
		}
	});
	socket.on('sendMsgToServer',function(data){
		var playerName = ("" + socket.id).slice(2,7);
		for(var i in SOCKET_LIST){
			SOCKET_LIST[i].emit('addToChat',playerName + ': ' + data);
		}
	});
	
	socket.on('evalServer',function(data){
		if(!DEBUG)
			return;
		var res = eval(data);
		socket.emit('evalAnswer',res);		
	});
	
	
	
});

var initPack = {player:[],bullet:[]};
var removePack = {player:[],bullet:[]};


setInterval(function(){
	var pack = {
		player:Player.update(),
		bullet:Bullet.update(),
	}
	
	for(var i in SOCKET_LIST){
		var socket = SOCKET_LIST[i];
		socket.emit('init',initPack);
		socket.emit('update',pack);
		socket.emit('remove',removePack);
	}
	initPack.player = [];
	initPack.bullet = [];
	removePack.player = [];
	removePack.bullet = [];
	
},1000/25);

/*
var profiler = require('v8-profiler');
var fs = require('fs');
var startProfiling = function(duration){
	profiler.startProfiling('1', true);
	setTimeout(function(){
		var profile1 = profiler.stopProfiling('1');
		
		profile1.export(function(error, result) {
			fs.writeFile('./profile.cpuprofile', result);
			profile1.delete();
			console.log("Profile saved.");
		});
	},duration);	
}
startProfiling(10000);
*/

＆＃13;

<style>
</style>
<div id="signDiv">
<center>
	<div>
	Jimothy-Online Beta
	</div>
	Username: <input id="signDiv-username" type="text"></input><br>
	Password: <input id="signDiv-password" type="password"></input>
	<div>
	<button id="signDiv-signIn">Log in</button>
	<button id="signDiv-signUp">Register</button>
	</div>
	</center>
</div>

<div id="gameDiv" style="display:none;">
	<div id="game" style="position:absolute;width:800px;height:500px">
		<canvas id="ctx" width="500" height="500" style="position:absolute;border:1px solid #000000;"></canvas>
		<canvas id="ctx-ui" width="500" height="500" style="position:absolute;border:1px solid #000000;"></canvas>
		
		<div id="ui" style="position:absolute;width:500px;height:500px;">
			<button onclick="changeMap()" style="position:absolute;bottom:0px;left:0px">
				Change Map
			</button>
		
		</div>
		
	</div>
	
	<div id="belowGame" style="margin-top:520px">	
		<div id="chat-text" style="width:500px;height:100px;overflow-y:scroll">
			<div>Welcome to Jimothy-Online Beta!</div>
			<div>------------------------------------------</div>
		</div>

		<form id="chat-form">
			<input id="chat-input" type="text" style="width:500px"></input>
		</form>
	</div>
</div>

<!--<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>-->
<script src="/client/socket.js"></script>
<script>
	// 
	var WIDTH = 500;
	var HEIGHT = 500;
	var socket = io();
	
	//sign
	var signDiv = document.getElementById('signDiv');
	var signDivUsername = document.getElementById('signDiv-username');
	var signDivSignIn = document.getElementById('signDiv-signIn');
	var signDivSignUp = document.getElementById('signDiv-signUp');
	var signDivPassword = document.getElementById('signDiv-password');
	
	signDivSignIn.onclick = function(){
		socket.emit('signIn',{username:signDivUsername.value,password:signDivPassword.value});
	}
	signDivSignUp.onclick = function(){
		socket.emit('signUp',{username:signDivUsername.value,password:signDivPassword.value});
	}
	socket.on('signInResponse',function(data){
		if(data.success){
			signDiv.style.display = 'none';
			gameDiv.style.display = 'inline-block';
		} else
			alert("Sign in unsuccessful.");
	});
	socket.on('signUpResponse',function(data){
		if(data.success){
			alert("Sign up successful.");
		} else
			alert("Sign up unsuccessful.");
	});

	//chat
	var chatText = document.getElementById('chat-text');
	var chatInput = document.getElementById('chat-input');
	var chatForm = document.getElementById('chat-form');
	
	socket.on('addToChat',function(data){
		chatText.innerHTML += '<div>' + data + '</div>';
	});
	socket.on('evalAnswer',function(data){
		console.log(data);
	});
	
	
	chatForm.onsubmit = function(e){
		e.preventDefault();
		if(chatInput.value[0] === '/')
			socket.emit('evalServer',chatInput.value.slice(1));
		else
			socket.emit('sendMsgToServer',chatInput.value);
		chatInput.value = '';		
	}
	
	//UI
	var changeMap = function(){
		socket.emit('changeMap');
	}
	
	
	
	//game
	var Img = {};
	Img.player = new Image();
	Img.player.src = '/client/img/player.png';
	Img.bullet = new Image();
	Img.bullet.src = '/client/img/bullet.png';
	
	Img.map = {};
	Img.map['field'] = new Image();
	Img.map['field'].src = '/client/img/map.png';
	Img.map['forest'] = new Image();
	Img.map['forest'].src = '/client/img/map2.png';
	
	var ctx = document.getElementById("ctx").getContext("2d");
	var ctxUi = document.getElementById("ctx-ui").getContext("2d");
	ctxUi.font = '30px Arial';
	
	var Player = function(initPack){
		var self = {};
		self.id = initPack.id;
		self.number = initPack.number;
		self.x = initPack.x;
		self.y = initPack.y;
		self.hp = initPack.hp;
		self.hpMax = initPack.hpMax;
		self.score = initPack.score;
		self.map = initPack.map;
		self.team = initPack.team;
		
		self.draw = function(){	
			if(Player.list[selfId].map !== self.map)
				return;
			var x = self.x - Player.list[selfId].x + WIDTH/2;
			var y = self.y - Player.list[selfId].y + HEIGHT/2;
			
			var hpWidth = 30 * self.hp / self.hpMax;
			ctx.fillStyle = 'green';
			ctx.fillRect(x - hpWidth/2,y - 40,hpWidth,4);
			
			var width = 48;
			var height = 48;

			if(self.team < 0.5)
				Img.player.src = '/client/img/crabo.png';
			else
				Img.player.src = '/client/img/crabr.png';
			
			
			ctx.drawImage(Img.player,
				0,0,Img.player.width,Img.player.height,
				x-width/2,y-height/2,width,height);
			
			//ctx.fillText(self.score,self.x,self.y-60);
		}
		
		Player.list[self.id] = self;
		
		
		return self;
	}
	Player.list = {};

		
	var Bullet = function(initPack){
		var self = {};
		self.id = initPack.id;
		self.x = initPack.x;
		self.y = initPack.y;
		self.map = initPack.map;
		
		self.draw = function(){
			if(Player.list[selfId].map !== self.map)
				return;
			var width = Img.bullet.width/2;
			var height = Img.bullet.height/2;
			
			var x = self.x - Player.list[selfId].x + WIDTH/2;
			var y = self.y - Player.list[selfId].y + HEIGHT/2;
			
			ctx.drawImage(Img.bullet,
				0,0,Img.bullet.width,Img.bullet.height,
				x-width/2,y-height/2,width,height);
		}
		
		Bullet.list[self.id] = self;		
		return self;
	}
	Bullet.list = {};
	
	var selfId = null;

	socket.on('init',function(data){	
		if(data.selfId)
			selfId = data.selfId;
		//{ player : [{id:123,number:'1',x:0,y:0},{id:1,number:'2',x:0,y:0}], bullet: []}
		for(var i = 0 ; i < data.player.length; i++){
			new Player(data.player[i]);
		}
		for(var i = 0 ; i < data.bullet.length; i++){
			new Bullet(data.bullet[i]);
		}
	});
	
	socket.on('update',function(data){
		//{ player : [{id:123,x:0,y:0},{id:1,x:0,y:0}], bullet: []}
		for(var i = 0 ; i < data.player.length; i++){
			var pack = data.player[i];
			var p = Player.list[pack.id];
			if(p){
				if(pack.x !== undefined)
					p.x = pack.x;
				if(pack.y !== undefined)
					p.y = pack.y;
				if(pack.hp !== undefined)
					p.hp = pack.hp;
				if(pack.score !== undefined)
					p.score = pack.score;
				if(pack.map !== undefined)
					p.map = pack.map;
			}
		}
		for(var i = 0 ; i < data.bullet.length; i++){
			var pack = data.bullet[i];
			var b = Bullet.list[data.bullet[i].id];
			if(b){
				if(pack.x !== undefined)
					b.x = pack.x;
				if(pack.y !== undefined)
					b.y = pack.y;
			}
		}
	});
	
	socket.on('remove',function(data){
		//{player:[12323],bullet:[12323,123123]}
		for(var i = 0 ; i < data.player.length; i++){
			delete Player.list[data.player[i]];
		}
		for(var i = 0 ; i < data.bullet.length; i++){
			delete Bullet.list[data.bullet[i]];
		}
	});
	
	setInterval(function(){
		if(!selfId)
			return;
		ctx.clearRect(0,0,500,500);
		drawMap();
		drawScore();
		for(var i in Player.list)
			Player.list[i].draw();
		for(var i in Bullet.list)
			Bullet.list[i].draw();
	},40);
	
	var drawMap = function(){
		var player = Player.list[selfId];
		var x = WIDTH/2 - player.x;
		var y = HEIGHT/2 - player.y;
		ctx.drawImage(Img.map[player.map],x,y);
	}
	
	var drawScore = function(){
		if(lastScore === Player.list[selfId].score)
			return;
		lastScore = Player.list[selfId].score;
		ctxUi.fillStyle = 'white';
		ctxUi.fillText(Player.list[selfId].score,0,30);
	}
	var lastScore = null;
	
	document.onkeydown = function(event){
		if(event.keyCode === 68)	//d
			socket.emit('keyPress',{inputId:'right',state:true});
		else if(event.keyCode === 83)	//s
			socket.emit('keyPress',{inputId:'down',state:true});
		else if(event.keyCode === 65) //a
			socket.emit('keyPress',{inputId:'left',state:true});
		else if(event.keyCode === 87) // w
			socket.emit('keyPress',{inputId:'up',state:true});
			
	}
	document.onkeyup = function(event){
		if(event.keyCode === 68)	//d
			socket.emit('keyPress',{inputId:'right',state:false});
		else if(event.keyCode === 83)	//s
			socket.emit('keyPress',{inputId:'down',state:false});
		else if(event.keyCode === 65) //a
			socket.emit('keyPress',{inputId:'left',state:false});
		else if(event.keyCode === 87) // w
			socket.emit('keyPress',{inputId:'up',state:false});
	}
	
	document.onmousedown = function(event){
		socket.emit('keyPress',{inputId:'attack',state:true});
	}
	document.onmouseup = function(event){
		socket.emit('keyPress',{inputId:'attack',state:false});
	}
	document.onmousemove = function(event){
		var x = -250 + event.clientX - 8;
		var y = -250 + event.clientY - 8;
		var angle = Math.atan2(y,x) / Math.PI * 180;
		socket.emit('keyPress',{inputId:'mouseAngle',state:angle});
	}
	
</script>

＆＃13;

Nodejs分离玩家图像

0 个答案: