服务器端代码：

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>

　　实现了联网拖拽效果：

 

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

  1. 微信小游戏下socket.io的使用

    参考: 微信小游戏:socket.io 一 在微信小游戏 中使用socket.io报错 因为项目需求,后端要使用nodejs简单搭建一个服务器,通讯用json格式. 使用Egret提供的socket. ...

  2. canvas drag 实现拖拽拼图小游戏

    博主一直心心念念想做一个小游戏-  前端时间终于做了一个小游戏,直到现在才来总结,哈哈- 以后要勤奋点更新博客! 实现原理 1.如何切图? 用之前的方法就是使用photoshop将图片切成相应大小的图 ...

  3. 使用NGUI实现拖拽功能（拼图小游戏）

    上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...

  4. 使用UGUI实现拖拽功能（拼图小游戏）

    实现方式 1.引入UGUI自带的事件系统 UnityEngine.EventSystems 2.为我们的类添加接口 IBeginDragHandler, IDragHandler, IEndDragH ...

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

    一.游戏描述 说是斗地主游戏,其实是寝室自创的"捉双A",跟很多地方的捉红10.打红A差不多,大概规则是: 1.基础牌型和斗地主一样,但没有大小王,共52张牌,每人13张,这也是为 ...

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

    Android精选源码 Android 自动生成添加控件 android旋转动画.圆形进度条组合效果源码 一款很强的手机五子棋app源码 android地图拖拽区域检测效果源码 实现Android大学 ...

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

    1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...

  8. Node学习笔记（三）：基于socket.io web版你画我猜（二）

    上一篇基础实现的功能是客户端canvas作图,导出dataURL从而实现图片信息推送,下面具体讲下服务端的配置及客户端的配置同步 首先先画一个流程图,讲下大概思路 <canvas id=&quo ...

  9. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

随机推荐

  1. [扩展推荐] —— Laravel Log 增强

    Laravel Log Enhancer 是 Laravel 5.6  的一个扩展包,可以在 Laravel 日志中添加额外的数据. 得益于 Laravel 5.6 中日志的更新,这个包利用这些特性扩 ...

  2. 阿里云API网关（5）用户指南（调用 API）

    网关指南: https://help.aliyun.com/document_detail/29487.html?spm=5176.doc48835.6.550.23Oqbl 网关控制台: https ...

  3. webservice面试题

    webservice是什么? 1.基于WEB的服务,服务端整出一些资源让客户端应用访问(提供数据) 2.webservice是一个跨语言跨平台的规范(抽象) 3.是多个跨语言跨平台的应用间通信整合的方 ...

  4. 页面获取Web控件ID不能正常获取，它惹得祸

    今天碰到个比较奇葩的问题,因为动了一下目标框架,又原来的4.5.1改为3.5,然后又改回来了4.5.1,结果运行项目的时候发现界面js的计算,不能正常获值计算. 于是就开始找问题呗,先是发现这个二手项 ...

  5. Web微信

    一.源代码地址: https://github.com/HuangAm/Webweixin 二.总结: 1.分析Http请求 - 请求方式:get.post等等 - URL:每个请求的url,固定部分 ...

  6. I/O和管道

    一:I/O设备 I/O(Input/Output),即输入/输出,通常指数据在内部存储器和外部存储器或其他周边设备之间的输入和输出. 标准输入(STDIN):0 默认接受来自键盘的输入 标准输出(ST ...

  7. POJ-1062 昂贵的聘礼---Dijkstra+枚举上界

    题目链接: https://vjudge.net/problem/POJ-1062 题目大意: 中文题 思路: 1是终点,可以额外添加一个源点0,0到任意一节点的距离就是这个点的money,最终求的是 ...

  8. VueJs(2)---VueJs开发环境的搭建和讲解index.html如何被渲染

    VueJs开发环境的搭建和讲解初始框架 有关如何搭建vue.js框架我这看了一篇文章,自己也根据它进行搭建环境. 文章地址:vue.js2.0实战(1):搭建开发环境及构建项目 接下来对初始的框架进行 ...

  9. ubuntu12.04更新到14.04，win7误删BCD引导项，导致两个系统都无法进入

    解决办法: 制作老毛桃U盘启动盘,使用BCD编辑软件,对C/boot下的BCD文件进行编辑,添加win7引导向. 开机进入win7后,使用easyBCD添加ubuntu14.04启动项,选择grub2 ...

  10. js在光标处插入内容

    //场景一 简易的页面可以这样写var range = window.getSelection().getRangeAt(0);range.insertNode(document.createText ...