服务器端代码：

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. c 存储类型

    1,c语言中的存储类型(定义变量和函数的可见范围和生命周期)这些说明符放置在它们所修饰的类型之前.下面列出 C 程序中可用的存储类: auto register static extern 2,aut ...

  2. Linux进程管理：后台启动进程和任务管理命令

    一.为什么要使程序在后台执行 我们的应用有时候要运行时间很长,如:几个小时甚至几个星期,我们可以让程序在后台一直跑. 让程序在后台运行的好处有: 终端关机不影响后台进程的运行.(不会终端一关机或者网络 ...

  3. 使用Spring Initializr创建项目

    Spring initializr 是Spring 官方提供的一个很好的工具,可以用来用来创建一个Spring boot 的项目.可以选择使用Maven管理或者使用Gradle管理,还可以选择使用的编 ...

  4. 实现一个网易云音乐的 BottomSheetDialog

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...

  5. Linux下安装jmeter

    一.用Xftp上传apache-jmeter-2.13.tgz到Linux系统里 二.解压apache-jmeter-2.13.tgz,tar xzfv apache-jmeter-2.13.tgz ...

  6. Android 6.0 以后webview不加载图片的问题

    /** * Webview在安卓5.0之前默认允许其加载混合网络协议内容 * 在安卓5.0之后,默认不允许加载http与https混合内容,需要设置webview允许其加载混合网络协议内容 */if ...

  7. Dictionary导致CPU暴涨

    中午吃完饭回来,刚想眯一会,突然发现公司预警群报警,某台机器CPU100%,连续三次报警,心里咯噔一下,我新开发的程序就在这上面,是不是我的程序导致的?立马远程,oh my god,果然是. 二话不说 ...

  8. linux添加硬盘分区挂载教程

    基本步骤:分区--格式化--挂载--写入文件 1.首先用fdisk -l命令查看添加的硬盘名称,可以看到sdb为新增的硬盘 [root@oracle ~]# fdisk -l Disk /dev/sd ...

  9. OpenGL 背面剔除

    在OpenGL种可使用glEnable(GL_CULL_FACE)开启背面剔除功能,即把那些我们看不见的面删除.但在剔除之前我们需要定义正面和背面,这个可以用法线来理解.在数学学科中,法线是用右手法则 ...

  10. java加密算法AES与RSA

    1.commons-codec使用 commons-codes 常用工具类:DigestUtils,Base64,Hex 1.1 md5 String text = "hello,md5&q ...