《HTML5游戏编程核心技术与实战》——2.7 案例：《你画我猜》

2.7 案例：《你画我猜》

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

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>你画我猜</title>
<link href="images/CSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--主容器层-->
<div id="main" class="main">
<div>
　<div class="tx"></div>
　<div class="wz">
　　<div id="dround"></div>
　　<!--显示问题区域-->
　　<span id="question"></span>
　</div>
　<!--显示时间-->
　<div id="qTime" class="time">60</div>
　<div class="tc">离开房间<img src="images/edit_undo.png" align="absmiddle"></div>
</div>
<div class="qc"></div>
<div>
<!--绘图主层-->
　<div class="hbbox">
　<!--绘图区域-->
　 <div id="hb" class="hb">
　　 <canvas id="paintArea"　width="525" height="370" ></canvas>
　 </div>
　</div>
<!--工具选项区-->
<div class="hbr">
<div id="operDiv">
　 <!--颜色选取区-->
　　<div id="ys" class="ys"></div>
　　<!--画笔大小选择区-->
　　<div id="bc" class="bc"></div>
　　<!--定义橡皮擦工具-->
　　<div id="ssx" class="tb">
　　　<div id="btnRub" class="tb2"><img src="images/01945.png"></div>
　　　<div id="btnClear" class="tb3"><img src="images/053753321.gif"></div>
　　</div>
</div>
<!--消息发布主层-->
<div id="msgArea" class="msgArea"></div>
 <div class="bd">
　<input type="button" id="btnSendMsg" value="发送"><input type="text" size="13"
　　　 id="txtMsg">　
 </div>
</div>
</div>
</div>
</body>

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

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

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

var Painter = {
　 //绑定的环境上下文
　 ctx:null,
　 //宽度
　 w:0,
　 //高度
　 h:0,　　
　 //当前画笔颜色
　 bColor:null,
　 //当前画笔大小
　 bWidth:null
}

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

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

//初始化画笔
initBrush:function()
　 {
　 //定义画板颜色
　 var bColor = ["#000000", "#999999", "#FFFFFF", "#FF0000", "#FF9900", "#FFFF00",
　 "#008000", "#00CCFF", "#0099FF", "#FF33CC", "#CC66FF", "#FFCCCC", "#6633FF", "#CCFFCC"];
　 var bDiv = $("#ys"),
　　　　self = this;
　//产生颜色层
　for(var i=0;i<bColor.length;i++)
　{
　　 var b = $("<div class='bys'></div>").css("background-color", bColor[i]);
　　　 //修改颜色
　　　 b.on("click", function(){
　　　 //触发更新画板状态事件
　　　 self.fire("onPaintUpdate", {"color":$(this).css("background-color")});
　　 });
　　 bDiv.append(b);
　}
　//绑定画笔大小
　var bWidth = [2, 8, 16, 24];
　var bcDiv = $("#bc");
　for(i = 0;i<bWidth.length;i++)
　{
　　 var bw = $("<div class='bwid' data-bidx='"+(i)+"'></div>");
　　 bw.css("background-image", "url(images/bc"+(i+1)+".png)");　　
　　 //修改画笔大小
　　 bw.on("click", function(){
　　　 //触发更新画板状态事件
　　　 self.fire("onPaintUpdate", {"width":bWidth[this.getAttribute("data-bidx")]});
　　 });
　　 bcDiv.append(bw);
　}
}

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

//触发画板事件
fire:function(eventName, param)
{
　if(this[eventName])
　{
　　 this[eventName](param);
　}　　　
}

本质上，fire方法就是调用相应的事件处理程序，相应的，我们需要添加一个onPatintUpdate方法，相关代码如下：

//画板更新事件，当画板的参数比如画笔颜色，大小改变时触发
onPaintUpdate:function(data)
{
　var w = data.width||this.bWidth,
　　　 c = data.color||this.bColor;
　var param = {"width":w, "color":c};
　//设置画笔大小
　this.setBrushWidth(w);
　//设置画笔颜色
　this.setBrushColor(c);　　　　　　
}

