注意修改：

法外狂徒张三是你球的名字

FWKTZS是每个球的唯一id

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易版球球大作战</title>
		<style>
			html,body{width: 100%;height: 100%;}
			*{margin: 0;padding: 0;}
			body{background-color: #000000;}
			.my-ball{
				width: 50px;
				height: 50px;
				background-color: #FFC0CB;
				border-radius: 50%;
				position: fixed;
				left: 0px;
				bottom: 0px;
			}
			.my-ball > h5{
				width: 300px;
				color: #fff;
				position: absolute;
				top: -20px;
				left: -10px;
			}
			#myBody{width: 100%;height: 100%;}
		</style>
	</head>
	<body>
		<!-- 其它球放在这个div里面 -->
		<div id="myBody"></div>
		<div class="my-ball" id="myBall">
			<h5>法外狂徒张三</h5>
		</div>
		<script type="text/javascript">
			//常用变量 //随机初始位置
			//随机0-1920 和 0-1080的随机数
			var ballX = Math.ceil(Math.random()*1920);//球的x坐标
			var ballY = Math.ceil(Math.random()*1080);;//球的y坐标
			//找到这个球
			var myBall = document.getElementById("myBall");
			//找到body
			var myBody = document.getElementById("myBody");
			
			//监听键盘事件
			document.onkeydown = function(event){
				//固定语法（获取事件）
				event = event || window.event;
				//获取键盘状态码
				var number = event.keyCode;
				//左上右下 37 38 39 40
				//WASD 87 65 83 68
				if(number == 37){
					ballX--;
				}else if(number == 38){
					ballY++;
				}else if(number == 39){
					ballX++;
				}else if(number == 40){
					ballY--;
				}
				//把值赋值给样式
				myBall.style.bottom = ballY + "px";
				myBall.style.left = ballX + "px";
			}
			
			
			//连接服务器 webscket
			const ws = new WebSocket("wss://www.shijiayi.top/ws/ChatServer/法外狂徒张三");
			//收到信息
			ws.onmessage = function(event){
				//字符串转对象
				var data = JSON.parse(event.data);
				if(data.code == 2){
					var otherBall = JSON.parse(data.msg);
					//console.log(data.sName+"的坐标信息",otherBall);
					var thisBall = document.getElementById(otherBall.id);
					//不要渲染自己
					if(thisBall == null && otherBall.id != "FWKTZS"){//页面上找不到这个id
						var ballHtml = '<div class="my-ball" style="background-color:'+otherBall.color+'" id="'+otherBall.id+'">'+
											'<h5>'+data.sName+'</h5>'+
									   '</div>';
						//把球添加到页面上
						myBody.innerHTML += ballHtml;
					}else if(otherBall.id != "FWKTZS"){//有这个id
						//渲染最新坐标
						thisBall.style.left = otherBall.x + "px";
						thisBall.style.bottom = otherBall.y + "px";
					}
				}
			}
			//定时给服务器发送自己的坐标
			//每500毫秒给服务器发送一次
			setInterval(function(){
				//json数据格式
				// id 英文（每个人的不能一样） 长度在10位以内
				var msg = {id:'FWKTZS',x:ballX,y:ballY,color:'#FFC0CB'};
				//坐标信息转换为字符串
				msg = JSON.stringify(msg);
				//发送坐标信息
				ws.send(msg);
			},1000);
			//提交给服务器的时间 慢一点！！！
		</script>
	</body>
</html>

 

最后修改于 2022-04-20 15:16:14
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
上一篇