微信H5页面 - 调酒
这是微信H5的一款小游戏（一款酒的推广活动），主要游戏页面如下：
这是微信H5的一款小游戏（一款酒的推广活动），主要游戏页面如下：
游戏规则：
- 点击选择2个元素（圈圈图片），放入瓶中，使它们与瓶中已有的三个元素碰撞，调配佳酿。
- 只有选择正确的2个元素搭配，才可以调配出对应的好酒，然后就进入奖励礼品页面啦~
正确的选择答案是（用户是不知道这个信息的 ）：
选择 以上3条线上的任意2个元素 组合搭配，都可以调酒成功，否则为失败。
技术考虑点：
1. 只能选2个元素，多选或少选，都会出现错误提示信息。
2. 点击元素后，相应的元素出现在瓶子里，同时自己消失。
3. 判断用户是否选择了正确的元素搭配。
HTML代码如下：
1 <!-- 瓶子外的六个元素 --> 2 <div id="pf"> 3 <img src="images/pf_hx.png" class="pf_hx"> 4 <img src="images/pf_td.png" class="pf_td"> 5 <img src="images/pf_cc.png" class="pf_cc"> 6 <img src="images/pf_yy.png" class="pf_yy"> 7 <img src="images/pf_cx.png" class="pf_cx"> 8 <img src="images/pf_sr.png" class="pf_sr"> 9 </div> 10 11 <!-- 瓶子内等待用户选择两个元素放入 --> 12 <div id="pf_selected"> 13 </div> 14 15 <!-- 按钮 --> 16 <a id="confirm_btn" class="btns">确认调配</a> 17 <a id="reset_btn" class="btns">重新调配</a>
CSS省略...
JS 代码（实现技术点1、2）：
1 //点击任意一个元素，发生的动作 2 $("#pf").find("img").click(function(){ 3 var content = $(this).clone(); // 把被点击的元素保存起来 4 // 判断瓶子里面是否有两个元素了 5 var pf_selected = $("#pf_selected").find("img"); 6 if (pf_selected.size()<2){ 7 $("#pf_selected").append(content); //把被点击的元素放入瓶子中 8 $(this).hide(); 9 } 10 else{ 11 alert("只能添加两种酒！") 12 } 13 })
其实这里的代码可以优化一下，我们这里虽然只有6个元素，那假设有100个元素，用以上方式的时候，你绑定了100个事件，这将可能带来很负面的性能影响。那么有什么更好的方式呢？
当多个元素都调用同一个函数时，用event.target会很有效果。你只要向它们的父节点绑定一次事件，然后通过event.target获取到点击的当前元素。
优化后的代码如下：
1 $("#pf").click(function(e){ 2 var clicked = $(e.target); // e.target 捕捉到触发的目标元素 3 var content = clicked.clone(); //把获取到的目标元素保存起来 4 var selected_img = $("#pf_selected").find("img") 5 if (selected_img.size()<2){ 6 $("#pf_selected").append(content); 7 clicked.hide(); // 触发的目标元素消失 8 } 9 else{ 10 alert("只能添加两种酒！") 11 } 12 })
JS代码 （实现技术点3：判断用户选择是否正确）
1 var mixStyle = ""; //选择口味 2 3 $("#pf").click(function(e){ 4 var clicked = $(e.target); 5 var content = clicked.clone(); 6 7 // 获取用户选择的信息，保存在“mixStyle”中 8 switch (content.attr('class')) { 9 case "pf_hx": 10 if (mixStyle === "") 11 mixStyle = "花香别致"; 12 else 13 mixStyle = mixStyle + "|花香别致"; 14 break; 15 case "pf_td": 16 if (mixStyle === "") 17 mixStyle = "甜淡清雅"; 18 else 19 mixStyle = mixStyle + "|甜淡清雅"; 20 break; 21 case "pf_cc": 22 if (mixStyle === "") 23 mixStyle = "层次复杂"; 24 else 25 mixStyle = mixStyle + "|层次复杂"; 26 break; 27 case "pf_yy": 28 if (mixStyle === "") 29 mixStyle = "愉悦舒爽"; 30 else 31 mixStyle = mixStyle + "|愉悦舒爽"; 32 break; 33 case "pf_cx": 34 if (mixStyle === "") 35 mixStyle = "醇香沉厚"; 36 else 37 mixStyle = mixStyle + "|醇香沉厚"; 38 break; 39 case "pf_sr": 40 if (mixStyle === "") 41 mixStyle = "舒润清甜"; 42 else 43 mixStyle = mixStyle + "|舒润清甜"; 44 break; 45 } 46 47 48 var selected_img = $("#pf_selected").find("img") 49 if (selected_img.size()<2){ 50 $("#pf_selected").append(content); 51 clicked.hide(); 52 } 53 else{ 54 alert("只能添加两种酒！") 55 } 56 }) 57 58 59 //点击确认调配按钮 60 $("#confirm_btn").click(function(){ 61 if ($("#pf_selected").find("img").length < 2) { 62 alert("请选择两种元素！"); 63 return; 64 } 65 var mixResult = "失败"; //调配结果 66 if (mixStyle === "舒润清甜|花香别致" || mixStyle === "花香别致|舒润清甜" 67 || mixStyle === "甜淡清雅|愉悦舒爽" || mixStyle === "愉悦舒爽|甜淡清雅" 68 || mixStyle === "层次复杂|醇香沉厚" || mixStyle === "醇香沉厚|层次复杂") { 69 mixResult = "成功"; 70 } 71 alert(mixResult); 72 73 })
其他页面们：