在这个更新画笔的方法中，需要根据传入的参数调用setBrushWidth()和setBrushColor()方法更新当前画笔的色彩和大小，这两个方法的具体代码如下：

//设置画笔颜色
setBrushColor:function(color)
{
　this.bColor = color||"black";
　this.ctx.strokeStyle = this.bColor;　　　
},
//设置画笔宽度
setBrushWidth:function(width)
{
　this.bWidth = width||1;
　this.ctx.lineWidth = this.bWidth;
}

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

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

//初始化画板
initCanvas:function()
{
　//绑定绘图canvas
　var can = $("#paintArea"), self = this;
　//绑定鼠标按下时间
　can.on("mousedown", function(e){　　　　
　　 e.preventDefault();
　　 this.x = e.offsetX,
　　 this.y = e.offsetY;
　　 self.fire("onStartDraw", {"x":this.x, "y":this.y});
　　 //绑定鼠标移动事件
　　 can.on("mousemove", function(e){
　　　 var nx = event.offsetX, ny = event.offsetY;
　　　 self.fire("onDrawing", {"x":nx, "y":ny});
　　　 this.x = nx;
　　　 this.y = ny;
　　 });
　　 //绑定鼠标抬起事件
　　 can.on("mouseup", function(){
　　　 //取消鼠标移动事件
　　　 can.off("mousemove");
　　 });
　})
}

这里，我们在canvas中绑定了鼠标按下、移动和抬起事件，在按下和移动的时候，触发了onStartDraw和onDrawing方法，这两个方法主要用于绘制线条，代码如下：

//开始画画事件
onStartDraw:function(data){
　 //开始路径
　 this.ctx.beginPath();
　 this.ctx.moveTo(data.x, data.y);　　　
},
//画画事件
onDrawing:function(data)
{
　 this.ctx.lineTo(data.x, data.y);
　 this.ctx.stroke();　　　
}

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

//初始化橡皮擦
initEraser:function()
{
　var self = this;
　//绑定清除屏幕事件
　$("#btnClear").click(function(){
　 self.clear();
　});
　//擦除
　$("#btnRub").click(function(){
　　self.setBrushColor("white");
　　self.setBrushWidth(32);
　});
}

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

2.7.5 整合代码
好了，整个Painter对象就完成了，最终，我们得到的Paint对象的完整代码如下：

