Socket.io应用之联网拖拽游戏

服务器端代码:

const express=require(‘express‘);
const http=require(‘http‘);
const sio=require(‘socket.io‘);
const app=express();
const server=http.createServer(app);
app.use(express.static(__dirname));
app.get(‘/‘,function(req,res){
    res.sendFile(__dirname+"/drag.html");
});
//使用socket.io实现双向通信
const io=sio.listen(server);
io.on(‘connection‘,function(socket){
    //socket对象是指当前浏览器和服务器间连接的socket对象
    //每一个客户端连接都有自己的一个socket对象
    //在服务器端,相应客户端的move事件
    socket.on(‘move‘,function(data){
        //console.log(data);
        //向其他所有的客户端发送一个moveall事件,传递坐标数据
        socket.broadcast.emit(‘moveall‘,data);
    })
});
server.listen(3000,function(){
    console.log(‘listening inport 3000...‘)
})

客户端代码:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="socket.io.js"></script>
	<style type="text/css">
		#box {width:100px; height:100px; background:red;position:absolute;}
	</style>
</head>
<body>

	<div id="box">
	</div>
	<script type="text/javascript">
		//建立和服务器间的连接
		var socket=io.connect(‘http://localhost:3000‘);

		var box=document.getElementById(‘box‘);
		//定义全局变量
		var divX=0;//div的横坐标
		var divY=0;//div的纵坐标
		var mouseX=0;//鼠标 横坐标
		var mouseY=0;//鼠标纵坐标
		var sw=false;//表示开关
		//绑定mousedown事件,鼠标按下,获取到元素的坐标信息
		box.onmousedown=function(evt){
			var e=evt || window.event; //兼容ie和普通浏览器
			//获取div位置
			divX=this.offsetLeft;//获得不带单位的值
			divY=this.offsetTop;
			//获取鼠标位置
			mouseX= e.clientX;//e.pageX
			mouseY= e.clientY;//e.pageY
			//开启开关
			sw=true;
		};
		//绑定mousemove事件
		box.onmousemove=function(evt){
			var e=evt || window.event;
			//如果开关sw开启
			if(sw){
				//dis坐标变化值
				var disX= e.clientX-mouseX;
				var disY= e.clientY-mouseY;
				box.style.left=divX+disX+‘px‘;
				box.style.top=divY+disY+‘px‘;
			}
			//向服务器端发送move事件,同时将box的位置信息发送过去
			socket.emit(‘move‘,{
				x:box.offsetLeft,
				y:box.offsetTop
			});
		};
		//绑定mouseup事件
		document.onmouseup=function(){
				sw=false;
		}

		//注册moveall事件,以响应服务器端发送回来的moveall事件
		socket.on(‘moveall‘,function(data){
			//设置box坐标值即可
			box.style.left=data.x+"px";
			box.style.top=data.y+"px";

		});
	</script>
</body>
</html>

  实现了联网拖拽效果:

 

时间: 2024-11-07 03:57:45

Socket.io应用之联网拖拽游戏的相关文章

使用UGUI实现拖拽功能(拼图小游戏)

实现方式 1.引入UGUI自带的事件系统 UnityEngine.EventSystems 2.为我们的类添加接口 IBeginDragHandler, IDragHandler, IEndDragHandler 1 using UnityEngine; 2 using System.Collections; 3 using UnityEngine.EventSystems; 4 5 public class DragOnPic : MonoBehaviour,IBeginDragHandler

基于node.js+socket.io+html5实现的斗地主游戏(1)概述

一.游戏描述 说是斗地主游戏,其实是寝室自创的"捉双A",跟很多地方的捉红10.打红A差不多,大概规则是: 1.基础牌型和斗地主一样,但没有大小王,共52张牌,每人13张,这也是为什么题目直接叫斗地主游戏的原因了. 2.手牌有黑桃A和草花A的两个人一伙:若黑桃A和草花A都在一个人手里,那就自己一伙. 3.开牌之后可以选择亮A或者不亮A,亮A之后队友也应亮明身份,互相配合出牌. 4.随机指定最先出牌者. 5.按照手牌出完顺序记分数,分别记4.3.2.1分,最后整队加和,分数高的队伍获胜.

解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题

最近微信小游戏比较火,准备试着做一个Demo来玩一玩,网络通信这块就选择了socket.io,打包成微信工程,编译出现如下错误: 对于我这种菜逼(就目前的情况,自我感觉是挺菜的)来说,第一个想到的事情就是百度,百度不行,然后就谷歌,发现在cocos中文社区里面有很多人提到了这个问题,但是没有人回答,谷歌发现有大神重写了一套能够在微信小程序中使用的socket.io.emma..这些对于我来说,感觉太麻烦了,百度,谷歌无果,在回过头来仔细看看这个错误.提示io没有找到,竟然io没有找到,那我就给他

android五子棋游戏、资讯阅读、大学课程表、地图拖拽检测、小说搜索阅读app等源码

Android精选源码 Android 自动生成添加控件 android旋转动画.圆形进度条组合效果源码 一款很强的手机五子棋app源码 android地图拖拽区域检测效果源码 实现Android大学课表效果APP源码 android完全免费的小说搜索阅读app 一个互联网资讯阅读平台和良好的阅读体验的App Android优质博客 Android中高效的显示图片Bitmap的内存模型 相对于文字来说,图片的表达更直接.更有冲击力.更容易吸引用户的眼球.设计师们也理所当然的喜欢用图片来传达信息.

【原创】js实现一个可随意拖拽排序的菜单导航栏

1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换.未添加和已添加里面的小方块位置可以拖放. 3.结构分析.整体结构用红线框标出.可以分为三个部分.关注底部拖拽部分.一个div里面嵌套两个div.定位关系如图.本次教程之作一个拖拽框 1.好了,基本情况已经分析清楚先实现页面样式. <div class="wrap"> <

node.js之socket.io模块

socket.io模块是一个基于Node.js的项目,其作用主要是将WebSocket协议应用到所有的浏览器.该模块主要应用于实时的长连接多请求项目中,例如在线联网游戏.实时聊天.实时股票查看.二维码扫描登录等.——Node.js开发实战详解 安装和配置的方法和一般的NPM模块安装配置一致: # npm install soctet.io 应该是因为我的本地服务器是win7操作系统,所以在安装的时候会有一堆错误提示,但是貌似不影响使用socket.io模块,没有太在意这个.不知道在linux上是

[Java]接受拖拽文件的窗口

至于这个问题,Java的awt.dnd包下提供了许多完成这一功能的类 例如DropTarget.DropTargetListener等 先来讲一下DropTarget类,这个类完成和拖拽.复制文件等操作和Component的关联 常用的构造方法有这些: DropTarget(Component c, DropTargetListener dtl) c:要与它关联的组件 dtl:执行事件处理的DropTargetListener DropTarget(Component c, int ops, D

A1.xcode三种拖拽文件夹的方式

1.copy,是指文件不在项目的目录下面,例如项目在桌面上,文件在 Download 下,你 copy 就会被复制到项目里面.如果文件原本就在项目里面,则不执行任何操作.这里不管它,重点是 下面的单选框. 2.create  groups for any added folders 添加文件 将所有文件放在添加的目录下,实际文件目录结构忽略 访问时 直接文件名即可 黄色文件夹:编译后,资源文件在 mainBundle 中,源代码程序需要通过这种方式拖拽添加 需要注意不能出现重名的文件 效率高 拖

使用Node.js的socket.io模块开发实时web程序

首发:个人博客,更新&纠错&回复 今天的思维漫游如下:从.net的windows程序开发,摸到nodejs的桌面程序开发,又熟悉了一下nodejs,对“异步”的理解有了上上周对操作系统的学习而更能理解.然后发现了Node.js中的socket.io这个模块,又觉得跟前几天用.net做客户端的socket游戏了.技术世界,兜兜转转,相逢一笑,疑是故人. socket.io用来做实时web程序,解决之前的B/S程序只有无状态连接,特定需求还需要用长连接这种“奇技淫巧”的问题.当然,这是html