服务器端代码：

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. angular4学习笔记整理（二）angular4的路由使用

    这章说一下angular的路由 先说angular路由怎么引入,一开始new出来的angular项目它路由帮你配好了,但看要看app.module.ts里面 1.首先最上面要引入路由模块 import ...

  2. 为什么java中用枚举实现单例模式会更好

    代码简洁 这是迄今为止最大的优点,如果你曾经在Java5之前写过单例模式代码,那么你会知道即使是使用双检锁你有时候也会返回不止一个实例对象.虽然这种问题通过改善java内存模型和使用volatile变 ...

  3. Angular 学习笔记 （路由外传 - RouteReuseStrategy）

    refer : https://github.com/angular/angular/issues/10929 https://stackoverflow.com/questions/41280471 ...

  4. angular2 学习笔记 ( Dynamic Component 动态组件)

    更新 2018-02-07 详细讲一下 TemplateRef 和 ViewContainerRef 的插入 refer : https://segmentfault.com/a/1190000008 ...

  5. gradle入门（1-6）将Java项目从maven迁移到gradle

    gradle项目与maven项目相互转化(转) 转自: http://www.cnblogs.com/yjmyzz/p/gradle-to-maven.html 一.maven项目->gradl ...

  6. zoj 3950 how many nines

    https://vjudge.net/problem/ZOJ-3950 题意: 给出两个日期,计算从第一个日期开始到第二个日期,每一天的日期中的9加起来一共有多少个. 思路: 看题解补的题.首先看这题 ...

  7. c语言文件中关于while(!feof(fp)) 循环多输出一次的问题

      文件中关于while(!feof(fp)) 循环多输出一次的问题   feof(fp)有两个返回值:如果遇到文件结束,函数feof(fp)的值为1,否则为0.   当读到文件末尾时,文件指针并没有 ...

  8. PageRank之基于C C#的基本实现

    重点不是说PageRank是什么,而是怎么用代码实现 什么是PageRank? PageRank,网页排名,又称网页级别.Google左侧排名或佩奇排名,是一种由[1]  根据网页之间相互的超链接计算 ...

  9. datatables

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  10. Hadoop学习笔记（七）：初识spark

    1. spark的安装: a). 首先复制一台虚拟机出来(复制任意一台master和slave即可),然后将其ip修改为192.168.XX.200,并将其hostname更改为c(hostnamec ...