服务器端代码：

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. 老帖收藏，留供参考：SpringMvc2.5+Mybatis3.2.7

    一.项目背景 SpringMvc+Mybatis 数据库连接池是阿里巴巴的druid.日志框架式logback 二.配置文件 1.SpringMvc-servlet.xml <?xml vers ...

  2. Spring Security 入门（3-11）Spring Security 的登录密码验证过程 UsernamePasswordAuthenticationFilter

    认证过程如下 一.先判断请求(请求必须是post请求)地址是否为配置的 login-processing-url 值(默认/j_spring_security_check),如果不是,则放行,进入下一 ...

  3. Mego开发文档 - 从EF6/EFCore迁移到Mego

    从EF6/EFCore迁移到Mego框架 如果您有EntityFragmework6或EntityFragmeworkCore的开发经验,在首次接触Mego框架时会发现这两个框架非常相似,本文将帮忙您 ...

  4. javascript实现继承3种方式： 原型继承、借用构造函数继承、组合继承，模拟extends方法继承

    javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中 构造函数 原型对象 实力对象的关系: 1 构造函数.prototype = 原型对象 2 ...

  5. Hive函数：GROUPING SETS,GROUPING__ID,CUBE,ROLLUP

    参考:lxw大数据田地:http://lxw1234.com/archives/2015/04/193.htm 数据准备: CREATE EXTERNAL TABLE test_data ( mont ...

  6. orchard-1.9.2－1.10.2汉化

    安装 首先从github上下载orchard源代码:https://github.com/OrchardCMS/Orchard(下载版本最新的1.10.2) 使用vs2017打开源代码,运行进入安装界 ...

  7. Java面试题—初级（3）

    21.ArrayList和Vector的区别 这两个类都实现了List接口(List接口继承了Collection接口),他们都是有序集合,即存储在这两个集合中的元素的位置都是有顺序的,相当于一种动态 ...

  8. PHP 通过fsockopen函数获取远程网页源码

    <?php $fp = fsockopen("www.baidu.com", 80, &$errno, &$errstr, 10); if(!$fp) { e ...

  9. ASP.NET MVC应用迁移到ASP.NET Core及其异同简介

    ASP.NET Core是微软新推出支持跨平台.高性能.开源的开发框架,相比起原有的ASP.NET来说,ASP.NET Core更适合开发现代应用程序,如跨平台.Dorker的支持.集成现代前端开发框 ...

  10. python pygame 安装和运行的一些问题

    1.python安装过程中可以选择自动配置环境变量,可以避免手动配置,但是缺点是如果环境变量有问题,就得自己重新学习配置环境变量. 2.我自己想用python从游戏方面入手,所以在安装pygame过程 ...