服务器端代码：

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. vue-cli项目中，全局引入jquery

    命令行执行 npm install --save jquery 找到webpack.base.conf.js文件,写入代码: const webpack = require('webpack') 在m ...

  2. python 单例模式的四种创建方式

    单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. ...

  3. 新概念英语（1-135）The latest report

    Lesson 135 The latest report 最新消息 Listen to the tape then answer this question. Is Karen Marsh going ...

  4. 新概念英语（1-133）Sensational news!

    Lesson 133 Sensational news! 爆炸性新闻! Listen to the tape then answer this question. What reason did Ka ...

  5. C# JavaScriptSerializer找不到引用

    遇到一个问题,还是第一次遇到,虽然比较简单,还是记录一下 一.写了一个小工具,为了方便就建了个Form窗体,结果用到了JavaScriptSerializer类,可是怎么都找不到System.Web. ...

  6. spring cloud zipkin sleuth与spring boot aop结合后，启动慢

    问题描述: 引入了spring cloud的监控starter,间接引入jooq. 又引入了 spring-boot-starter-web,所以间接引入aop. 参考下面资料后:https://gi ...

  7. python Django之Form组件

    python Django之Form组件 Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 小试 ...

  8. 一种dubbo逻辑路由方案（服务化隔离环境）

    背景介绍 现在很多的公司都在用dubbo.springcloud做为服务化/微服务的开发框架,服务化之后应用越来越多,链路越来越长,服务环境的治理变的很困难.比如:研发团队的人很多的,同时有几个分支在 ...

  9. 遗传算法详解(LINGO及MatlabGA工具箱求解实现)

    遗传算法 1.前言 遗传算法是一种基于生物界自然群体遗传进化机制的自适应全局优化概率搜索算法.它与传统算法不同,不依赖梯度信息,而是通过模拟自然进化过程来搜索最优解. 例子:兔子的遗传进化 有人说,现 ...

  10. 去除Eclipse中js报错的问题

    第一步:    去除eclipse的JS验证:        将windows->preference->Java Script->Validator->Errors/Warn ...