首页 > 资讯 > 微信公众平台开发 > 正文

微信H5页面 - 调酒

16-07-01 来源：[db:作者]

收藏我要投稿

这是微信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 })

View Code

其他页面们：

点击复制链接与好友分享!回本站首页