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

上一篇：UI培训之美女撕衣服游戏详解（一） 下一篇：UI培训之Jquery Mobile 学习笔记(一)