贪吃蛇

app.js

+var express = require('express'); 
+var app = express();
+
+var server = require('http').createServer(app);
+var io = require('socket.io')(server);
+var num = 0
+var userdata = []
+var roomid = 1
+var alldata = []
+io.on('connection',function(socket){
+	socket.on('startPi',function(data){
+		var id = '房间'+roomid
+		if(userdata.length>0){
+		for(let i of userdata){
+			if(i.name==data.name){
+				console.log('名字重复')
+				return
+			}
+		}		
+				socket.join(id)
+				num++
+		        userdata.push(data)
+		       
+			
+		}else{
+			 socket.join(id)
+			num++
+		    userdata.push(data)
+		    
+		}
+		console.log(num)
+		if(num==2){
+			num = 0
+			roomid++
+			userdata.push(id)
+			io.sockets.in(id).emit('finshPi',userdata)
+			userdata = []
+			
+		}
+	})
+	socket.on('leftmove',function(data){
+		console.log(data)
+		io.sockets.in(data.roomid).emit('doleft',data)
+	})
+	socket.on('rightmove',function(data){
+		io.sockets.in(data.roomid).emit('doright',data)
+	})
+	socket.on('topmove',function(data){
+		io.sockets.in(data.roomid).emit('dotop',data)
+	})
+	socket.on('downmove',function(data){
+		io.sockets.in(data.roomid).emit('dodown',data)
+	})
+	socket.on('fire',function(data){
+		io.sockets.in(data.roomid).emit('dofire',data)
+	})
+	
+	
+	socket.on('join',function(data){
+		var bo = false
+		console.log(alldata)
+//		console.log(data)
+		for(var i=0;i<alldata.length;i++){
+//			console.log(alldata[i][])
+			if(alldata[i][0].name==data[0].name){
+				console.log('名字重复')
+				bo = true
+				alldata[i] = data				
+			}
+		}
+		
+		if(!bo){
+			alldata.push(data)			
+		}
+		
+//		socket.broadcast.emit('dojoin2',data)
+	    io.emit('dojoin',alldata)
+	    
+	})
+	
+	socket.on('dtop',function(data){
+//		console.log(data)
+		for(var i=0;i<alldata.length;i++){
+//			console.log(alldata[i][])
+			if(alldata[i][0].name==data.data[0].name){
+				
+				alldata[i] = data.data				
+			}
+		}
+		io.emit('dotop',{data:alldata,name:data.data[0].name,index:data.index})
+	})
+	
+	socket.on('dleft',function(data){
+//		console.log(data)
+		for(var i=0;i<alldata.length;i++){
+//			console.log(alldata[i][])
+			if(alldata[i][0].name==data.data[0].name){
+				
+				alldata[i] = data.data				
+			}
+		}
+		io.emit('doleft',{data:alldata,name:data.data[0].name,index:data.index})
+	})
+	
+	socket.on('dright',function(data){
+//		console.log(data)
+		for(var i=0;i<alldata.length;i++){
+//			console.log(alldata[i][])
+			if(alldata[i][0].name==data.data[0].name){
+				
+				alldata[i] = data.data				
+			}
+		}
+		io.emit('doright',{data:alldata,name:data.data[0].name,index:data.index})
+	})
+	
+	socket.on('ddown',function(data){
+//		console.log(data)
+		for(var i=0;i<alldata.length;i++){
+//			console.log(alldata[i][])
+			if(alldata[i][0].name==data.data[0].name){
+				
+				alldata[i] = data.data				
+			}
+		}
+		io.emit('dodown',{data:alldata,name:data.data[0].name,index:data.index})
+	})
+	
+	
+	socket.on('dirl',function(data){
+//		console.log(data)
+		for(var i=0;i<alldata.length;i++){
+//			console.log(alldata[i][])
+			if(alldata[i][0].name==data.data[0].name){
+				
+				alldata[i] = data.data				
+			}
+		}
+		io.emit('dodirl',{data:alldata,name:data.data[0].name})
+	})
+	
+	socket.on('dirr',function(data){
+//		console.log(data)
+		for(var i=0;i<alldata.length;i++){
+//			console.log(alldata[i][])
+			if(alldata[i][0].name==data.data[0].name){
+				
+				alldata[i] = data.data				
+			}
+		}
+		io.emit('dodirr',{data:alldata,name:data.data[0].name})
+	})
+	
+	socket.on('dird',function(data){
+//		console.log(data)
+		for(var i=0;i<alldata.length;i++){
+//			console.log(alldata[i][])
+			if(alldata[i][0].name==data.data[0].name){
+				
+				alldata[i] = data.data				
+			}
+		}
+		io.emit('dodird',{data:alldata,name:data.data[0].name})
+	})
+	
+	socket.on('dirt',function(data){
+//		console.log(data)
+		for(var i=0;i<alldata.length;i++){
+//			console.log(alldata[i][])
+			if(alldata[i][0].name==data.data[0].name){
+				
+				alldata[i] = data.data				
+			}
+		}
+		io.emit('dodirt',{data:alldata,name:data.data[0].name})
+	})
+	
+	
+	socket.on('recl',function(data){
+//		console.log(data)
+		for(var i=0;i<alldata.length;i++){
+//			console.log(alldata[i][])
+			if(alldata[i][0].name==data.data[0].name){
+				
+				alldata[i] = data.data				
+			}
+		}
+		io.emit('dorecl',{data:alldata,name:data.data[0].name})
+	})
+	
+	socket.on('recr',function(data){
+//		console.log(data)
+		for(var i=0;i<alldata.length;i++){
+//			console.log(alldata[i][])
+			if(alldata[i][0].name==data.data[0].name){
+				
+				alldata[i] = data.data				
+			}
+		}
+		io.emit('dorecr',{data:alldata,name:data.data[0].name})
+	})
+	socket.on('recd',function(data){
+//		console.log(data)
+		for(var i=0;i<alldata.length;i++){
+//			console.log(alldata[i][])
+			if(alldata[i][0].name==data.data[0].name){
+				
+				alldata[i] = data.data				
+			}
+		}
+		io.emit('dorecd',{data:alldata,name:data.data[0].name})
+	})
+	socket.on('rect',function(data){
+//		console.log(data)
+		for(var i=0;i<alldata.length;i++){
+//			console.log(alldata[i][])
+			if(alldata[i][0].name==data.data[0].name){
+				
+				alldata[i] = data.data				
+			}
+		}
+		io.emit('dorect',{data:alldata,name:data.data[0].name})
+	})
+	
+	
+	socket.on('recbody',function(data){
+//		console.log(data)
+		for(var i=0;i<alldata.length;i++){
+//			console.log(alldata[i][])
+			if(alldata[i][0].name==data.name){
+				
+				alldata.splice(i,i+1) 				
+			}
+		}
+		io.emit('dorecbody',{data:alldata,name:data.name})
+	})
+	
+	socket.on('recbian',function(data){
+//		console.log(data)
+		for(var i=0;i<alldata.length;i++){
+//			console.log(alldata[i][])
+			if(alldata[i][0].name==data.name){
+				
+				alldata.splice(i,i+1) 				
+			}
+		}
+		io.emit('dorecbian',{data:alldata,name:data.name})
+	})
+	
+	socket.on('sdan',function(){
+		io.emit('setdan',{x:4,y:4})
+	})
+	
+	
+	socket.on('dan',function(data){
+		console.log(data)
+		io.emit('dosetdan',data)
+	})
+})
+
+app.use(express.static('./snake'))
+
+
+
+
+server.listen(8080)

