微信H5页面 - 调酒

这是微信H5的一款小游戏（一款酒的推广活动），主要游戏页面如下：

游戏规则：

1. 点击选择2个元素（圈圈图片），放入瓶中，使它们与瓶中已有的三个元素碰撞，调配佳酿。
2. 只有选择正确的2个元素搭配，才可以调配出对应的好酒，然后就进入奖励礼品页面啦~

正确的选择答案是（用户是不知道这个信息的 ）：

选择 以上3条线上的任意2个元素 组合搭配，都可以调酒成功，否则为失败。

技术考虑点：

1. 只能选2个元素，多选或少选，都会出现错误提示信息。

2. 点击元素后，相应的元素出现在瓶子里，同时自己消失。

3. 判断用户是否选择了正确的元素搭配。

HTML代码如下：

 <!-- 瓶子外的六个元素 -->
 <div id="pf">
     <img src="data:images/pf_hx.png" class="pf_hx">
     <img src="data:images/pf_td.png" class="pf_td">
     <img src="data:images/pf_cc.png" class="pf_cc">
     <img src="data:images/pf_yy.png" class="pf_yy">
     <img src="data:images/pf_cx.png" class="pf_cx">
     <img src="data:images/pf_sr.png" class="pf_sr">
 </div>

 <!-- 瓶子内等待用户选择两个元素放入 -->
 <div id="pf_selected">
 </div>

 <!-- 按钮 -->
 <a id="confirm_btn" class="btns">确认调配</a>
 <a id="reset_btn" class="btns">重新调配</a>      

CSS省略...

JS 代码（实现技术点1、2）：

 //点击任意一个元素，发生的动作
 $("#pf").find("img").click(function(){
     var content = $(this).clone(); // 把被点击的元素保存起来
     // 判断瓶子里面是否有两个元素了
     var pf_selected = $("#pf_selected").find("img");
     if (pf_selected.size()<2){
         $("#pf_selected").append(content); //把被点击的元素放入瓶子中
         $(this).hide();
     }
     else{
         alert("只能添加两种酒！")
     }
 })

其实这里的代码可以优化一下，我们这里虽然只有6个元素，那假设有100个元素，用以上方式的时候，你绑定了100个事件，这将可能带来很负面的性能影响。那么有什么更好的方式呢？

当多个元素都调用同一个函数时，用event.target会很有效果。你只要向它们的父节点绑定一次事件，然后通过event.target获取到点击的当前元素。

优化后的代码如下：

 $("#pf").click(function(e){
     var clicked = $(e.target); // e.target 捕捉到触发的目标元素
     var content = clicked.clone(); //把获取到的目标元素保存起来
     var selected_img = $("#pf_selected").find("img")
     if (selected_img.size()<2){
         $("#pf_selected").append(content);
         clicked.hide(); // 触发的目标元素消失
     }
     else{
         alert("只能添加两种酒！")
     }
 })

JS代码 （实现技术点3：判断用户选择是否正确）

 var mixStyle = ""; //选择口味

 $("#pf").click(function(e){
     var clicked = $(e.target);
     var content = clicked.clone(); 

     // 获取用户选择的信息，保存在“mixStyle”中
     switch (content.attr('class')) {
         case "pf_hx":
             if (mixStyle === "")
                 mixStyle = "花香别致";
             else
                 mixStyle = mixStyle + "|花香别致";
             break;
         case "pf_td":
             if (mixStyle === "")
                 mixStyle = "甜淡清雅";
             else
                 mixStyle = mixStyle + "|甜淡清雅";
             break;
         case "pf_cc":
             if (mixStyle === "")
                 mixStyle = "层次复杂";
             else
                 mixStyle = mixStyle + "|层次复杂";
             break;
         case "pf_yy":
             if (mixStyle === "")
                 mixStyle = "愉悦舒爽";
             else
                 mixStyle = mixStyle + "|愉悦舒爽";
             break;
         case "pf_cx":
             if (mixStyle === "")
                 mixStyle = "醇香沉厚";
             else
                 mixStyle = mixStyle + "|醇香沉厚";
             break;
         case "pf_sr":
             if (mixStyle === "")
                 mixStyle = "舒润清甜";
             else
                 mixStyle = mixStyle + "|舒润清甜";
             break;
     }

     var selected_img = $("#pf_selected").find("img")
     if (selected_img.size()<2){
         $("#pf_selected").append(content);
         clicked.hide();
     }
     else{
         alert("只能添加两种酒！")
     }
 })

 //点击确认调配按钮
 $("#confirm_btn").click(function(){
     if ($("#pf_selected").find("img").length < 2) {
         alert("请选择两种元素！");
         return;
     }
     var mixResult = "失败"; //调配结果
     if (mixStyle === "舒润清甜|花香别致" || mixStyle === "花香别致|舒润清甜"
         || mixStyle === "甜淡清雅|愉悦舒爽" || mixStyle === "愉悦舒爽|甜淡清雅"
         || mixStyle === "层次复杂|醇香沉厚" || mixStyle === "醇香沉厚|层次复杂") {
         mixResult = "成功";
     }
     alert(mixResult);                

 })

其他页面们：