(function(){
　 //定义画板对象
　 var Painter = {
　　 //绑定的环境上下文
　　 ctx:null,
　　 //宽度
　　 w:0,
　　 //高度
　　 h:0,　　
　　 //当前画笔颜色
　　 bColor:null,
　　 //当前画笔大小
　　 bWidth:null,
　　 //初始化
　 init:function()
　 {
　　 var can = $("#paintArea")[0];
　　 this.ctx = can.getContext("2d");
　　 this.w = can.width;
　　 this.h = can.height;
　　 this.setBGColor();
　　 this.setBrushColor();
　　 this.setBrushWidth();
　　 this.ctx.lineCap = "round";
　　 this.ctx.lineJoin = "round";
　　 //初始化画板事件
　　 this.initCanvas();
　　 //初始化画笔颜色
　　 this.initBrush();
　　 //初始化橡皮擦
　　 this.initEraser();
　 },
　 //初始化画笔
　 initBrush:function()
　 {
　　　//定义画板颜色
　　　var bColor = ["#000000", "#999999", "#FFFFFF", "#FF0000", "#FF9900", "#FFFF00",
　　　　　　　　　　　　　"#008000", "#00CCFF", "#0099FF", "#FF33CC", "#CC66FF", "#FFCCCC",
　　　　　　　　　　　　　"#6633FF", "#CCFFCC"];
　　　var bDiv = $("#ys"),
　　　　　 self = this;
　　　//产生颜色层
　　　for(var i=0;i<bColor.length;i++)
　　　{
　　　　 var b = $("<div class='bys'></div>").css("background-color", bColor[i]);
　　　　 //修改颜色
　　　　 b.on("click", function(){
　　　　　 //触发更新画板状态事件
　　　　　 self.fire("onPaintUpdate", {"color":$(this).css("background-color")});
　　　　 });
　　　　bDiv.append(b);
　　　}
　　　//绑定画笔大小
　　　var bWidth = [2, 8, 16, 24];
　　　var bcDiv = $("#bc");
　　　for(i = 0;i<bWidth.length;i++)
　　　{
　　　　 var bw = $("<div class='bwid' data-bidx='"+(i)+"'></div>");
　　　　 bw.css("background-image", "url(images/bc"+(i+1)+".png)");　　
　　　　 //修改画笔大小
　　　　 bw.on("click", function(){
　　　　　 //触发更新画板状态事件
　　　　　 self.fire("onPaintUpdate", {"width":bWidth[this.getAttribute("data-bidx")]});
　　　　 });
　　　　 bcDiv.append(bw);
　　　}
　 },
　 //初始化橡皮擦
　 initEraser:function()
　 {
　　　var self = this;
　　　//绑定清除屏幕事件
　　　$("#btnClear").click(function(){
　　　　self.clear();
　　　});
　　　//擦除
　　　$("#btnRub").click(function(){
　　　　self.setBrushColor("white");
　　　　self.setBrushWidth(32);
　　　});
　 },
　 //设置背景颜色
　 setBGColor:function(color){
　　 this.ctx.fillStyle = color||"white";
　　 this.ctx.fillRect(0, 0, this.w, this.h);
　 },
　 //设置画笔颜色
　 setBrushColor:function(color)
　 {
　　 this.bColor = color||"black";
　　 this.ctx.strokeStyle = this.bColor;　　　
　 },
　 //设置画笔宽度
　 setBrushWidth:function(width)
　 {
　　 this.bWidth = width||1;
　　 this.ctx.lineWidth = this.bWidth;
　 },
　 //初始化画板
　 initCanvas:function()
　 {
　　 //绑定绘图canvas
　　 var can = $("#paintArea"), self = this;
　　 //绑定鼠标按下时间
　　 can.on("mousedown", function(e){　　　　
　　　　e.preventDefault();
　　　　this.x = e.offsetX,
　　　　this.y = e.offsetY;
　　　　self.fire("onStartDraw", {"x":this.x, "y":this.y});
　　　　//绑定鼠标移动事件
　　　　can.on("mousemove", function(e){
　　　　　var nx = event.offsetX, ny = event.offsetY;
　　　　　self.fire("onDrawing", {"x":nx, "y":ny});
　　　　　this.x = nx;
　　　　　this.y = ny;
　　　　});
　　　　//绑定鼠标抬起事件
　　　　can.on("mouseup", function(){
　　　　//取消鼠标移动事件
　　　　can.off("mousemove");
　　　　});
　　 })
　 },
　 //清除canvas
　 clear:function()
　 {
　　 this.ctx.clearRect(0, 0, this.w, this.h);
　 },
　 //触发画板事件
　 fire:function(eventName, param)
　 {
　　 if(this[eventName])
　　 {
　　　 this[eventName](param);
　　 }　　　
　 },
　 //开始画画事件
　 onStartDraw:function(data){
　　　//开始路径
　　　this.ctx.beginPath();
　　　this.ctx.moveTo(data.x, data.y);　　　
　 },
　 //画画事件
　 onDrawing:function(data)
　 {
　　　this.ctx.lineTo(data.x, data.y);
　　　this.ctx.stroke();　　　
　 },
　 //画板更新事件，当画板的参数比如画笔颜色，大小改变时触发
　 onPaintUpdate:function(data)
　 {
　　 var w = data.width||this.bWidth, c = data.color||this.bColor;
　　 var param = {"width":w,"color":c};
　　 //设置画笔大小
　　 this.setBrushWidth(w);
　　 //设置画笔颜色
　　 this.setBrushColor(c);　　　　　　
　 }
　}
　 //画板初始化
　Painter.init();
　window.Painter = Painter;
}())

