传智播客旗下品牌:  黑马程序员  |  博学谷  |  传智专修学院

改变中国IT教育,我们正在行动     全国咨询热线:400-618-4000

UI培训之美女撕衣服游戏详解(二)

更新时间:2016年05月17日15时47分 来源:传智播客UI培训学院

二、游戏代码实现
这里为了简化游戏逻辑,我们使用第二种思路来实现游戏,游戏代码如下:
 
<body>
<div class="xk">
     <canvas  id="mycanvas" width="320px" height="480px"></canvas>
    </div>    
     <script type="text/javascript" >
          var canvas=document.getElementById('mycanvas');  //获取canvas元素
var ready,canvas;
//获取对象是内建的 HTML5 对象,拥有多种绘制及添加图像的方法。
          var ctx=canvas.getContext('2d');
var BRUSH_SIZE=18;    //画笔大小
imgup=new Image();//创建image对象
mgback=new Image();
//加载图片  imgback.src="http://g.hiphotos.baidu.com/image/pic/item/a044ad345982b2b7c6d85fa437adcbef76099b0e.jpg";  imgup.src="http://d.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4ca2768aa9d12a6059252da60e.jpg";    //图片的地址 我已经上传在百度上了
 
imgup.onload=function(){
//绘制原始图像,(0,0)表示图像的左上角位与canvas画布的位置
 ctx.drawImage(imgup,0,0);
}
bindEvents();//执行绑定事件

function bindEvents(){  //定义绑定事件 ,监听鼠标动作
canvas.ontouchstart = canvas.onmousedown = function(e) {    ready = true; };//鼠标摁下
canvas.ontouchend = canvas.ontouchcancel = canvas.onmouseup = canvas.onmouseout = (function(e) { ready = false; }); //鼠标抬摁下
canvas.ontouchmove = canvas.onmousemove = updateCanvas;//相应鼠标的移动事件
}

function updateCanvas(e){
if(!ready) {//鼠标未摁下
return;
}
var r = canvas.getBoundingClientRect();//获取当前canvas区域的坐标
var vx = e.clientX - r.left;//获取鼠标在图片上的横坐标
var vy = e.clientY - r.top;//获取鼠标在图片上的
var bs = BRUSH_SIZE;
var bsr = bs/2;   

if ( vx < bsr || vy < bsr) { //据canvas边缘太近,则指定此时"擦拭"无效
return;
}
ctx.rect(vx-bsr, vy-bsr, bs, bs);//否则圈定当前一块区域方便被"替换"为下一幅图的相同区域
ctx.drawImage(imgback, vx-bsr, vy-bsr, bs, bs, vx-bsr, vy-bsr, bs, bs); //替换
}
  </script>
</body>
 
三、总结
在上述游戏代码中,几乎没有难度,基本都是小逻辑,根据注释就能看屡清楚整个思路。但是案例可以非常好的体现出HTML5强大的功能,相信很多同学对这个案例都有兴趣。

本文版权归传智播客UI培训学院所有,欢迎转载,转载请注明作者出处。谢谢!
作者:传智播客UI培训学院
首发:http://www.itcast.cn/ui