package.json

+{
+  "dependencies": {
+    "express": "^4.16.4",
+    "socket.io": "^2.1.1"
+  }
+}

preview.yml

+autoOpen: false # 打开工作空间时是否自动开启所有应用的预览
+apps:
+  - port: 8080 # 应用的端口
+    run: npm i --registry=https://registry.npmmirror.com && node app.js # 应用的启动命
+    command: # 使用此命令启动服务，且不执行run
+    root: ./ # 应用的启动目录
+    name: 贪吃蛇 # 应用名称
+    description: 贪吃蛇 # 应用描述
+    autoOpen: true # 打开工作空间时是否自动开启预览（优先级高于根级 autoOpen

snake/index.html

+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" >
+		<meta name="viewport" content="width=1920,initial-scale=1,user-scalable=no" />
+		<title></title>
+		<style>
+			html,body{
+				height: 100%;
+			}
+			body{
+				width: 100%;
+				height: 100%;
+				position: relative;
+				background-image: url(img/bg.jpg);
+				background-repeat: repeat-x;
+				background-size: 100% 100%;
+				overflow: hidden;
+				background-position:0 0 ;
+				margin: 0 auto;
+			}
+			*{
+				margin: 0;
+				padding: 0;
+			}
+			#score{
+				position: absolute;
+				width: 100%;
+				left: 0;
+				text-align: center;
+				z-index: 10000;
+				color: white;
+				height: 150px;
+				line-height: 150px;
+				font-size: 30px;
+			}
+			#game-over{
+				padding: 20px;
+				border: 2px dotted red;
+				position: absolute;
+				width: 30%;
+				margin-left: 35%;
+				margin-top: 100px;
+				display: none;
+			}
+			#game-over p{
+				text-align: center;
+				text-transform: uppercase;
+				height: 50px;
+				line-height: 50px;
+				font-size: 20px;
+				color: white;
+			}
+			#input{
+				position: absolute;
+				left: 0;
+				width: 100%;
+				bottom: 0;
+				top: 0;
+				background-color: rgba(7,1,27,0.7);
+				padding-top: 300px;
+				text-align: center;
+				z-index: 1000000;
+			}
+			#input input{
+				height: 40px;
+				width: 200px;
+				border-radius: 10px;
+			}
+		</style>
+	</head>
+	<body>
+	<div id="score">
+		当前分数(WASD控制方向):<span class="score">00</span>
+	</div>
+	<div id="game-over">
+		<P>game over</P>
+		<p></p>
+		<p onclick="window.location.reload()" style="transform: scaleY(50%);">重新开始游戏</p>
+	</div>
+	<div id="input">
+		<input type="text" autofocus="autofocus" placeholder="请输入用户名"/>
+	</div>
+	<img src="img/food.png" width="50" height="50" style="position: absolute;left: 0;top: 0;z-index: 1111111111;" id="dan"/>
+	<script src="/socket.io/socket.io.js"></script>
+	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
+	  <script>
+	  	var drawline = {
+	  		initScene:function(){
+	  			var h = window.innerHeight
+	  			var num = Math.ceil(h/50) 
+	  			for(var i=0;i<num;i++){
+	  				this.createHDom(i*50)
+	  			}	  			
+	  			var l = window.innerWidth
+	  			var num2 = Math.ceil(l/50)
+	  			for(var i=0;i<num2;i++){
+	  				this.createLDom(i*50)
+	  			}
+	  		},
+	  		createHDom:function(h){
+	  			var dom = document.createElement('div')
+	  			dom.style.position = 'absolute'
+	  			dom.style.width = '100%'
+	  			dom.style.borderTop = '1px solid darkgreen'
+	  			dom.style.top = h+'px'
+	  	        dom.style.zIndex = '100'
+	  			document.body.appendChild(dom)
+	  		},
+	  		createLDom:function(l){
+	  			var dom = document.createElement('div')
+	  			dom.style.position = 'absolute'
+	  			dom.style.height = window.innerHeight + 'px'
+	  			dom.style.borderLeft = '1px solid darkgreen'
+	  			dom.style.left = l+'px'
+	  			dom.style.zIndex = '100'
+	  			document.body.appendChild(dom)
+	  		},
+	  		
+	  	}
+//	  	drawline.initScene()
+	  	
+	  </script>
+	  <script src="gest.js"></script>
+	  <script src="snake.js"></script>
+	</body>
+</html>