以上的Paint类在painter.js文件中，最后，完整的主页面代码index.htm如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>你画我猜</title>
<link href="images/CSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--主容器层-->
<div id="main" class="main">
<div>
　<div class="tx"></div>
　<div class="wz">
　　<div id="dround"></div>
　　<!--显示问题区域-->
　　<span id="question"></span>
　</div>
　<!--显示时间-->
　<div id="qTime" class="time">60</div>
　<div class="tc">离开房间<img src="images/edit_undo.png" align="absmiddle"></div>
</div>
<div class="qc"></div>
<div>
<!--绘图主层-->
　<div class="hbbox">
　<!--绘图区域-->
　 <div id="hb" class="hb">
　　 <canvas id="paintArea"　width="525" height="370" ></canvas>
　 </div>
　</div>
<!--工具选项区-->
<div class="hbr">
<div id="operDiv">
　　<!--颜色选取区-->
　　 <div id="ys" class="ys"></div>
　　 <!--画笔大小选择区-->
　　 <div id="bc" class="bc"></div>
　　 <!--定义橡皮擦工具-->
　　 <div id="ssx" class="tb">
　　　 <div id="btnRub" class="tb2"><img src="images/01945.png"></div>
　　　 <div id="btnClear" class="tb3"><img src="images/053753321.gif"></div>
　　 </div>
</div>
<!--消息发布主层-->
<div id="msgArea" class="msgArea"></div>
 <div class="bd">
　<input type="button" id="btnSendMsg" value="发送"><input type="text" size="13"
　　　 id="txtMsg">　
 </div>
</div>
</div>
</div>
</body>
<script src="../js/jquery.js" charset="utf-8"></script>
<script src="../js/painter.js" charset="utf-8"></script>
<script>
//检测是否支持HTML5
function isSupportHTML5()
{
　return (typeof(Worker) !== "undefined");
}
//初始化
$(document).ready(function(){
　if(!isSupportHTML5())
　{
　　alert("您的浏览器不支持HTML5，请更换浏览器!");
　}
　else
　{
　 $("#main").show();　
　}　
});
</script>
</html>

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

时间： 2024-04-20 10:22:06

《HTML5游戏编程核心技术与实战》——2.7 案例：《你画我猜》的相关文章

《HTML5游戏编程核心技术与实战》一2.2 图形API

