精华内容
下载资源
问答
  • HTML5 Canvas仿你画我猜画布涂鸦代码。HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
  • 你画我猜HTML5小游戏是一款基于HTML5 Canvas画布加上js鼠标监听事件实现的你画我小游戏代码。
  • HTML5新增标签--canvas之绘制你画我猜

    千次阅读 2018-09-14 11:26:46
    <!DOCTYPE html> <html>  <head>  <meta charset="utf-8"...你画我猜</title>  <style>  body{  wid

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>你画我猜</title>
            <style>
                body{
                    width: 100%;
                    height: 100%;
                    background: black;
                }
                #canvas{
                    background:#ffffff;
                }
            </style>
        </head>
        <body>
            <canvas id="canvas" width="400" height="400">
                
            </canvas>
            <script>
                var oC=document.getElementById("canvas")
                var oGC=oC.getContext("2d")

                oC.οnmοusedοwn=function(e){
                    //获取当前点的位置
                    var disX=e.clientX-oC.offsetLeft
                    var disY=e.clientY-oC.offsetTop
                    
                    oGC.moveTo(disX,disY)
                    
                    document.οnmοusemοve=function(e){
                    //获取第二点的位置
                       var disX=e.clientX-oC.offsetLeft
                       var disY=e.clientY-oC.offsetTop
                       oGC.lineTo(disX,disY)
                       oGC.stroke()
                    }
                    
                    document.οnmοuseup=function(){
                        document.οnmοusedοwn=null
                        document.οnmοusemοve=null
                    }
                }
            </script>
        </body>
    </html>

    展开全文
  • 你画我猜小游戏代码

    热门讨论 2013-07-20 13:13:59
    这是我们课程设计你画我猜小游戏的源代码,本人还得了优秀呢,仅供大家参考
  • 文件名大小更新时间微信小程序你画我猜demo完整源码02017-08-29微信小程序你画我猜demo完整源码\.DS_Store61482017-08-29__MACOSX02017-08-29__MACOSX\微信小程序你画我猜demo完整源码02017-08-29__MACOSX\微信小...

    文件名大小更新时间

    微信小程序你画我猜demo完整源码02017-08-29

    微信小程序你画我猜demo完整源码\.DS_Store61482017-08-29

    __MACOSX02017-08-29

    __MACOSX\微信小程序你画我猜demo完整源码02017-08-29

    __MACOSX\微信小程序你画我猜demo完整源码\._.DS_Store1202017-08-29

    微信小程序你画我猜demo完整源码\app.js3672017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\._app.js2172017-01-05

    微信小程序你画我猜demo完整源码\app.json3672017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\._app.json2172017-01-05

    微信小程序你画我猜demo完整源码\app.wxss5522017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\._app.wxss2172017-01-05

    微信小程序你画我猜demo完整源码\bower.json4272017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\._bower.json2172017-01-05

    微信小程序你画我猜demo完整源码\config.js5792017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\._config.js2172017-01-05

    微信小程序你画我猜demo完整源码\LICENSE10842017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\._LICENSE2172017-01-05

    微信小程序你画我猜demo完整源码\package.json3102017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\._package.json2172017-01-05

    微信小程序你画我猜demo完整源码\pages02017-01-05

    微信小程序你画我猜demo完整源码\pages\chat02017-01-05

    微信小程序你画我猜demo完整源码\pages\chat\chat.js53952017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages02017-08-29

    __MACOSX\微信小程序你画我猜demo完整源码\pages\chat02017-08-29

    __MACOSX\微信小程序你画我猜demo完整源码\pages\chat\._chat.js2172017-01-05

    微信小程序你画我猜demo完整源码\pages\chat\chat.json22017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\chat\._chat.json2172017-01-05

    微信小程序你画我猜demo完整源码\pages\chat\chat.wxml11392017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\chat\._chat.wxml2172017-01-05

    微信小程序你画我猜demo完整源码\pages\chat\chat.wxss50522017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\chat\._chat.wxss2172017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\._chat2172017-01-05

    微信小程序你画我猜demo完整源码\pages\drawguess02017-01-05

    微信小程序你画我猜demo完整源码\pages\drawguess\index.js100802017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\drawguess02017-08-29

    __MACOSX\微信小程序你画我猜demo完整源码\pages\drawguess\._index.js2172017-01-05

    微信小程序你画我猜demo完整源码\pages\drawguess\index.json22017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\drawguess\._index.json2172017-01-05

    微信小程序你画我猜demo完整源码\pages\drawguess\index.wxml48872017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\drawguess\._index.wxml2172017-01-05

    微信小程序你画我猜demo完整源码\pages\drawguess\index.wxss45202017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\drawguess\._index.wxss2172017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\._drawguess2172017-01-05

    微信小程序你画我猜demo完整源码\pages\index02017-01-05

    微信小程序你画我猜demo完整源码\pages\index\index.js61642017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\index02017-08-29

    __MACOSX\微信小程序你画我猜demo完整源码\pages\index\._index.js2172017-01-05

    微信小程序你画我猜demo完整源码\pages\index\index.json22017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\index\._index.json2172017-01-05

    微信小程序你画我猜demo完整源码\pages\index\index.wxml21002017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\index\._index.wxml2172017-01-05

    微信小程序你画我猜demo完整源码\pages\index\index.wxss22522017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\index\._index.wxss2172017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\._index2172017-01-05

    微信小程序你画我猜demo完整源码\pages\upload02017-01-05

    微信小程序你画我猜demo完整源码\pages\upload\index.js19562017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\upload02017-08-29

    __MACOSX\微信小程序你画我猜demo完整源码\pages\upload\._index.js2172017-01-05

    微信小程序你画我猜demo完整源码\pages\upload\index.json432017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\upload\._index.json2172017-01-05

    微信小程序你画我猜demo完整源码\pages\upload\index.wxml19752017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\upload\._index.wxml2172017-01-05

    微信小程序你画我猜demo完整源码\pages\upload\index.wxss43042017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\upload\._index.wxss2172017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\pages\._upload2172017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\._pages2172017-01-05

    微信小程序你画我猜demo完整源码\README.md452017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\._README.md2172017-01-05

    微信小程序你画我猜demo完整源码\style02017-01-05

    微信小程序你画我猜demo完整源码\style\base02017-01-05

    微信小程序你画我猜demo完整源码\style\base\fn.wxss02017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\style02017-08-29

    __MACOSX\微信小程序你画我猜demo完整源码\style\base02017-08-29

    __MACOSX\微信小程序你画我猜demo完整源码\style\base\._fn.wxss2172017-01-05

    微信小程序你画我猜demo完整源码\style\base\mixin02017-01-05

    微信小程序你画我猜demo完整源码\style\base\mixin\setArrow.wxss02017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\style\base\mixin02017-08-29

    __MACOSX\微信小程序你画我猜demo完整源码\style\base\mixin\._setArrow.wxss2172017-01-05

    微信小程序你画我猜demo完整源码\style\base\mixin\setOnepx.wxss02017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\style\base\mixin\._setOnepx.wxss2172017-01-05

    微信小程序你画我猜demo完整源码\style\base\mixin\text.wxss02017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\style\base\mixin\._text.wxss2172017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\style\base\._mixin2172017-01-05

    微信小程序你画我猜demo完整源码\style\base\reset.wxss1292017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\style\base\._reset.wxss2172017-01-05

    微信小程序你画我猜demo完整源码\style\base\variable02017-01-05

    微信小程序你画我猜demo完整源码\style\base\variable\color.wxss02017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\style\base\variable02017-08-29

    __MACOSX\微信小程序你画我猜demo完整源码\style\base\variable\._color.wxss2172017-01-05

    微信小程序你画我猜demo完整源码\style\base\variable\global.wxss02017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\style\base\variable\._global.wxss2172017-01-05

    微信小程序你画我猜demo完整源码\style\base\variable\weui-button.wxss02017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\style\base\variable\._weui-button.wxss2172017-01-05

    微信小程序你画我猜demo完整源码\style\base\variable\weui-cell.wxss02017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\style\base\variable\._weui-cell.wxss2172017-01-05

    微信小程序你画我猜demo完整源码\style\base\variable\weui-dialog.wxss02017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\style\base\variable\._weui-dialog.wxss2172017-01-05

    微信小程序你画我猜demo完整源码\style\base\variable\weui-grid.wxss02017-01-05

    __MACOSX\微信小程序你画我猜demo完整源码\style\base\variable\._weui-grid.wxss2172017-01-05

    微信小程序你画我猜demo完整源码\style\base\variable\weui-msg.wxss02017-01-05

    展开全文
  • 本节书摘来异步社区《HTML5游戏编程核心技术...HTML5游戏编程核心技术与实战在这一小节中,我们将利用前面介绍的知识,来创作一个《你画我猜》游戏中的主要功能。《你画我猜》是一款老少皆宜的多人在线的网络游戏,2...

    本节书摘来异步社区《HTML5游戏编程核心技术与实战》一书中的第2章,第2.7节,作者: 向峰 责编: 杨海玲,更多章节内容可以访问云栖社区“异步社区”公众号查看。

    2.7 案例:《你画我猜》

    HTML5游戏编程核心技术与实战
    在这一小节中,我们将利用前面介绍的知识,来创作一个《你画我猜》游戏中的主要功能。《你画我猜》是一款老少皆宜的多人在线的网络游戏,2012年风靡一时,玩法其实也来源于生活当中,经常在娱乐节目中出现。通常在节目中是这样玩的,主持人写出一个词语,然后由一个参与者根据这个词语画出相应的图案,由另一个参与者来根据这个图案猜出这个词语,而《你画我猜》就把现实生活中的这个玩法转到了电脑上,玩法就是这么简单。当然,本章还无法开始做出一个网络游戏,哪怕是一个简单的单机游戏,本书第10章有《你画我猜》这个游戏完整的实现,本章将会完成《你画我猜》中的画板部分。没玩过《你画我猜》游戏的,也应该用过Windows的画板吧?好了,下面我们来实现这个画板。

    2.7.1 UI界面设计

    首先,我们来设计一个画板的主页面,关于使用div布局游戏的UI不是本书的重点,我们只关注游戏逻辑的实现,以下代码只是一个参考实现:

    a1

    设计好以上的主页面后,得到如图2-23所示的图,当然,样式部分不是重点,所以忽略,我们需要了解这个画板中和程序相关的部分。

    好了,定义好图2-23所示的UI界面后,开始实现功能。

    2_23

    2.7.2 定义画板对象

    首先,我们把整个画板看成一个画板对象,这个画板对象中有一些基本的属性,如画板的大小,当前画笔使用的颜色、宽度等,于是就有了以下的Paint类:

    a2

    画板定义好了以后,我们需要逐渐往里面增加相应的功能代码。

    2.7.3 初始化画笔选项区

    接下来,我们需要动态产生颜色区域以及画笔区域,因为在前面设计UI的时候,只给这两个区域留下了空白容器,需要我们通过代码来产生。于是,可以给Painter定义一个初始化画笔的方法,具体的代码如下:

    a3

    以上函数中,我们创建了颜色区域和画笔区域中的选择层部分,当用户鼠标点击颜色选择区域的时候,就会使用fire方法触发一个onPaintUpdate事件,修改当前用户画笔的颜色。同样,当用户鼠标点击画笔选择区域时,也会触发onPaintUpdate事件,修改当前用户画笔的大小。fire方法是Paint类中自定义的一个方法,用于处理画板中的各种自定义事件的触发,具体实现如下:

    a4

    到此为止,关于画笔颜色和大小的选择已经完成,接下来,我们看看如何实现用户在画板上用画笔绘画。

    2.7.4 实现画板绘制

    使用画笔在画板上绘制,从原理上来说,canvas上是可以画图形的,所以我们只要在鼠标的移动事件上面做文章就可以了。鼠标在canvas上面移动的时候,可以跟踪当前鼠标的坐标,然后在这些坐标点上绘制点就可以了,这是我们最初的想法,但实际上这种效果并不理想。因为,首先,canvas并没有提供画点的方法,当然,可以通过绘制一个极小的矩形实现,但这不是主要问题。主要问题在于,虽然我们移动鼠标是连续移动,但电脑没有足够高的灵敏度捕捉鼠标的移动轨迹。事实上,如果采用这种方法,将会在canvas上留下断断续续的点的轨迹,这不是我们要的结果,我们需要的是把这些点用线连起来。所以最终的算法是,捕捉鼠标移动的坐标,然后把当前点和上一个点用线连接起来,最终,就可以达到一个比较好的效果。

    根据以上的原理部分,我们在Paint类中增加一个initCanvas()方法,用于初始化画板,绑定鼠标在canvas上面的相关事件,其实现代码如下:

    a5

    主要绘制部分的工作,基本都完成了。噢,别忘了,还有一个擦除区域。当我们绘制错误的时候,需要擦除图像,于是,我们可以完成初始化擦除区域的方法如下:

    a6

    好了,大功告成,为了让Paint类开始工作,我们最好写一个init()方法,完成以上全部的初始化工作,以便让用户方便使用,init()方法可参考完整代码部分。

    2.7.5 整合代码

    好了,整个Painter对象就完成了,最终,我们得到的Paint对象的完整代码如下:

    a7

    至此,《你画我猜》的绘制部分已经完成,至于多人游戏的部分,在学习了后面的网络编程部分后,我们会得到一个完整的案例。

    展开全文
  • 你画我猜---websocket

    千次阅读 热门讨论 2015-11-05 00:12:34
    看来使用websocket的人不算少数,趁年底工作不是很忙就把代码重构了(不能看以前写的代码,尤其是两年前的,惨不忍睹)一下,完整的实现你画我猜的功能,而且可以点对点,广播等,只是提供一种思路把。代码就不要去...

    2019年01月30日22:07:52 更新

    看来使用websocket的人不算少数,趁年底工作不是很忙就把代码重构了(不能看以前写的代码,尤其是两年前的,惨不忍睹)一下,完整的实现你画我猜的功能,而且可以点对点,广播等,只是提供一种思路把。代码就不要去CSDN下载了直接上github上下载,不知道github的话就去搜索一下,代码在这里。

    https://github.com/vector4wang/tomcat8-websocket

    演示点我


    前段时间接触了websocket,具体的就不介绍了,他就是与后台建立长连接,完成信息的发送与接受,有兴趣看我之前的blog或者google一下!之前完成了单聊与多聊的功能,分别实用tomcat7和tomcat8实现!那时候再想做个你画我猜的小游戏,但没有时间!现在终于抽出时间做了一个,有点简陋,看效果(代码是在在tomcat8的单聊与群聊基础上添加的)

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    要选择对放姓名,才可以绘制,对方实时显示,但是有个问题,对方的画板,不连续,因为不是以直线的方式绘制,而是已点的方式绘制(其实就是(x-1,y-1)lineTo(x,y)),传过去的是个坐标,现在就只想到这个方法

     

    <span style="font-size:14px;">                                var coordArry = o.data.split("_");
    				var x = coordArry[0];
    				var y = coordArry[1];
    				oGC.lineWidth = 1;	
    				oGC.moveTo(x-1,y-1);
    				oGC.lineTo(x,y);
    				oGC.stroke();</span>

    使用的是HTML5 的canvas,绘制直线的代码如下:

     

     

    <span style="font-size:14px;">var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    cxt.stroke();</span>

    关于这个可以去W3C去学,那里看起来简单,但是非常的基础,非常的重要

     

    你画我猜就是把本地画笔的实时坐标发送给对方,然后根据坐标再绘制出来,思路很简单,就是如何处理这些坐标

    代码没有什么改变,就是后台加了个类型,前台加个判断,就ok了,代码不要钱了这次,上传到GITHUB了!

    对于以上提到的问题,以后有时间再改,马上双十一了,天天加班啊。,。。。。

    展开全文
  • HTML5练习之简陋版我画你猜(一)

    千次阅读 2014-03-09 21:51:56
    一个好的创意将会成就一个人,就像我画你猜的创使者一样。最近学习HTML5中的canvas,故模仿其以达到练习目的。 Guess h1 { text-align:center; } #user { position:absolute; top:12%; left:3%; height:479...
  • canvas之你画我猜

    千次阅读 2019-05-18 15:40:24
    1.html结构 < div class = " wrapper " > < canvas class = cavs width = " 1000 " height = " 400 " > canvas > < ul class = " btn-list " > < li > < input type = " color " id = " ...
  • 正式项目未开始,先先自己练手,做一个你画我猜小游戏,先上一个不完善的dome在线地址 http://www.5rgame.com 1.node; 安装socket,启动服务var io = require('socket.io').listen(server);var messages = [];//...
  • 刚刚看完白板部分的代码,需求就想把拖了好长时间的需求交给。场景:直播课上需要橡皮,老师在这边擦掉线,另一边需要实时同步。线条的记录是用坐标点+size+颜色存储在数据库+redis,实时的条件下都是直接在redis的...
  • 单纯实现 canvas 绘画功能还是比较简单的,以下只大概说一下绘画功能的实现,至于页面中还包括颜色选择器、图像保存到本地的功能,请到 github 代码仓库下载下来看看。 一、canvas 标签 这个标签定义...
  • React+Nodejs+Socket+Webpack版你画我猜

    千次阅读 2016-07-13 15:57:31
    React版我画你猜之前有看到过一个Vue版本的 我画你猜 然后用 React 也做了一个。技术栈:React + Nodejs + Socket.io + Webpack + Less先上传送门Github,要是敢给Star!!!就敢接受!!有啥问题可以在下面留言...
  • 前言 一直都想好好的学习运用node,一直都不知道要做什么东西,最近Java Web老师要求做个前端的应用,既然是前端应用,那肯定得是单页应用了,而且node很适用于高并发的...你画我猜+聊天室(Demo | GitHub) 图片...
  • 使用websocket实现“你画我猜

    千次阅读 2018-11-22 11:11:36
    你画我猜 <canvas id="drawing-pad" width="450" height="320"></canvas> <ul id="chat-history"></ul> (); return false;"> 输入: ();"> Send restart ...
  • return ( <View> {this.props.children} <Login /> </View> )
  • public class SharedPreferencesUtil { //存储的sharedpreferences文件名 private static final String FILE_NAME = "save_file_name"; /** * 保存数据到文件 * * @param context * @param key ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,265
精华内容 5,306
关键字:

html5你画我猜