网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践

前言:
　　之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识.
　　对于刮刮卡, 想必大家都很熟悉, 也很喜欢这种方式. 你可能会很好奇, 它是如何实现的呢?
　　本文将阐述其原理, 并结合具体实例来演示如何借助H5的canvas来实现类刮刮卡的效果.

展示效果:
    网页闯关游戏入口(请狠狠地点击我, ^_^) http://magic.mmxfgame.com.
    H5刮刮卡的实例源自第六关--拜访东方不败的故居.

　　

    这一关的技术点是围绕刮刮卡而展开的, 下文将详细介绍.

刮刮卡原理:
    刮刮卡的技术说开了无非就是遮盖, 擦拭的地方就是去遮盖, 并还原出遮盖底下的原始图片.
    先来谈谈H5支持的绘图模式, 再来介绍下按键处理和绘图API.
    • 绘图模式
    Canvas的Context句柄有一个属性：globalCompositeOperation, 该属性表示的是图形的组合方式.
    当我们把它设置为destination-out，它表示只绘制原图形与新图形不重叠的部分. 其实这句话有些晦涩, 很难让人看明白, 甚至误解. 不如直接上代码, 简洁明了, ^_^, 不上代码就是耍流氓.
    结合简单的刮刮卡案列来强化下概念吧.

　　

    原图形 等价于 刮刮卡的银灰色部分.
    新图形 等价于 用户/玩家刮的时候, 新绘制的区域/路径.
    被遮挡图片 等价于 银灰色部分覆盖的抽奖信息.
    当原图形和新图形重叠时, 就是刮到的部分是两者交集变成透明. 那么原图形遮挡的底层图片显示出来了, 也就是抽奖部分.
    所以说, 原图形就是遮盖图片, 新图形是用户刮的区域/路径.
    明白这些概念之后, 那么刮刮卡的实现就非常简单的, 几乎可以说是非常的navie.

游戏具体分析:
    游戏其实用了两张完全一样的图片, 一张为原图片(xyz1.jpg), 另一张则添加了解关秘钥答案(xyz2.jpg).
    • 底层图片的设定
    div元素中, 添加canvas元素.

<div id="id_dongfangbubai_canvas">
    <canvas id="game_canvas" width="480px" height="333px"></canvas>
</div>

再来看看css样式设置.

#id_dongfangbubai_canvas {
    background-image: url('http://www.xxx.com/img/xyz2.jpg');
    width: 480px;
    height: 333px;
}

答案的背景图片和canvas等同大小, 并设置于底层.

• html5中的图片加载
    js中图片加载时个异步过程, 需要时间, 因此切记在图片未加载完前操作.

var maskedImage = new Image();
// 设置图片链接
maskedImage.src = "http://www.xxx.com/img/xyz1.jpg";
// 设置图片加载完的回调函数
maskedImage.onload = function() {
    gray.drawImage(maskedImage, 0, 0);
    gray.globalCompositeOperation = "destination-out";
}

这样就实现了遮盖图片的绘制, 并成功设置了绘制模式.
    • 事件监听
    在移动端, 我们需要关注touchmove的事件操作. 再次之前, 我们先关注下坐标的定位上.

　　

    蓝色区域表示的是手机设备的显示区域，而绿色区域为canvas画布的父级，已经超出了屏幕。而浅紫色部分为canvas画布。假设我们手指轻触了蓝色点的位置，红色线即为“e.targetTouches[0].clientX”的值，黑色线为“document.body.scrollLeft”或“e.pageX”的值，而黄色的线表示myCanvas.offsetLeft。
    因此最终的横坐标x转换公式:

var x = e.targetTouches[0].clientX + document.body.scrollLeft - myCanvas.offsetLeft.

纵坐标y转换公式类似:

var y = e.targetTouches[0].clientY + document.body.scrollTop - myCanvas.offsetTop;

具体的事件处理如下所示:

var myCanvas = document.getElementById('game_canvas');
var ctx = myCanvas.getContext('2d');
 
var offsetx = myCanvas.offsetLeft;
var offsety = myCanvas.offsetTop;
 
myCanvas.addEventListener('touchmove', function (e) {
    e.preventDefault();
 
    ctx.beginPath();
    ctx.fillStyle = "#f00";
 
    if( e.changedTouches ){
        e=e.changedTouches[e.changedTouches.length-1];
    }
 
    var x = e.clientX + document.body.scrollLeft - myCanvas.offsetLeft;
    var y = e.clientY + document.body.scrollTop - myCanvas.offsetTop;
 
    // 绘制小圆形来模拟手指的刮动效果
    ctx.arc(x, y, 20, 0, Math.PI * 2);
 
    ctx.fill();
    ctx.closePath();
});

注: 绘制的区域/路径, 和遮盖层覆盖而变成透明, 最底层的答案部分就自然而然显露出来了.

总结:
    刮刮卡的实现原理和技术点, 其实很简单明了. 代码也就区区的几十行吧, 很清晰, 但涉及的知识点还不少. 对于我而言, 出题设计以及原理实现都是提高.
    最后, 希望游戏, 大家能喜欢.
http://www.cnblogs.com/mumuxinfei/p/5215472.html