2.2 图形API HTML5游戏编程核心技术与实战 创建canvas和获取了canvas的环境上下文之后,就可以开始进行绘图了.绘图的方式有两类:一类是进行图形操作,另一类是图像操作.本小节主要涉及图形相关的API,要使用canvas的API进行绘图,通常需要进行下列步骤. (1)获取canvas元素.通过document.getElementById()取得元素. (2)获取canvas元素的环境上下文.通过canvas.getContext ("2d")获取2D图像上下文. (3

《HTML5游戏编程核心技术与实战》一2.1 基本知识

2.1 基本知识 HTML5游戏编程核心技术与实战在HTML4时代,不安装插件的情况下,基于浏览器的绘图组件是最初由微软向W3C递交的VML(Vector Markup Language矢量标记语言)技术,但未被W3C采纳,只能在IE5.0及其后续版本中使用,后来VML和PGML(由Adobe和SUN提出)合并成SVG(Scalable Vector Graphics,可伸缩矢量图形)规范.SVG技术是基于XML的矢量图形绘制技术,对于普通的图像应用来说足够,但是对于性能要求较高的游戏渲染来说,

《HTML5游戏编程核心技术与实战》一2.4 坐标变换

2.4 坐标变换 HTML5游戏编程核心技术与实战在绘制图像的过程中,经常可能需要对图像进行旋转.缩放等变形处理,canvas也提供了一系列的API帮助我们完成这些操作. 关于画布的坐标变换,canvas提供了以下常用的API,这些API的操作必须要在绘制之前调用,否则不会产生任何效果. translate (x, y):平移,把画布的原点坐标移动到(x, y)位置,x表示将坐标原点向左移x个像素,y表示将坐标原点向下移动y个像素.正常情况下canvas的原点坐标位于左上角,那么我们可以通过tr

《HTML5游戏编程核心技术与实战》一导读

前 言 HTML5游戏编程核心技术与实战为什么写这本书对游戏的热爱使我萌发了写书的念头.漫画和电子游戏是童年最美好的回忆,任天堂的红白机陪伴着我度过了童年最快乐的时光,20世纪80年代,大街小巷的街机室成了孩子们快乐的天堂.随着时光流逝,许多经典的游戏画面已成为过去,但对游戏的热情依然不减,希望能借此书得以慰藉逝去的青春.青春不在,游戏热血永存! IT技术可谓日新月异,要想不被社会淘汰,就必须要不断学习,不断充实自己.HTML5是Web技术中提出的新规范.新生的HTML5技术虽然目前还不十分成熟

《HTML5游戏编程核心技术与实战》一2.8 小结

2.8 小结 HTML5游戏编程核心技术与实战本章介绍了canvas的一些常用的操作,作为HTML5的最重要的特性,canvas使得在Web中开发免插件的较高性能的游戏提供了条件,接下来的第3章中,我们介绍HTML5中的多媒体元素.

《HTML5游戏编程核心技术与实战》一2.5 绘制文字

2.5 绘制文字 HTML5游戏编程核心技术与实战canvas中除了可以绘制图形图像外,还可以绘制文字,同时也可以指定文字的字体.大小.对齐方式以及填充文字的纹理. fillText (text, x, y, [maxWidth]):在canvas上填充文字,text表示需要绘制的文字,x.y分别表示绘制在canvas上的横.纵坐标,最后一个参数可选,表示显示文字的最大宽度,防止文字显示溢出.strokeText (text, x, y, [maxWidth]):在canvas上描边文字,参数的

《HTML5游戏编程核心技术与实战》一2.7 案例：《你画我猜》

2.7 案例:<你画我猜> HTML5游戏编程核心技术与实战在这一小节中,我们将利用前面介绍的知识,来创作一个<你画我猜>游戏中的主要功能.<你画我猜>是一款老少皆宜的多人在线的网络游戏,2012年风靡一时,玩法其实也来源于生活当中,经常在娱乐节目中出现.通常在节目中是这样玩的,主持人写出一个词语,然后由一个参与者根据这个词语画出相应的图案,由另一个参与者来根据这个图案猜出这个词语,而<你画我猜>就把现实生活中的这个玩法转到了电脑上,玩法就是这么简单.当然,

《HTML5游戏编程核心技术与实战》一2.6 其他全局属性

2.6 其他全局属性 HTML5游戏编程核心技术与实战在context中还有一些常见的全局属性,做一些了解. globalAlpha:透明度,这个值用来设置在画布上绘制的透明度,值的范围从0-1之间,使用这个属性我们可以完成一些常见的效果,比如游戏中常见的淡入淡出效果. 以下代码展示了一张图片淡入,也就是逐渐显示的效果. globalCompositeOperation:全局混合模式,这个属性定义了如果在画布上绘制多个图像时,图像进行叠加的方式,也称为混合模式,类似于Photoshop这种图像处

《HTML5游戏编程核心技术与实战》一1.1 网页游戏和HTML5

1.1 网页游戏和HTML5 HTML5游戏编程核心技术与实战 1.1.1 网页游戏简介 从电子游戏载体来说,电子游戏现在基本上分成了3个主要的阵营:第一部分是以电视游戏为主,第二部分以个人电脑游戏为主,第三部分是以手机和平板为主.而从游戏的玩家数量来说,游戏经历了从单机游戏时代到现在的网络游戏时代.随着互联网的普及,以及电脑硬件的飞速发展,互联网游戏正处于高速发展的时期,特别是网页游戏得到了空前的发展. 网页游戏也称Web Game,是一种无端网游,和<魔兽>系列.<星际>系列等

《HTML5游戏编程核心技术与实战》一1.2 HTML5新特性初探

1.2 HTML5新特性初探 HTML5游戏编程核心技术与实战准备好HTML5开发工具之后,我都迫不急待地想看看HTML5给我们带来了哪些让人激动不已的新特性,相信,你也会和我一样,对它感到兴奋.由于HTML5新增加了很多元素,这里,我们重点简单介绍一下在游戏中会使用到的一些元素,在介绍每一个新的元素时,我都会列举一些小的例子.现在假定读者有一定的HTML以及JavaScript方面的知识,如果您对这些代码完全不清楚,没关系,后面的章节中会详细地解说.目前,我们只需要知道HTML5能做什么就足够